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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:rubyで一行掲示板