[JS]インタラクティブでフレキシブルなレイアウトが楽しめるスクリプト -Magic jQuery

ページ内のエレメントの配置や、メニュー、タブなど、ユーザーインタラクションを伴ったレイアウトが簡単に実現できるjQueryのプラグインを紹介します。

デモのキャプチャ

Magic 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

top of page

©2018 coliss