jQuery EasyUI使用教程：創建XP風格的左側面板

---

Kendo UI for jQuery——創建現代Web應用程序的最完整UI庫！查看詳情>>>

<jQuery EasyUI最新版下載>

通常情況下，在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('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定義用戶界面是非常簡單的。

下載該EasyUI示例：

購買最新正版授權！""