jEasyUI は境界線レイアウトを作成します

ボーダーレイアウトには、東、西、北、南、中央の 5 つのエリアがあります。一般的な用途は次のとおりです:

• 北エリアは、Web サイトのスローガンを表示するために使用できます。

• 南エリアは、著作権といくつかの指示を表示するために使用できます。

• 西エリアはナビゲーションメニューを表示するために使用できます。

• 東エリアは、いくつかのプロモーションアイテムを表示するために使用できます。

• 中央領域はメインコンテンツを表示するために使用できます。

レイアウトを適用するには、レイアウト コンテナを特定し、いくつかの領域を定義する必要があります。レイアウトには少なくとも 1 つの中央領域が必要です。以下はレイアウトの例です。

	<div class="easyui-layout" style="width:400px;height:200px;">
		<div region="west" split="true" title="Navigator" style="width:150px;">
			<p style="padding:5px;margin:0;">Select language:</p>
			<ul>
				<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
				<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
			</ul>
		</div>
		<div id="content" region="center" title="Language" style="padding:5px;">
		</div>
	</div>

レイアウトは、コンテナを 2 つの部分に分割します。左側にナビゲーション メニューがあります。そして右側がメインコンテンツです。

最後に、データを取得するための onclick イベント ハンドラー関数を作成します。「showcontent」関数は非常に簡単です:

	function showcontent(language){
		$('#content').html('Introduction to ' + language + ' language');
	}

jQuery EasyUI のサンプルをダウンロードします

jeasyui-layout-layout.zip