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示例：

购买最新正版授权！""