dojoでOSX風のインターフェイス Fisheye
配布元：dojo
javascript使用のため、今回も当然js無効の場合は効果なし。
DEMO ： こんな感じ。
なんか見え方がブラウザによった微妙に違うっぽい(?)手元のブラウザでは拡大したときの画像はOperaが一番キレイに見えた(ような気がする)。
javascriptがオフの場合はこのままでは何も表示されないので、そこは注意が必要かと思われ。
dojoのライブラリは数も多くてなんか混乱しそうなのだが、使いたいパッケージに必要なファイルを勝手に読み込みしてくれるようになっている。とりあえずdojo.jsを読み込んでから、dojo.require("dojo.widget.FisheyeList"); みたいな感じで必要なパッケージを読み込むだけでＯＫ。
htmlソース
<script src="http://redline.hippy.jp/js/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.widget.FisheyeList");
</script>
<div dojotype="FisheyeList"
dojo:itemWidth="50"
dojo:itemHeight="50"
dojo:itemMaxWidth="150"
dojo:itemMaxHeight="150"
dojo:orientation="horizontal"
dojo:effectUnits="2"
dojo:itemPadding="10"
dojo:attachEdge="center"
dojo:labelEdge="bottom"
dojo:enableCrappySvgSupport="false">
<div dojotype="FisheyeListItem" iconsrc="images/hoge.gif" caption="サンプル"></div>
<div dojotype="FisheyeListItem" iconsrc="images/hoge.gif" caption="キャプション"></div>
<div dojotype="FisheyeListItem" iconsrc="images/hoge.gif" caption="日本語もOK"></div>
<div dojotype="FisheyeListItem" iconsrc="images/hoge.gif" caption="マックみたいな"></div>
<div dojotype="FisheyeListItem" iconsrc="images/hoge.gif" caption="メニュー。"></div>
</div>
ソース内の自分で設定する部分もたいがい簡単に英語なので見たらなんとなく分かるので適当に設定。アイコンにリンクを設定したい時はonClickで設定。（上のサンプルでは何もリンクとか設定してないけど。）
あ。バリデータは通りません･･･あしからず。
