编程 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 相关文章推荐

js两行代码按指定格式输出日期时间

Oct 21 Javascript

js Form.elements[i]的使用实例

Nov 13 Javascript

深入理解Javascript作用域与变量提升

Dec 09 Javascript

JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)

Oct 17 Javascript

简述JavaScript提交表单的方式（Using JavaScript Submit Form）

Mar 18 Javascript

Javascript+CSS3实现进度条效果

Oct 28 Javascript

详解在 Angular 项目中添加 clean-blog 模板

Jul 04 Javascript

jQuery实现的粘性滚动导航栏效果实例【附源码下载】

Oct 19 jQuery

babel之配置文件.babelrc入门详解

Feb 22 Javascript

vue的滚动条插件实现代码

Sep 07 Javascript

在node环境下parse Smarty模板的使用示例代码

Nov 15 Javascript

微信小程序图片自适应实现解析

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

php防止SQL注入详解及防范

2013/11/12 PHP

PHP入门教程之会话控制技巧(cookie与session)

2016/09/11 PHP

thinkPHP框架实现多表查询的方法

2018/06/14 PHP

jQuery中创建实例与原型继承揭秘

2011/12/21 Javascript

根据邮箱的域名跳转到相应的登录页面的代码

2012/02/27 Javascript

jquery $(this).attr $(this).val方法使用介绍

2013/10/08 Javascript

jQuery 获取浏览器所在的IP地址的小例子

2013/11/08 Javascript

JS点击链接后慢慢展开隐藏着图片的方法

2015/02/17 Javascript

在Javascript中处理字符串之big()方法的使用

2015/06/08 Javascript

微信小程序 wx:key详细介绍

2016/10/28 Javascript

JavaScript制作弹出层效果

2016/12/02 Javascript

微信小程序联网请求的轮播图

2017/07/07 Javascript

实例分析js事件循环机制

2017/12/13 Javascript

在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法

2018/10/25 Javascript

node后端服务保活的实现

2019/11/10 Javascript

[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8

2014/06/25 DOTA

Python创建xml文件示例

2017/03/22 Python

Python实现的多线程同步与互斥锁功能示例

2017/11/30 Python

Python中实现switch功能实例解析

2018/01/11 Python

PyCharm安装第三方库如Requests的图文教程

2018/05/18 Python

Python通过for循环理解迭代器和生成器实例详解

2019/02/16 Python

python脚本当作Linux中的服务启动实现方法

2019/06/28 Python

使用python实现男神女神颜值打分系统(推荐)

2019/10/31 Python

python连接PostgreSQL过程解析

2020/02/09 Python

python时间与Unix时间戳相互转换方法详解

2020/02/13 Python

python3 循环读取excel文件并写入json操作

2020/07/14 Python

GOOD AMERICAN官网：为曲线性感而设计

2017/12/28 全球购物

Expedia丹麦：全球领先的旅游网站

2018/03/18 全球购物

雅诗兰黛加拿大官网：Estee Lauder加拿大

2019/07/31 全球购物

Currentbody西班牙：美容仪专家

2019/09/28 全球购物

大二学期个人自我评价

2014/01/13 职场文书

中考冲刺决心书

2014/03/11 职场文书

教师敬业奉献模范事迹材料

2014/05/18 职场文书

房屋过户委托书范本

2014/10/07 职场文书

2015秋季幼儿园开学通知

2015/07/16 职场文书

初级职称评定工作总结

2015/08/13 职场文书