一、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)的更多相关文章

  1. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  3. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  4. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  5. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  6. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  7. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  9. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. sql 语句左连接右连接小例子

    A表(a1,b1,c1) B表(a2,b2) a1 b1 c1 a2 b2 01 数学 95 01 张三 02 语文 90 02 李四 03 英语 80 04 王五 select A.*,B.* fr ...

  2. python3可变与不可变数据类型

    Python3中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Dictionary(字典) Tuple(元组) Set(集合) 我理解的可变就是当一个变量创建 ...

  3. 文成小盆友python-num7 -常用模块补充 ，python 牛逼的面相对象

    本篇内容: 常用模块的补充 python面相对象 一.常用模块补充 1.configparser模块 configparser 用于处理特定格式的文件,起内部是调用open()来实现的,他的使用场景是 ...

  4. STM32学习笔记——新建工程模板步骤（向原子哥学习）

    1.  在创建工程之前,先在电脑的某个目录下面建立一个文件夹,我们先把它命名为Template,后面建立的工程可以放在这个文件夹下.在 Template 工程目录下面,新建 3 个文件夹USER , ...

  5. bzoj4171 or 省队集训day3 chess: Rhl的游戏

    [题目描述] RHL最近迷上一个小游戏:Flip it.游戏的规则很简单,在一个N*M的格子上,有一些格子是黑色,有一些是白色.每选择一个格子按一次,格子以及周围边相邻的格子都会翻转颜色(边相邻指至少 ...

  6. springmvc 参数绑定

    1. httpservletrequest request request.getParameter("a")方法去取参数 用注解@RequestParam绑定请求参数 用注解@R ...

  7. Java中RMI框架

    嘎嘎,有空写……先记着了

  8. C51与汇编语言混合编程

    函数内部混合编程 若想在C语言函数内部使用汇编语言,应使用以下Cx51编译器控制命令: #pragma asm ; Assembly code #pragma endasm  功能作用:asm和end ...

  9. android 多线程断点续传下载

    今天跟大家一起分享下Android开发中比较难的一个环节,可能很多人看到这个标题就会感觉头很大,的确如果没有良好的编码能力和逻辑思维,这块是很难搞明白的,前面2次总结中已经为大家分享过有关技术的一些基 ...

  10. POJ1789 Truck History(prim)

    题目链接. 分析: 最大的敌人果然不是别人,就是她(英语). 每种代表车型的串,他们的distance就是串中不同字符的个数,要求算出所有串的distance's 最小 sum. AC代码如下: #i ...