jQuery EasyUI，Layout(布局)组件

学习要点：

　　1.加载方式

　　2.布局属性

　　3.区域面板属性

　　4.方法列表

本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法，这个组件依赖于 Panel（面 板）组件和 resizable(调整大小)组件。

一．加载方式

class 加载方式，这个属性一般使用class方法使用

<body id="box" class="easyui-layout">

    <div data-options="region:'north',title:'头部标题',split:true" style="height:100px;"></div>

    <div data-options="region:'south',title:'底部标题',split:true" style="height:100px;"></div>

    <div data-options="region:'east',title:'右边标题',split:true" style="width:100px;"></div>

    <div data-options="region:'west',title:'左边标题',split:true" style="width:100px;"></div>

    <div data-options="region:'center',title:'中间标题'" style="padding:5px;background:#eee;"></div>

</body>

layout()将一个符合要求的元素执行布局方法

$(function () {

    $('#box').layout({

        //......

    });

});

二．布局属性

fit   boolean如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

$(function () {

    $('#box').layout({

        fit:true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

});

三．区域面板属性

一般写在html属性data-options里

区域面板属性定义与 panel 组件类型，下面是公共和新增的属性：

title string 布局面板标题文本。默认值 null。

    <div data-options="

        region:'north',

        title:'头部标题',

        split:true"

        style="height:100px;">

    </div>

region string 定义布局面板位置，可用的值有：north(上),south(下), east(右), west(左), center(中间)。默认值空。

    <div data-options="

        region:'north',

        title:'头部标题',

        split:true"

        style="height:100px;">

    </div>

border boolean 为 true 时显示布局面板边框。默认值 true。

    <div data-options="

        region:'north',

        title:'头部标题',

        border:false,

        "style="height:100px;">

    </div>

split boolean 为 true 时用户可以通过分割栏改变面板大小。默认值 false。

    <div data-options="

        region:'north',

        title:'头部标题',

        split:true,

        "style="height:100px;">

    </div>

iconCls string 一个包含图标的 CSS 类 ID，该图标将会显示到面板标题上。默认值 null。

    <div data-options="

        region:'north',

        title:'头部标题',

        iconCls:'icon-remove',

        "style="height:100px;">

    </div>

href string 用于读取远程站点数据的 URL 链接。默认值null。加载数据

    <div data-options="

        region:'north',

        title:'头部标题',

        href:'is_user.php',

        "style="height:100px;">

    </div>

collapsible boolean 定义是否显示折叠按钮。默认值 true。

    <div data-options="

        region:'north',

        title:'头部标题',

        collapsible:false,

        "style="height:100px;">

    </div>

minWidth number 最小面板宽度。默认值10。

    <div data-options="

        region:'north',

        title:'头部标题',

        minWidth:200,

        "style="height:100px;">

    </div>

minHeight number 最小面板高度。默认值10。

    <div data-options="

        region:'north',

        title:'头部标题',

        minHeight:200,

        "style="height:100px;">

    </div>

maxWidth number 最大面板宽度。默认值10000。

    <div data-options="

        region:'north',

        title:'头部标题',

        maxWidth:200,

        "style="height:100px;">

    </div>

maxHeight number 最大面板高度。默认值10000。

    <div data-options="

        region:'north',

        title:'头部标题',

        maxHeight:200,

        "style="height:100px;">

    </div>

最终格式

<body id="box" >

    <div data-options="

        region:'north',

        title:'头部标题',

        maxHeight:200,

        split:true,

        "style="height:100px;">

    </div>

    <div data-options="region:'south',title:'底部标题',split:true" style="height:100px;"></div>

    <div data-options="region:'east',title:'右边标题',split:true" style="width:100px;"></div>

    <div data-options="region:'west',title:'左边标题',split:true" style="width:100px;"></div>

    <div data-options="region:'center',title:'中间标题'" style="padding:5px;background:#eee;"></div>

</body>

四．方法列表，以下在js里使用

resize   none 设置布局大小。就是如果布局出现变形，可以用这个方法重置大小和布局

$(function () {

    $('#box').layout({

        fit:true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    $('#box').layout('resize'); //就是如果布局出现变形，可以用这个方法重置大小和布局

});

panel   region 返 回 指 定 面 板 ， 'region' 参 数 可 用 值 有 ：'north(上),south(下), east(右), west(左),'center(中间)'。

$(function () {

    $('#box').layout({

        fit:true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    alert($('#box').layout('panel','east')); //返 回 指 定 面 板

});

collapse   region 折 叠 指 定 面 板 。 'region' 参 数 可 用 值 有 ：north(上),south(下), east(右), west(左)

$(function () {

    $('#box').layout({

        fit:true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    $('#box').layout('collapse','east'); //折 叠 指 定 面 板

});

expand   region 展 开 指 定 面 板 。 'region' 参 数 可 用 值 有 ：north(上),south(下), east(右), west(左)

$(function () {

    $('#box').layout({

        fit:true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    $('#box').layout('collapse','east'); //折 叠 指 定 面 板

    $('#box').layout('expand','east'); //展 开 指 定 面 板

});

add   options 添加指定面板。属性参数是一个配置对象，更多细节请查看选项卡面板属性。

$(function () {

    $('#box').layout({

        fit: true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    $('#box').layout('remove', 'east');  //移 除 指 定 面 板

    $('#box').layout('add', {

        title: '111',     //标题

        region: 'east',   //添加右边

        maxWidth:200      //最宽200

    });

});

remove   region 移 除 指 定 面 板 。 'region' 参 数 可 用 值 有 ：north(上),south(下), east(右), west(左)

$(function () {

    $('#box').layout({

        fit: true    //如果设置为 true，布局组件将自适应父容易。当使用 body 标签创建布局的时候，整个页面会自动最大。默认为 false。

    });

    $('#box').layout('remove','east');  //移 除 指 定 面 板

});

$.fn.layout.defaults 重写默认值对象。参照前面的章节

第二百零二节，jQuery EasyUI，Layout(布局)组件的更多相关文章

  1. 第二百零三节，jQuery EasyUI，Window(窗口)组件

    jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...

  2. 第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件

    jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...

  3. 第四百零二节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署，uwsgi安装和启动，nginx的安装与启动，uwsgi与nginx的配置文件+虚拟主机配置

    第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置 软件版本  uwsgi- ...

  4. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  5. 第二百零九节，jQuery EasyUI，Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  6. 第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件

    jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...

  7. 第二百零六节，jQuery EasyUI，Menu(菜单)组件

    jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...

  8. 第二百零五节，jQuery EasyUI，Messager(消息窗口)组件

    jQuery EasyUI,Messager(消息窗口)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 Messager(消息窗口)组件的使用方法,这个组 ...

  9. 第二百零四节，jQuery EasyUI，Dialog(对话框)组件

    jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...

随机推荐

  1. 验收测试 - WebDriver 5

    验收测试 - WebDriver - 配置 什么是WebDriver 这样说好了,它翻译起来就是Web驱动,用我的经验来说,它就是驱动浏览器运行的一个驱动器 有什么作用? 就像一个司机可以驱动一台汽车 ...

  2. Kubernetes用户指南（二）--部署组合型的应用、连接应用到网络中

    一.部署组合型的应用 1.使用配置文件启动replicas集合 k8s通过Replication Controller来创建和管理各个不同的重复容器集合(实际上是重复的pods). Replicati ...

  3. jQuery UI加入效果

    1.设计源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. 对象内部属性[[Class]]

    1.概述 所有的typeof返回值为‘object’的对象都包含一个内部属性[[Class]],我们将它可以看做内部的分类,而非传统面向对象意义的分类.这个属性无法直接访问,一般通过Object.pr ...

  5. 关于部分Android手机安装apk，无法获取正常的logo

    最近出现过类似的问题,主要出现是在,MediaPad X1 7.0和MediaPad M1 8.0. 发布应用的时候明明配置好了图标的,但是始终找不到原因,郁闷了好几个小时,也浪费了好几个小时. 如果 ...

  6. C++第4次实验（基础班）—循环结构程序设计

    此次上机中的4个题目项目6.项目7(选1)必做.其他2两题可从剩下的项目中选,也可从项目7中选. [项目1:利用循环求和]求1000以内全部偶数的和(答案:250500) 要求:请编出3个程序来,分别 ...

  7. 【DB2】经典SQL写法

    1.环境准备 CREATE TABLE DataInfo( ID_1 ), ID_2 ) ) INSERT INTO DataInfo VALUES('A','Oracle'); INSERT INT ...

  8. loadrunner两个函数：取参数长度和时间戳函数

    出自中国IT实验室2014-05-23 00:01 1.web_save_param_length 函数 函数原型:int web_save_param_length( const char *Par ...

  9. Spring集成Jersey开发(附demo)

    下文将会初步介绍如何在Spring中集成Jersey,并附简单的demo 所依赖的技术版本: Jersey 1.8 Spring 3.0.5.RELEASE 1. 项目依赖 pom.xml定义(注意去 ...

  10. iOS开发－为我们的项目添加头文件prefix header

    在XCode6新建项目时,不再自动创建头文件,因此我们需要手动添加. 点击我们的项目->Build Settings -> all -> 搜索“prefix” -> 修改pre ...