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> & ...
随机推荐
- thinkphp 文件下载实例 实现以及注意事项
#下载 function download() { $id=$_GET['id']; $file_name ...
- JS操作性能优化
1. 适当使用变量 Maybe document.getElementById("myField").style.backgroundColor = "#CCC" ...
- 怎样在Swift中使用CocoaPods-b
最近关于CocoaPods有很多的议论.你可能从别的开发者那里听到过,或者在Github的目录中看到过.如果你之前从来没有用过,你可能会问,"CocoaPods到底是什么?" 它不 ...
- 点击Textbox 给日历控件赋值
1.前台代码: <asp:TextBox ID="TextBox1" runat="server" onfocus="return show() ...
- java线程同步问题
Java面试当中,线程可以说是必考内容,在看面试题的时候发现一遍很全的讲解Java面试题的博客:http://blog.csdn.net/csh624366188/article/details/80 ...
- lua学习笔记之-语言基础
一.基本知识 1.第一个程序: print("hello lua"); 在交互模式下直接运行: > print("hello lua") hello lu ...
- HDU 献给杭电五十周年校庆的礼物 1290 递推
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1290 题目大意: n刀最多可以把一块蛋糕切多少块 题目分析: 假如我们按照立体考虑的话,这题就非常不 ...
- cf701B Cells Not Under Attack
Vasya has the square chessboard of size n × n and m rooks. Initially the chessboard is empty. Vasya ...
- HDOJ 1010
深度搜索,注意要剪枝 1.奇偶剪枝 可以把map看成这样: 0 1 0 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 从为 0 的格子走一 ...
- Extjs 4.2.0 MVC 架构
内容: 1. 文件结构 2. 创建项目 3. 定义控制器 4. 定义视图 5. 控制Grid 6. 创建Model和Store 7. 通过Model保存数据 8. 保存到服务器端 大型客户端程序通常都 ...