TAGS: jQuery | JavaScript | Menu | Dock | ドック | メニュー | Mac | MIT | GPL
MacOS X風ドックメニューを簡単に実装できるJavaScriptライブラリ(jQueryプラグイン)です。



■ライセンス:MITもしくはGPL
■ブラウザー:Firefox 2.0(Windows)、IE6.0+(Windows)、Firefox 1.5(Mac & Mac OS X )、Safari 2.0(Mac & Mac OS X)

使い方



1)JavaScript宣言定義
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dock.js"></script>


2)画像(gif、jpg、png)の用意
※ファイル名をご注意いただきたい
  画像名_x.gif(例:pic01_35.gif)
  画像名_X.gif(例:pic01_70.jpg)

xは小サイズ時の画像数
Xは大サイズ時の画像数
gif、jpg、pngどちらでも良い

3)img要素を含めたHTML定義
<div id="Bar">
    <a href="#">
        <img src="img/alerts_35.gif" alt="画像1" border="0" />
    </a>
    <a href="#">
        <img src="img/desktop_35.gif" alt="画像2" border="0" />
    </a>
    ...
</div>


img要素は必ずa要素に囲まれるようにしてください。

4)javascriptでドック表示
<script type="text/javascript">
    var confObject = {
        iconMinSide : 35,    //小サイズ(推奨:20-50)
        iconMaxSide : 70,    //大サイズ(推奨:70-140)
        distAttDock : 100,    //カーサの位置とエフェクト終了位置間の距離
        coefAttDock : 2,    //(推奨:0.5-2.5)
        veloOutDock : 500,    //初期状態に戻るまでの時間(マウスがメニューから離れた時間)(推奨:500-2000)
        valign: 'bottom'    //揃え方('top', 'bottom' or 'middle'など)
    }
    jQuery(function() {
         jQuery("#Bar").addDockEffect(confObject);
    });
</script>


デモはこちら

Sponsored Link


有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments