当サイトのポップアップバーで、dockの様なインターフェイスを可能にしているJavaScriptライブラリ jodo の widget :Fisheyeですが、次の理由で外すことにしました1 。
- dojoが呼び込むファイル（srcファイル群）が多いせいか、表示までに時間がかかり、重くなること
- dojoが作成するコードがXHTMLバリデータでしかられまくること
dojo.jsの導入が簡単なだけに、ちょっと残念です。以下は導入のメモ。
ライブラリ名称： Dojo 0.4.2 AJAX Edition
配布元： The Dojo Toolkit | The JavaScript Toolkit
ファイルのアップロード
圧縮ファイルをダウンロードして解凍すると、中にデモとか説明とかいろいろ入っていて、何が必要なのか分からんが、とりあえず全部まとめてdojoとかのディレクトリとしてアップロード。なぜか、”src”フォルダ全部と”dojo.js”だけでは動かなかった。他にも必要なファイルがあるらしい。
javascript の記述
<head>に下の javascript コードを記述。
HTML
<script type="text/javascript" src="path-to-dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
function load_app(sURL){ location.href=sURL; }
</script>「function load_app()」は、アイコンをクリックしたときの動作を設定しますので適当に変えます。
<body>のアイコンを表示させるところに下記タグを記述。
HTML
<div dojoType="FisheyeList"
itemWidth="100"
itemHeight="100"
itemMaxWidth="200"
itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="top"
enableCrappySvgSupport="true">
<div dojoType="FisheyeListItem"
onclick="load_app('リンクURL');"
iconsrc="path-to-img.png"
caption="タイトル">
</div>
<div dojoType="FisheyeListItem"
onclick="load_app('リンクURL');"
iconsrc="path-to-img.jpg"
caption="タイトル">
</div>
...
</div>FisheyeListの設定項目
- itemWidth, itemHeight : 縮小時の画像サイズ
- itemMaxWidth, itemMaxHeight : マウスオーバー時の画像サイズ
- orientation ： “horizontal”が横並びで”vertical”が縦
- effectUnits : 拡大／縮小するアイコンの範囲
- itemPadding ： アイコンの間隔
- attachEdge ： アイコンが拡大する方向（固定する端）
- labelEdge ： タイトルを表示させる位置
- enableCrappySvgSupport : svgを利用した拡大縮小
dojo:Fisheyeが変更した後のHTML
Fisheyeがロードされると前出のHTMLは以下のようになります。場合によってはCSSで見た目を設定してあげます。
HTML
<div class="dojoHtmlFisheyeListBar" style=" ">
<div class="dojoHtmlFisheyeListItem" style=" " dojoinsertionindex="0">
<img dojoattachevent="onMouseOver;onMouseOut;onClick"
dojoattachpoint="imgNode"
class="dojoHtmlFisheyeListItemImage"
src="path-to-image.png"
style=" "/>
<div dojoattachpoint="lblNode"
class="dojoHtmlFisheyeListItemLabel"
style=" ">タイトル</div>
</div>
</div></div>
Trackback URL
One Trackback/Pingback
[...] 清水区 2 users News weather Bookmark.push(’entry-4358064′) macのdock風インターフェイス：dojo:Fisheye | Tech de Go http://www.techdego.com コンピュータ Ajax CSS JavaScript Mac 2 users [...]
Post a Comment