jQuery EasyUI 布局 – 創(chuàng)建 XP 風(fēng)格左側(cè)面板

jQuery EasyUI 布局 - 創(chuàng)建 XP 風(fēng)格左側(cè)面板

本節(jié)將介紹如何使用jQuery EasyUI中的面板（panel）插件來創(chuàng)建Windows XP風(fēng)格的左側(cè)面板。

通常情況下，在Windows XP的資源管理器文件夾中，左側(cè)的面板（panel）包含一些常見任務(wù)。 

定義一些面板（panel）

我們定義一些面板，這些面板用來顯示一些任務(wù)。每個面板應(yīng)該至少有折疊/展開工具按鈕。

代碼如下所示：

	<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>

自定義面板（panel）的外觀效果

請注意，這個視圖外觀效果不是我們想要的，我們必須改變面板（panel）的頭部背景圖片和折疊/展開按鈕的圖標。

做到這一點并不難，我們需要做的只是重新定義一些CSS。

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

由此可見，使用easyui定義用戶界面非常簡單。

下載 jQuery EasyUI 實例

jeasyui-layout-xp.zip

相關(guān)教程

《CSS教程》