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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
vue 实现微信浮标效果
Sep 01 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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/12/03 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
基于python socketserver框架全面解析
2017/09/21 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
SQL SERVER面试资料
2013/03/30 面试题
创业计划书六个要素
2013/12/26 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
学生检讨书范文
2014/10/30 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技