[JS]水平・垂直など多彩なデザインが可能なDock風ナビゲーションのスクリプト -jqDock
Post on:2010年10月29日
sponsors
水平タイプ、垂直タイプなど多彩なデザインが可能なMac OS XのDock風ナビゲーションを実装するスクリプトを紹介します。
下記のキャプチャは水平タイプのもので上から、上揃え、中央揃え、下揃えとなっています。
[ad#ad-2]
デモでは、HTML5, XHTML 1.0(Transitional, Strict), HTML 4.01(Transitional, Strict)のDoctype有り・無しごとの動作確認ができます。
下記では、その多彩なデザインをいくつか紹介します。
左から、左揃え、中央揃え、右揃え
左から、Sleep Slide（アイドル時にスライドで隠れる）、Colourise（カラー）、ClickFreeze（クリックで固定）、ラベル表示
[ad#ad-2]
スクリプトのオプションも豊富で、下記にいくつか紹介します。
サイトのデモではこれらのオプションが簡単に試せます。
- active（デフォルト： -1）
- Dockが初期化された際にアクティブとなるアイテムを指定
- align（デフォルト：bottom）
- Dockの各アイテムを揃える位置
- coefficient（デフォルト：1.5）
- イメージの拡大の量
- distance（デフォルト：72）
- カーソルからの距離
- duration（デフォルト：300）
- 拡大時と収納時の持続時間
- fadeIn（デフォルト：0）
- フェードの時間
- fadeLayer（デフォルト：無し）
- フェードする際のレイヤー
- flow（デフォルト：false）
- 相対的なポジションの調整
- idle（デフォルト：0）
- アイドルタイム
- inactivity（デフォルト：0）
- マウスが動かなかった際に隠れる時間
- labels（デフォルト：false）
- ラベルの表示・非表示、表示位置
- setLabel（デフォルト：無し）
- ラベルの設定
- size（デフォルト：48）
- イメージの最大値
- step（デフォルト：50）
- イメージ拡大の時間
sponsors
