jQuery の jqDock プラグインで作る Mac OS X 風ドックメニューは、labels オプションを設定することにより、メニュー画像上にラベルを表示させることができる。表示されるのは、メニュー画像の img タグ内の title 属性で指定した値。
初期設定値は、「Off」で、表示しないようになっている。
jqDock プラグインの入手方法などについては、こちら。
指定方法
<script type="text/javascript">
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
labels: 'ここに、off,on,tl,tc,tr,ml,mc,mr,bl,bc,br の何れかを指定する'
}
);
});
// -->
</script>
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
labels: 'ここに、off,on,tl,tc,tr,ml,mc,mr,bl,bc,br の何れかを指定する'
}
);
});
// -->
</script>
実装例（サンプル）
On
表示位置は、tl と同じく左上。
tl
左上に表示。
tc
上の中心に表示。
tr
右上に表示。
ml
左に表示。
mc
中心に表示。
mr
右に表示。
bl
左下に表示。
bc
下の中心に表示。
br
右下に表示。
実装例（サンプル）の動作について
例えば、BLOG にカーソルを合わせると、BLOG のメニュー画像が大きくなり、それぞれの指定位置に、「ブログ」と表示する。
実装例（サンプル）のソースコード
読み込み
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.js"></script>
ファイルへのパスは、それぞれ、アップロードした場所を指定する。
JavaScript
<script type="text/javascript">
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
labels: 'tl'
}
);
});
// -->
</script>
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
labels: 'tl'
}
);
});
// -->
</script>
tl の値の部分が、ラベルを表示する位置。この値を、tc や br などに変更することで、ラベルを表示する位置を変更できる。
CSS
<style type="text/css">
<!--
div#jquery-plugin-jqDock {
margin-top: 35px;
}
-->
</style>
<!--
div#jquery-plugin-jqDock {
margin-top: 35px;
}
-->
</style>
重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。
HTML
<div id="jquery-plugin-jqDock">
<a href="#"><img src="img/jqDock_home_70.png" title="ホーム" alt="home" /></a>
<a href="#"><img src="img/jqDock_blog_70.png" title="ブログ" alt="blog" /></a>
<a href="#"><img src="img/jqDock_about_70.png" title="紹介" alt="about" /></a>
<a href="#"><img src="img/jqDock_mail_70.png" title="メール" alt="mail" /></a>
<a href="#"><img src="img/jqDock_bbs_70.png" title="掲示板" alt="bbs" /></a>
<a href="#"><img src="img/jqDock_link_70.png" title="リンク" alt="link" /></a>
</div>
<a href="#"><img src="img/jqDock_home_70.png" title="ホーム" alt="home" /></a>
<a href="#"><img src="img/jqDock_blog_70.png" title="ブログ" alt="blog" /></a>
<a href="#"><img src="img/jqDock_about_70.png" title="紹介" alt="about" /></a>
<a href="#"><img src="img/jqDock_mail_70.png" title="メール" alt="mail" /></a>
<a href="#"><img src="img/jqDock_bbs_70.png" title="掲示板" alt="bbs" /></a>
<a href="#"><img src="img/jqDock_link_70.png" title="リンク" alt="link" /></a>
</div>
画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。