jQuery の jqDock によるドックメニューのサイズを指定

jQuery の jqDock プラグインで作る Mac OS X 風ドックメニューは、size オプションを設定することにより、最初に表示するメニュー画像の大きさを指定できる。
初期設定値は、「48」。
jqDock プラグインの入手方法や、他のオプションについては、こちら

実装例(サンプル)

48(デフォルト)

home blog about mail bbs link

60

home blog about mail bbs link

35

home blog about mail bbs link

32

home blog about mail bbs link

24

home blog about mail bbs link

実装例(サンプル)の動作について

メニュー画像にマウスのカーソルを合わせると、メニュー画像の元のサイズである 70px に拡大する。

実装例(サンプル)のソースコード

読み込み

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.js"></script>

jquery.js と jquery.jqDock.js を読み込む。
ファイルへのパスは、それぞれ、アップロードした場所を指定する。

JavaScript

<script type="text/javascript">
<!--
$( function() {
    $( '#jquery-plugin-jqDock' ) . jqDock(
        {
            size: '48'
        }
    );
});
// -->
</script>

48 の数値の部分が、カーソルにメニュー画像が反応する距離。この数値を、35 や 32 などに変更することで、最初に表示するサイズを指定できる。

CSS

<style type="text/css">
<!--
div#jquery-plugin-jqDock {
    margin-top: 22px;
}
-->
</style>

重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。
size オプションに指定したサイズに応じて必要なマージンは変化する。例えば、元画像が 70px で、size オプションに 48 を指定した場合、70-48 で 22px となる。

HTML

<div id="jquery-plugin-jqDock">
    <a href="#"><img src="img/jqDock_home_70.png" title="home" alt="home" /></a>
    <a href="#"><img src="img/jqDock_blog_70.png" title="blog" alt="blog" /></a>
    <a href="#"><img src="img/jqDock_about_70.png" title="about" alt="about" /></a>
    <a href="#"><img src="img/jqDock_mail_70.png" title="mail" alt="mail" /></a>
    <a href="#"><img src="img/jqDock_bbs_70.png" title="bbs" alt="bbs" /></a>
    <a href="#"><img src="img/jqDock_link_70.png" title="link" alt="link" /></a>
</div>

画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。

スポンサード リンク

カテゴリー: JavaScript, jqDock, jQuery, プラグイン, メニュー パーマリンク