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

　　本文转载自：w3cschool(编辑：雷林鹏 来源：网络 侵删)