jQuery EasyUI 布局 - 创建 XP 风格左侧面板
来源:互联网 发布:巨人网络股价 编辑:程序博客网 时间:2024/05/15 01:34
通常情况下,在 Windows XP 的资源管理器文件夹中,左侧的面板(panel)包含一些常见任务。 本教程向您展示如何通过 easyui 的面板(panel)插件来创建 XP 左侧面板。
定义一些面板(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;}
0 0
- jQuery EasyUI 布局 - 创建 XP 风格左侧面板
- 使用easyUI创建XP风格左侧面板
- jQuery EasyUI使用教程之创建XP风格的左侧面板
- Jquery EasyUI 面板内布局(6)
- jQuery EasyUI使用教程之在面板中创建复杂布局
- EasyUI 布局面板
- jPanelMenu – 创建面板风格菜单的 jQuery 插件
- jQuery EasyUI使用教程之创建可折叠面板
- jquery-easyui中创建复杂布局
- jquery-easyui中创建BorderLayout布局
- jquery-easyui中创建复杂布局
- jquery-easyui中创建BorderLayout布局
- jquery-easyui中创建BorderLayout布局
- 使用easyUI创建折叠面板
- easyui动态创建tab面板
- EasyUI左侧tree,右侧tab布局
- jquery-easyui中创建复杂的布局效果
- jquery easyui 布局
- 表现层、持久层、业务层
- Destructors That Throw and Why They're Evil
- qemu for windows
- 2013年个人微博推荐技术资料汇总-何登成
- 当与索尼爱立信Xperia雷相比,三星Galaxy S2的证明了高级模式
- jQuery EasyUI 布局 - 创建 XP 风格左侧面板
- C#中的深复制和浅复制
- 弹出的ASP的Javascript
- 工作作为一个SAP CRM顾问
- 工程结算与Timelogs在Microsoft CRM亮点
- 实现listview下拉刷新功能
- 对照黑莓开发者成功的关键因素
- BS将form中的控件这只成只能编辑和jquery绑定事件并传递参数
- JAVA基础编程(对象的创建与销毁)