jQueryレイアウトプラグインUI Layout_jqueryの紹介と使い方-jsチュートリアル-php.cn

jQueryレイアウトプラグインUI Layout_jqueryの紹介と使い方

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 17:38:28

オリジナル

1932 人が閲覧しました

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"//デフォルト設定、省略可能
}); 

 