第二百零二节，jQuery EasyUI，Layout(布局)组件

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(布局)组件相关推荐

第一百零二节，JavaScript函数
JavaScript函数学习要点: 1.函数声明 2.return返回值 3.arguments对象函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值 ...
单调有界定理适用于函数吗_第二百零二夜：导数与三角函数
为嘛不写导数与三角函数? 这是哪里话? 尽管不多,但我们的确是写了的,比如2019年全国1卷理科的第20题,再比如--,你自己去翻. 导数与三角函数是眼下时新的玩意儿,并非刻意回避,需要缘分,可遇而不 ...
第三百零九节，Django框架,models.py模块，数据库操作——F和Q()运算符：|或者、并且——queryset对象序列化...
第三百零九节,Django框架,models.py模块,数据库操作--F()和Q()运算符:|或者.&并且 F()可以将数据库里的数字类型的数据,转换为可以数字类型首先要导入 from dj ...
美学心得（第二百零一集）　　罗国正
美学心得(第二百零一集) 罗国正 (2019年8月) 2695.以感悟的状态去接触事物,就会增长很多真知.用做公益的心情去跟人打交道,会广结善缘.习惯用审美的态度去观察一切,人生会收到很多美感.人若坚 ...
孙三奇计算机科学,墓徒暗战-第二百零八章惨烈的变故
该楼层疑似违规已被系统折叠隐藏此楼查看此楼第二百零八章<惨烈的变故> 彭小苡一眼就看见了这个表面晶光闪闪的东西,她一下子就变得惊奇起来西留,兴奋的说道:"你在那里找到了这个地 ...
Asp.net WebForm中应用Jquery EasyUI Layout
Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例,编写layout代码: <body class="easyui-layout ...
达芬奇密码第一百零二章第一百零三章
达芬奇密码第一百零二章第一百零三章[@more@] 第一百零二章塞拉斯一瘸一拐地走进一个看不见的寂静空间里.这时薄雾已经在肯辛顿花园中弥漫开来.他跪在湿漉漉的草地上,感到有股热血正从他肋骨以下的 ...
JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
初识二维码第二十讲二维码解码程序的组件之一摄像头拍照功能
初识二维码第二十讲二维码解码程序的组件之一摄像头拍照功能解码程序的第一个环节是通过摄像头这个硬件,得到二维码的图片. 对摄像头的工作原理来说,简单的描述如下:1是从摄像头得到模拟信号, ...
第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

第二百零二节，jQuery EasyUI，Layout(布局)组件

第二百零二节，jQuery EasyUI，Layout(布局)组件相关推荐

最新文章

热门文章