jQuery EasyUI使用教程：創(chuàng)建XP風(fēng)格的左側(cè)面板

---

Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)！查看詳情>>>

<jQuery EasyUI最新版下載>

通常情況下，在Windows XP的資源管理器文件夾中，左側(cè)的面板包含了一些常見(jiàn)的任務(wù)。本教程教你如何通過(guò)easyui的面板插件來(lái)創(chuàng)建XP風(fēng)格的左側(cè)面板。

定義多個(gè)面板

我們定義了多個(gè)面板來(lái)顯示一些任務(wù)，每個(gè)面板至少應(yīng)該有折疊/展開(kāi)工具按鈕。該代碼如下：

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

自定義面板的外觀效果

請(qǐng)注意，如果這個(gè)視圖的外觀效果不是我們想要的，那么我們必須更改面板頭部背景圖片和折疊/展開(kāi)按鈕的圖標(biāo)。做到這一點(diǎn)并不是很難，我們應(yīng)該重新定義一些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;
}

由此可見(jiàn)，使用easyui定義用戶界面是非常簡(jiǎn)單的。

下載該EasyUI示例：

購(gòu)買(mǎi)最新正版授權(quán)！""