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>

显示:
jqeury-easyui-layout问题解决方法 
解决:把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 职场文书