天天看点

雷林鹏分享:jQuery EasyUI 布局 - 创建 XP 风格左侧面板

  jQuery EasyUI 布局 - 创建 XP 风格左侧面板

  通常情况下,在 Windows XP 的资源管理器文件夹中,左侧的面板(panel)包含一些常见任务。 本教程向您展示如何通过 easyui 的面板(panel)插件来创建 XP 左侧面板。

  定义一些面板(panel)

  我们定义一些面板(panel),这些面板(panel)用来显示一些任务。每个面板(panel)应该至少有折叠/展开工具按钮。

  代码如下所示:

  

  View as a slide show

  Order prints online

  Print pictures

  Make a new folder

  Publish this folder to the Web

  Share this folder

  New York

  My Pictures

  My Computer

  My Network Places

  My documents

  File folder

  Date modified: Oct.3rd 2010

  自定义面板(panel)的外观效果

  请注意,这个视图外观效果不是我们想要的,我们必须改变面板(panel)的头部背景图片和折叠/展开按钮的图标。

  做到这一点并不难,我们需要做的只是重新定义一些 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 定义用户界面非常简单。

  下载 jQuery EasyUI 实例

  jeasyui-layout-xp.zip