应用easyUI创建XP风格左侧面板

使用easyUI创建XP风格左侧面板

@author YHC

通常,资源管理器文件夹在XP下的左侧的panel包含一些常见任务,这个教程向你展示如何创建XP左侧面板风格,使用easyui的panel插件.

查看 Demo

定义一些panel我们定义一些panel显示一些任务,每个panel应该至少有collapse(折叠)/expand(展开)工具按钮.

代码看起来就像这些:

.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示例代码:easyui-panel-demo.zip