JQueryEasyUI Layout布局框架的使用


Posted in Javascript onApril 08, 2013

layout就是一个布局面板:

也就是布局的容器,有五个布局区域:北部,南部,东部,西部和中心。其中中心区域面板是必需的,但中心区域面板边缘区域面板是可选的。通过拖动它的边框,面板,可以调整每一个边缘地区。可以嵌套的布局,以便用户可以建立复杂的布局。

 如果想要各个区域中的框架随框架的大小改变,请嵌套到layout框架中;

<script type="text/javascript">
        //split属性:如果设置为true将显示一个分隔条,用户可以拖动分隔条来改变布局面板的尺寸。
        //href属性:在指定区域内加载页面的body中的部分,其他不加载
        //在panel框架中我们可以看到这样一个正则选择(可根据自己需求进行更改):
        //        extractor: function (data) {
        //            var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
        //            var matches = pattern.exec(data);
        //            if (matches) {
        //                return matches[1]; // only extract body content
        //            } else {
        //                return data;
        //            }
        //        }
        //panel属性:返回特定的布局面板,'region'参数的可取值为:'north','south','east','west','center'。
        function getPanel() {
            var southPanel = $("#layoutbody").layout('panel', 'south');
            //获得panel的属性 
            var attributes = southPanel.panel('options');
            console.info(attributes); //可以看到其中的各个属性,浏览器调试,这里说明下:使用这种框架和使用js自己书写前台代码,浏览器调试是必不可少的:火狐或者谷歌
        }
    </script>
</head>
<body id="layoutbody" class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
    </div>
    <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
        <input type="button" value="获取panel" onclick="getPanel();" />
    </div>
    <div data-options="region:'center',title:'center title'" href="Index.htm" style="padding: 5px;
        background: #eee;">
        <input type="button" value="获取panel" onclick="getPanel();" /><!--如果这里指定了href属性,那么我们自己在这个部分写的代码将不会被现实-->
    </div>
</body>
</html>
Javascript 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
JS出现失效的情况总结
Jan 20 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 #Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 #Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 #Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 #Javascript
基于datagrid框架的查询
Apr 08 #Javascript
datagrid框架的删除添加与修改
Apr 08 #Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
详解python中@的用法
2019/03/27 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
软件工程师岗位职责
2013/11/16 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
倡议书范文
2014/04/16 职场文书
优秀员工演讲稿
2014/05/19 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Python之matplotlib绘制饼图
2022/04/13 Python