skuare.net

Fisheyeを実現するjavascriptライブラリ「dojo」

MACではDockと呼ばれるシステムメニューがあり、マウスを乗せると大きく表示されます。
これにより、省スペースで多くのメニューを表示することができます。
一般的にはFisheye（魚眼）と呼ばれ、Javascriptのライブラリで有名なdojoではこのFisheyeを実現するwidgetを提供しています。

使用方法
dojoからダウンロードしてきたファイルの中で、dojo.jsとsrcフォルダを全てアップロードします。
head内にはdojo.jsファイルのほか、以下のscriptを書き込みます。
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: false};
</script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
</script>
次に画像の指定です。
<div dojoType="FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
enableCrappySvgSupport="false"
>
<div dojoType="FisheyeListItem"
iconsrc="表示したいpngファイルパス" caption="キャプション">
</div>
<div dojoType="FisheyeListItem"
iconsrc="表示したいpngファイルパス" caption="キャプション">
</div>
;<div dojoType="FisheyeListItem"
iconsrc="表示したいpngファイルパス" caption="キャプション">
</div>
</div>
初期値の幅と高さはitemWidth、itemHeightで指定し、大きくした時の幅などはMaxの方で指定します。
表示したい画像はpngで透過したファイルを、表示したい数だけdiv要素で追加してください。
captionには画像にマウスオーバーした時に表示される言葉を書き込んでください。
Fisheyeを実現するjavascriptライブラリ「dojo」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：グラフを作成するjavascript「PlotKit」
次の記事：rubyで一行掲示板

関連記事

• [mootools]iFishEye
• [mootools]Fisheye
• MacライクなDockメニューを作成するjavascript「PBB Dock」
• prototypeでFisheyeメニューを作成するjavascript「Fisheye」
• MacのDockライクなメニューを手軽に作成するjavascript「Fisheye Menu」