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

来源：互联网发布：2017高仿耐克淘宝店编辑：程序博客网时间：2024/05/01 04:08

@author YHC

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

查看 Demo

定义一些panel

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

代码看起来就像这些:

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

自定义panel外观效果

注意:那个视图外观不是我们想要的,我们必须改变panel头部的背景图片和collapse(折叠)/expand(展开)按钮的icon的样式,

做到这个一点都不难,我们需要做的是重新定义一些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示例代码:

easyui-panel-demo.zip