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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
Smarty模板快速入门
2007/01/04 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php格式化日期实例分析
2014/11/12 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
如何在Python中编写并发程序
2016/02/27 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
打架检讨书100字
2014/01/08 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
pandas中对文本类型数据的处理小结
2021/11/01 Python