jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一、jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
1、首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同)
2、实现整个页面的布局( layout: north,south,west,east, center)
3、首先整个页面布局适应屏幕的分辨率大小
4、然后内容区域进行布局,也要适应屏幕分辨率大小
5、部分代码:
<body>
<div class="easyui-layout" fit="true">
<div data-options="region:'north'" style="height: 50px">
<h3>
标题位置</h3>
</div>
<div data-options="region:'south',split:true" style="height: 50px;">
<h3>
底部位置</h3>
</div>
<div data-options="region:'east',split:true" title="East" style="width: 200px;">
<h3>
填充内容</h3>
</div>
<div data-options="region:'west',split:true" title="West" style="width: 200px;">
<h3>
导航菜单位置</h3>
</div>
<div data-options="region:'center'">
<%--注意:必须设置 属性 fit="true"--%>
<div id="tabs" class="easyui-tabs" fit="true">
<div id="home" title="欢迎使用" style="padding: 3px; overflow: hidden;">
<%-- 中间内容布局适应屏幕分辨率大小 注意设置属性 fit="true"--%>
<div class="easyui-layout" fit="true">
<%--如果左右布局必须设置一个的宽度 width--%>
<div id="p" data-options="region:'west',title:'左侧位置',collapsible:false" style="width: 25%;
padding: 0px;">
<%-- 如果里面的内容也要适应屏幕分辨率大小 需设置 width="100%" height="100%"--%>
<div id="departList">
<h4>
填充内容</h4>
</div>
</div>
<div data-options="region:'center',title:'右侧位置'">
<div id="departAddr">
<h4>
填充内容</h4>
</div>
</div>
</div>
</div>
<div title="Test" style="padding: 10px">
This is the Test work.
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding: 10px">
This is the help content.
</div>
</div>
</div>
</div>
</body>
6、运行效果如下:
jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)的更多相关文章
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
随机推荐
- Nginx源码研究七:nginx的location指令分析
在nginx的配置文件nginx.conf中,我们在配置server的时候,会配置一下location指令,这个location指令是提供给用户来配置对于符合指令的http请求,采用该指令内部的处理方 ...
- 模拟DOMContentLoaded事件
window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...
- HDU1465 第六周L题(错排组合数)
L - 计数,排列 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descrip ...
- SQL数据库增删改查
数据类型 运行cmd 输入net start MSSQLserver 启动数据库服务 输入net stop MSSQLserver 关闭数据库服务 输入net pause MSSQLserve ...
- Git之路——Git的使用
centos6.6安装git2.4 第一安装编译环境: yum -y install zlib-devel openssl-devel perl cpio expat-devel gettext-de ...
- PHP之路——Apache启动失败查看日志
windows下用运行 eventvwr--->windows日志--->应用程序日志-->软件
- 通过示波器分析TypeB卡通讯数据
这几天,使用NFC芯片模拟了一张TypeB的cpu卡,在调试过程中,因为要检查射频性能,所以用示波器抓取了RFID读卡器和TypeB CPU卡之间的通讯数据.READER发送的数据位106K ASK调 ...
- ajax使用jsonp解决跨域问题
发现这几篇博客写的不错,转载过来看: js跨域及解决方案 http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html 如何解决aj ...
- Posix-linux_route
route命令显示或者修改本地IP路由表. 语法: [plain] route [-CFvnee] route [-v] [-A family] add [-net|-host] ...
- 图片左右循环连续滚动代码,解决marquee的留白问题
<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION=" ...