一个基于 EasyUI 的前台架构(1)页面布局
来源:互联网 发布:linux sqlplus退出 编辑:程序博客网 时间:2024/05/21 22:25
前段时间进了一个项目,接触了这个完全使用 jQuery EasyUI 架构前台的应用程序。以前对 EasyUI只是有所耳闻,接触这个项目才觉得它非常强大。
在开发中,遇到不少关于 EasyUI 的问题,也亲手改过许多与之相关的问题。对这个系统的架构有所了解以后,才觉得这个系统架构的有点乱七八糟,用的很不顺手,就想把这个系统重新架构一下(这或许是不同 Coder 之间编码习惯上的差别吧,不算鄙视),也同时对 EasyUI 进行深入的研究一下,学习一些先进的东西。
在开发应用系统的时候,系统整体布局是很重要的。EasyUI 提供的一种非常便捷的方法,来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分,代表页面的上、右、下、左、中间(主工作区)等区域。
搭建布局框架:
在使用的时候只需要将 <body> 元素使用相应的样式,并在 <body> 中添加几个 <div> ,并把 <div> 指定一个 region 属性,值分别是 north\east\south\west\center 等即可。
区域大小:
不过,需要注意的是,主工作区(center 区域)左右两侧的区域( east 和 west )必需指定一个宽度,否则……(你可以试试看),当然,高度它们会自动适应。
上下两侧的区域( north 和 south )则可以根据需要指定或自动高度,当然,宽度也是自适应的,一般不需要设置。
调整大小:
如果需要在运行的时候手动调整某个区域的大小,可以给 <div> 添加 split 属性,设置其值为 true 即可。如果不需要,可以设为 false 或不设。(注:center 区域不必设置该属性,如果需要调整 center 区域那个边的大小,可以在相应方向的侧边区域设置即可。)
区域标题:
如果要给某个区域添加标题,只需要为要添加标题的区域的 <div> 标签添加 title 属性即可。
Over。。。一些常用的效果都介绍完了,看一个简单的例子。废话不说,贴代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>EasyUI Demo</title><link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/><link rel="stylesheet" type="text/css" href="js/themes/icon.css"/><script type="text/javascript" src="js/jquery-1.6.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script></head><body class="easyui-layout"><div region="north" style="height:80px;"> <!-- 页面头部 --> <h1>***管理系统</h1></div><div region="west" split="true" style="width:220px" title="导航菜单"> 页面左侧</div><div region="center"> 页面主体内容区</div><div region="east" style="width:100px;"> 页面右侧</div><div region="south"> 页面底部 </div></body></html>
怎么样,页面结构非常简单,一句多余的代码都没写。运行,看效果,如图:
IE8 效果:
Chrome 效果:
从图中还可以看到鼠标拖动调整边栏区域的效果,非常简单。。
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 使用jquery easyui实现一个基本的页面布局
- Jqurey实现类似EasyUI的页面布局
- EASYUI SPringMVC增删改查的前台页面
- 1.页面布局-easyUi
- 基于easyui的页面等待提示层遮罩
- 基于SpringMVC +前台页面基于bootstrap 的 echats 柱形图
- 架构之路2-前台展示easyui
- 计算机视觉、机器学习相关领域论文和源代码大集合
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- Mahout源码MeanShiftCanopy聚类算法分析(1)
- Android 动态加载布局
- DP 背包问题 01背包
- 一个基于 EasyUI 的前台架构(1)页面布局
- 树莓派配置无线网络(补充) 【for_wind】
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- Android实战技巧:如何在ScrollView中嵌套ListView
- 每天一个OpenGL程序 第二篇 点的绘制
- C++多态性
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 黑马程序员---Dictionary<>字典,List<>泛型集合实例练习