编程 Javascript

jqeury-easyui-layout问题解决方法

Posted in Javascript onMarch 24, 2014

今天在用easyui做布局时，碰到了一个疑惑的问题。

问题：当把class=“easyui-layout”写在一个独立的div中时，layout的样式无法显示，也不报错。

例如：

<span style="font-size:14px;"><body > 
<div 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;"> 
</div> 
<div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;"> 
</div> 
</div> 
</body></span>

显示：

解决：把class=“easyui-layout”写在body中时，问题就迎刃而解了。且region属性不能被其他无关的div所包含。

代码：

<span style="font-size:14px;"><body 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;"> 
</div> 
<div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;"> 
</div> 
</body></span>

一直在想这是为什么？

jqeury-easyui-layout问题解决方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 组件之旅（一）分析和设计

Oct 28 Javascript

JQuery最佳实践之精妙的自定义事件

Aug 11 Javascript

jquery 插件学习（三）

Aug 06 Javascript

jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

Apr 26 Javascript

解析jquery获取父窗口的元素

Jun 26 Javascript

js 调用百度地图api并在地图上进行打点添加标注

May 13 Javascript

javascript日期操作详解(脚本之家整理)

Sep 05 Javascript

在AngularJS框架中处理数据建模的方式解析

Mar 05 Javascript

JavaScript隐式类型转换

Mar 15 Javascript

[原创]JQuery 在表单提交之前修改提交的值

Apr 14 Javascript

Node.js+Express配置入门教程详解

May 19 Javascript

基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

Nov 17 Javascript

让table变成exls的示例代码

Mar 24 #Javascript

JQuery 图片滚动轮播示例代码

Mar 24 #Javascript

JS中判断null、undefined与NaN的方法

Mar 24 #Javascript

jquery高级编程的最佳实践详解

Mar 23 #Javascript

js 判断浏览器使用的语言示例代码

Mar 22 #Javascript

jquery easyui 对于开始时间小于结束时间的判断示例

Mar 22 #Javascript

js过滤特殊字符输入适合输入、粘贴、拖拽多种情况

Mar 22 #Javascript

You might like

图形数字验证代码

2006/10/09 PHP

php生成WAP页面

2006/10/09 PHP

使用php get_headers 判断URL是否有效的解决办法

2013/04/27 PHP

PHP中子类重载父类的方法【parent::方法名】

2016/05/06 PHP

再次分享18个非常棒的jQuery表格插件

2011/04/10 Javascript

js创建表单元素并使用submit进行提交

2014/08/14 Javascript

javascript的replace方法结合正则使用实例总结

2016/06/16 Javascript

Bootstrap零基础入门教程(三)

2016/07/18 Javascript

深入浅析search 搜索框的写法

2016/08/02 Javascript

简单谈谈JS数组中的indexOf方法

2016/10/13 Javascript

JS中append字符串包含onclick无效传递参数失败的解决方案

2016/12/26 Javascript

js中作用域的实例解析

2017/03/16 Javascript

vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

2017/11/27 Javascript

angular json对象push到数组中的方法

2018/02/27 Javascript

微信小程序 MinUI组件库系列之badge徽章组件示例

2018/08/20 Javascript

JavaScript封装的常用工具类库bee.js用法详解【经典类库】

2018/09/03 Javascript

Vue.js实现表格渲染的方法

2018/09/07 Javascript

微信二次分享报错invalid signature问题及解决方法

2019/04/01 Javascript

Vue项目中如何使用Axios封装http请求详解

2019/10/23 Javascript

js实现点击生成随机div

2020/01/16 Javascript

Python的Flask框架中@app.route的用法教程

2015/03/31 Python

python3.5 tkinter实现页面跳转

2018/01/30 Python

python3中的md5加密实例

2018/05/29 Python

详解Python 装饰器执行顺序迷思

2018/08/08 Python

python selenium 执行完毕关闭chromedriver进程示例

2019/11/15 Python

利用Python如何画一颗心、小人发射爱心

2021/02/21 Python

CSS 3.0文字悬停跳动特效代码

2020/10/26 HTML / CSS

一波HTML5 Canvas基础绘图实例代码集合

2016/02/28 HTML / CSS

加拿大著名时装品牌：SOIA & KYO

2016/08/23 全球购物

有趣的睡衣和礼物：LazyOne

2019/11/27 全球购物

中软国际Java程序员机试题

2012/08/19 面试题

莫言诺贝尔获奖演讲稿

2014/05/21 职场文书

2014镇党委班子对照检查材料思想汇报

2014/09/23 职场文书

Mysql中 unique列插入重复值该怎么解决呢

2021/05/26 MySQL

JavaScript小技巧带你提升你的代码技能

2021/09/15 Javascript

Mysql排查分析慢sql之explain实战案例

2022/04/19 MySQL