编程 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第二章

Sep 30 Javascript

jQuery dialog 异步调用ashx,webservice数据的代码

Aug 03 Javascript

jquery蒙版控件实现代码

Dec 08 Javascript

得到jQuery detach()后节点中的某个值实现代码

Feb 05 Javascript

JS Replace 全部替换字符的用法小结

Dec 24 Javascript

js的OOP继承实现(必看篇)

Feb 18 Javascript

JS实现的简单四则运算计算器功能示例

Sep 27 Javascript

jQuery仿移动端支付宝键盘的实现代码

Aug 15 jQuery

layDate插件设置开始和结束时间

Nov 15 Javascript

示例vue 的keep-alive缓存功能的实现

Dec 13 Javascript

vue Tab切换以及缓存页面处理的几种方式

Nov 05 Javascript

element el-table表格的二次封装实现(附表格高度自适应)

Jan 19 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