[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery
Post on:2011年2月23日
sponsors
ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。
[ad#ad-2]
配置のデモでは、ピンクのパネル（「drag me」）をドラッグすると、それに合わせて各パネルの配置がダイナミックに変更されます。
ピンクのパネルを移動したキャプチャ
上記の各色のパネルにはそれぞれ条件が設定されています。
例えば、オレンジのパネルは下記のようなスクリプトになっています。
JavaScript
$("#orange").align({top:'', bottom:"", left:"", rightIsLeftOf:'pink'});
$("#orange").limit({rightIsLeftOf:'blue'});
オレンジのパネルはピンクの左に沿って配置（align:rightIsLeftOf:pink）され、ブルーの左側より右にはならないよう配置（limit:rightIsLeftOf:blue）されています。
[ad#ad-2]
また、「Create menu」ではリスト要素で実装したメニューにさまざまなインタラクションを与えることができます。
Create menuのデモのキャプチャ
子階層の開閉をクリック・ホバー、またそれぞれに異なる操作を指定したり、ホバー時にclass名を付与するなども簡単にできます。
sponsors
