秋元@サイボウズラボ・プログラマー・ブログ: スクロールするタブをYUIベースで実現したライブラリ
yodelerというYahoo UI ライブラリベースのUIを開発しているReid Burkeさんが発表したのが、タブ切り替えとスクロールを組み合わせた新しいタブ切り替え表示部品。 切り替えるときにタブの中身の切り替わりがスクロールでなされる、ということなんだけど、見てもらうほうがはやい。 縦スクロール版 / 横スクロール版 切り替えに時間がかかるので日常使いのページには良くない気もするけど、そうでないときにちょっとユーザをびっくりさせることができるかもしれない。 ライブラリはBSDライセンスで、その他の作品とあわせてsvnで公開されている。 via Ajaxian この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッタ
画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」:phpspot開発日誌
reflex.js (with IE 6/7 support) reflex.js 1.1 allows you to add a Cover Flow effect (including reflection) to images on your webpages. 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 次のような画像の映り込みエフェクトを付けることができます。 使い方は、必要なライブラリを読み込んで class を付与するだけのようです。 他にもいろいろあります。 Corner.js - 角丸効果や、シャドウ効果を画像に与える Glossy.js - 画像にガラス風の光沢を与える Instant.js - インスタントカメラ風エフェクトを与える Slided.js - スライドのフレーム風にエフェクトを与える Filmed.js - 映
半透明でクールにフェードするツールチップ実装ライブラリ「CoolTips」:phpspot開発日誌
CoolTips ? Neat tooltips under the mouse CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique. 半透明でクールにフェードするツールチップ実装ライブラリ「CoolTips」。 次のような角丸のツールチップがフェードアウトでクールに現れます。 title 属性に設定した値を出してくれるようです。 使い方は最初にライブラリを読み込んでおき、後は、ツールチップの色の設定などを調節するだけのようです。 デザイン性の高いサイトなんかにデフォルトで使えそうなツールチップライブラリですね。 関連エントリ JavaScriptツールチップライブラリ24個
iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」:phpspot開発日誌
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」:phpspot開発日誌
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」 2007年02月16日- DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage JavaScriptで線や円
CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」:phpspot開発日誌
willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、
prototype.jsを用いたフォントサイズ変更スクリプト:phpspot開発日誌
prototype.jsを用いたフォントサイズ変更スクリプト - Ogawa::Memoranda それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプトを実現してみました。 prototype.jsを用いたフォントサイズ変更スクリプト。 実装することで次のように、文字のサイズを選べる機能をページに実装できます。 ブラウザの文字サイズを変更するよりも手軽に文字サイズを変更できる機能として、ユーザビリティ向上に役立ちそうですね。 関連エントリ ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 JavaScriptを使ってページにマウスジェスチャ機能を実装する
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」:phpspot開発日誌
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」 2007年06月20日- Ext.Accordion Widget Example by Saki This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page. JavaScriptライブラリExtを使った伸縮する
伸縮するアコーディオン風UI実装ライブラリ集:phpspot開発日誌
10 different styles of Accordion’s (Using Ajax, JavaScript, DHTML…)at Developer Snippets Hi developers here I am back again with some useful stuff. I had a thought of how to represent lot of stuff in a constant space area in a webpage 伸縮するアコーディオン風UI実装ライブラリ集。 YourHead Accordion Ext Accordion MooTools Menu Accordion Example with Mootools Accordion Example Accordion Demo 伸び縮みするので少ないスペースで実装することが出来、なめら
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
Ajaxでおしゃれな小窓を作る6つのサンプル*ホームページを作る人のネタ帳
http://youmos.com/news/accordion_js