创建XP风格的左侧面板

使用教程 » 创建XP风格的左侧面板

通常情况下，Windows XP中的资源管理器文件夹有一个包含常见任务的左面板。 本教程向您展示如何使用easyui的panel插件创建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 实例: