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下弹出窗口的变通
Apr 18 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
javascript 写类方式之三
Jul 05 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 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实现的mysql读写分离操作示例
2018/05/22 PHP
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue实现日历小插件
2019/06/26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
python optparse模块使用实例
2015/04/09 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
举例讲解Python装饰器
2020/12/24 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
初中语文教学反思
2014/02/02 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
报关专员求职信范文
2014/02/22 职场文书
监察建议书范文
2014/03/12 职场文书
大一新生学期自我评价
2014/04/09 职场文书
党员创先争优活动总结
2014/05/04 职场文书
电气自动化求职信
2014/06/24 职场文书
会计岗位说明书
2014/07/29 职场文书
预备党员转正意见
2015/06/01 职场文书