UI Layout は、jQuery に基づいたレイアウト フレームワークです。プロジェクトのホームページは http://layout.jquery-dev.net/ です。このフレームワークの参照プロトタイプは ExtJS のボーダー レイアウトであるため、ExtJS を使用したオリジナル プロジェクトを jQuery プロジェクトに変換するのに非常に適しています。その核となるのは、サイズに対応したセンター パネル (必須) で、パネルの 4 方向に折りたたみ可能でスケーラブルなパネルを配置できます (オプション)。各パネルに任意の数のヘッダー パネルとフッター パネルを追加できます。 UI レイアウトは、内部レイアウトのネストをサポートしています。最も基本的なレイアウト コンテナーは、任意のブロック要素です。
基本的な使用法: コンテナー要素を取得し、レイアウト メソッドを呼び出し、構成パラメーター (オプション) を渡します。
$('body').layout( [options] ); 通常は、レイアウト コードを通じてレイアウト形状をさらに制御するためのリファレンス。
var myLayout = $('body') .layout( );
//レイアウト設定オプションを読み取ります
var is_west_resizable = myLayout.options.west.resizable;
var North_maxHeight = myLayout.options.north.maxSize;
//レイアウト関数を呼び出します。
myLayout.toggle("north");
myLayout.sizePane("west", 300);
// レイアウト ツールを呼び出します
myLayout.addPinBtn("#myPinButton", "west") );
myLayout.allowOverflow("north");
すべてのパネルは既存の HTML 要素に基づいており、パネルの補助コンポーネント (ズーマイザーと折りたたみスイッチ) は自動的に生成されます。 added 対応するクラス属性が追加されます。フォーム コンテナを除き、ほとんどすべてのパネル要素はコンテナ要素の直接の子である必要があります。デフォルトのクラス名、またはカスタムのクラス名と ID を対応する HTML 要素に割り当てて、レイアウト パネルを指定できます。直感的な例を次に示します。
$( document).ready(function() {
$("body").layout({
/*
東と西のペインは div 内にネストされているため、
ID セレクターが必要です'
*/
west__paneSelector: "#west"
, east__paneSelector: "#east"
/*
北と南のペインは「本体の子」です
*/
、north__paneSelector : ".ui-layout-north"//デフォルト設定、省略可能
、south__paneSelector: ".myclass-south"
/*
中央ペインは '最初のフォームの子です'
デフォルトセレクターは参考のために示しています
*/
, center__paneSelector: ".ui-layout-center"//デフォルト設定、省略可能
});
対応するページ:
