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

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

sponsors

使用方法

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>
また必要に応じてstyleで以下を指定してください(Fisheye部分をセンター寄せにしているだけです)。
.dojoHtmlFisheyeListBar {
margin: 0 auto;
text-align: center;
}
次に画像の指定です。
#ここから
<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には画像にマウスオーバーした時に表示される言葉を書き込んでください。
なお画像をクリックした時にページ遷移やアラートさせたい場合はonclick属性を使用してください。
<div dojoType="FisheyeListItem" onclick="alert('アラートメッセージ')"
iconsrc="表示したいpngファイルパス" caption="word">
</div>

sponsors

Javascriptサンプルページ一覧
skuare.net