jqeury-easyui-layout问题解决方法

更新时间：2014年03月24日 15:43:12 作者：

jqeury-easyui-layout问题：当把class=“easyui-layout”写在一个独立的div中时，layout的样式无法显示，具体示例如下

今天在用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> 

一直在想这是为什么？

您可能感兴趣的文章:

jquery点击实现升序降序图标切换
这篇文章主要为大家详细介绍了jquery点击实现升序降序图标切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQuery实现的省市县三级联动菜单效果完整实例
这篇文章主要介绍了jQuery实现的省市县三级联动菜单效果,结合完整实例形式分析了jQuery数组操作及事件响应的相关技巧,非常具有实用价值,需要的朋友可以参考下
2016-08-08
html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据，这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情
2013-08-08
利用JQuery阻止事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧
2016-12-12
基于jquery插件实现拖拽删除图片功能
这篇文章主要介绍了基于jquery插件实现拖拽删除图片功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
jquery submit ie6下失效的原因分析及解决方法
jquery submit ie6下失效的原因分析及解决方法。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
jQuery AJAX timeout 超时问题详解
这篇文章主要介绍了jQuery AJAX timeout 超时问题详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
jquery实现全选功能
这篇文章主要为大家详细介绍了jquery实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQuery应用之jQuery链用法实例
这篇文章主要介绍了jQuery应用之jQuery链用法,实例形式分析了jQuery链的原理及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
基于Jquery的跨域传输数据(JSONP)
基于Jquery的跨域传输数据(JSONP) ，需要的朋友可以参考下。
2011-03-03