jEasyUI は XP スタイルの左パネルを作成します

通常、Windows XP のエクスプローラー フォルダーの左側のパネルには、いくつかの一般的なタスクが含まれています。 このチュートリアルでは、easyui パネル プラグインを使用して XP の左パネルを作成する方法を示します。

いくつかのパネルを定義します

いくつかのタスクを表示するために使用されるいくつかのパネルを定義します。各パネルには少なくとも折りたたみ/展開ツール ボタンが必要です。

コードは次のとおりです:

	<div style="width:200px;height:auto;background:#7190E0;padding:5px;">
		<div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
			View as a slide show<br/>
			Order prints online<br/>
			Print pictures
		</div>
		<br/>
		<div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
			Make a new folder<br/>
			Publish this folder to the Web<br/>
			Share this folder
		</div>
		<br/>
		<div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
			New York<br/>
			My Pictures<br/>
			My Computer<br/>
			My Network Places
		</div>
		<br/>
		<div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
			My documents<br/>
			File folder<br/><br/>
			Date modified: Oct.3rd 2010
		</div>
	</div>

パネルの外観をカスタマイズします

このビューの外観は私たちが望むものではないことに注意してください。ヘッダーの背景画像を変更し、パネルのボタンアイコンを折りたたむ/展開する必要があります。

これを行うのは難しいことではありません。CSS を再定義するだけです。

	.panel-body{
		background:#f0f0f0;
	}
	.panel-header{
		background:#fff url('../style/images/panel_header_bg.gif') no-repeat top right;
	}
	.panel-tool-collapse{
		background:url('../style/images/arrow_up.gif') no-repeat 0px -3px;
	}
	.panel-tool-expand{
		background:url('../style/images/arrow_down.gif') no-repeat 0px -3px;
	}

easyui を使用してユーザー インターフェイスを定義するのは非常に簡単であることがわかります。

jQuery EasyUI サンプルをダウンロード

jeasyui-layout-xp.zip