JavaScriptでMacOS XのDock機能を実現する:phpspot開発日誌

前の記事 ≪：便利すぎて困る程の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();
}

動作しているデモ

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