jQuery EasyUI 布局 - 创建 XP 风格左侧面板
2014-08-21 09:20
232 查看
通常情况下,在 Windows XP 的资源管理器文件夹中,左侧的面板(panel)包含一些常见任务。 本教程向您展示如何通过 easyui 的面板(panel)插件来创建 XP 左侧面板。
我们定义一些面板(panel),这些面板(panel)用来显示一些任务。每个面板(panel)应该至少有折叠/展开工具按钮。
代码如下所示:
请注意,这个视图外观效果不是我们想要的,我们必须改变面板(panel)的头部背景图片和折叠/展开按钮的图标。
做到这一点并不难,我们需要做的只是重新定义一些 CSS。
定义一些面板(panel)
我们定义一些面板(panel),这些面板(panel)用来显示一些任务。每个面板(panel)应该至少有折叠/展开工具按钮。代码如下所示:
<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)的头部背景图片和折叠/展开按钮的图标。做到这一点并不难,我们需要做的只是重新定义一些 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; }
相关文章推荐
- jQuery EasyUI使用教程之创建XP风格的左侧面板
- 使用easyUI创建XP风格左侧面板
- 使用easyUI创建XP风格左侧面板
- jQuery EasyUI使用教程之在面板中创建复杂布局
- jPanelMenu – 创建面板风格菜单的 jQuery 插件
- jQuery EasyUI使用教程之创建可折叠面板
- 创建应用程序: 第二部分:继承、面板以及布局导论
- jPanelMenu – 创建面板风格菜单的 jQuery 插件
- 让在vc6创建的程序中,控件可以随xp风格的改变而变化,不用再程序中添加代码来自己实现~
- Jquery EasyUI 面板内布局(6)
- jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
- jQuery EasyUI 布局 - 为网页创建边框布局
- jQuery EasyUI使用教程之创建Web页面的边框布局
- jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
- jquery easyui使用(一)······可折叠面板的布局,手风琴
- XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子
- 在.NET程序的窗体中使用XP风格的控件
- XP 风格的可拖动列、排序的DataGrid的例子
- VC学习资料收集(4):设计XP风格的按钮
- asp+xml+js所作的文件管理器,完全仿xp风格,精彩下载不要错过。