前の記事 ≪:便利すぎて困る程のFireBug1.0系を使ってみよう
次の記事 ≫:CakePHP内の処理を理解できる記事

JavaScriptでMacOS XのDock機能を実現する

2006年12月19日-はてなブックマーク

スポンサード リンク
Alexei@Nitobi Blog Archive Development Diary: Taming the Fisheye
I thought it might be a good idea to document the development of one of our components from a user-interface perspective. We’re in the process of developing a host of new components now, which should be ready for release early this spring. One of these is a Fisheye Menu.

JavaScriptでMacOS XのDock機能を実現する。
Dock機能というのは、次の画像のようにカーソルを合わせると画像を拡大させるアレのことです。



コードは次のようにシンプルで、実装も容易な感じですね。

function runLoad()
{
 myFishEye = new ntbFishEye('myFishEye3', 200, 'down', 'RIGHT',  50, 'fishcontainer');
 myFishEye.addMenuItem("file_new.png", "New File");
 myFishEye.addMenuItem("file_edit.png", "Edit File");
 myFishEye.addMenuItem("file_explore.png", "Search File");
 myFishEye.addMenuItem("file_export.png", "Export File");
 myFishEye.addMenuItem("file_del.png", "Delete File");
 myFishEye.addMenuItem("file_attention.png", "Flag File");
 myFishEye.addMenuItem("file.png", "New Sheet");
 myFishEye.addMenuItem("cut.png", "Cut");
 myFishEye.addMenuItem("info.png", "About");
 myFishEye.render();
}

動作しているデモ



凄くなめらかに動作し、クリックしたときの飛び跳ねるエフェクトまで再現されてますね^^;
素晴らしいです。

関連エントリ

関連の記事検索:JavaScript, Ajax, Mac, ライブラリ, デザイン, Webデザイン
スポンサード リンク

By.KJ : 2006年12月19日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)