skuare.net

Dockメニュー作成javascript「A Mac OS X-style Dock In JavaScript」

Macで使用されるDockメニュー。
当サイトでもたびたび紹介してきましたが、 A Mac OS X-style Dock In JavaScriptでも作成することが出来ます。

A Mac OS X-style Dock In JavaScriptからMacStyleDock.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/MacStyleDock.js"></script>
上記を記述したら、Dockを表示したい場所に以下を記述します。
<div id="dock"></div>
<script type="text/javascript">
var dock = new MacStyleDock(
document.getElementById('dock'),
[
//ここからメニュー
{
name: 'http://yourdoamin/img', //画像の場所
extension: '.jpg', //画像の拡張子
sizes: [64,128], //画像のサイズ（小、大の順）
onclick: function(){ //クリック時の機能
alert('Safari !'); //アラート
}
},
//ここまでメニュー（これを表示画像分）
],
64, //最小サイズ
128, //最大サイズ
2.5); //拡大幅（？）
</script>
Dockメニュー作成javascript「A Mac OS X-style Dock In JavaScript」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：パスワード強度を視覚的に明示するjavascript「Password Strength」
次の記事：JavaScriptライブラリ「mootools」をマスターするためのサイト14

関連記事

• MacライクなDockメニューを作成するjavascript「PBB Dock」
• [mootools]mooVRotatingMenu
• [prototype]Tree.js
• [mootools]UI Tabs
• [prototype]Control.Tabs