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>

 
一直在想这是为什么?

相关文章

  • jqPlot 基于jquery的画图插件

    jqPlot 基于jquery的画图插件

    jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式。
    2011-04-04
  • jQuery实现的进度条效果

    jQuery实现的进度条效果

    本文主要给大家介绍的是jQuery实现的进度效果的实例代码,其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式)有需要的小伙伴可以参考下。
    2015-07-07
  • jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    cookie 是存储于访问者计算机中的变量。这篇文章主要介绍了jQuery利用cookie 实现本地收藏功能不重复无需多次命名,需要的朋友可以参考下
    2019-11-11
  • 基于jquery的图片轮播 tab切换组件

    基于jquery的图片轮播 tab切换组件

    最近在做手机上的web app,很多场景需要使用到类似tab切换和图片轮播的东西,需要支持手势和鼠标点击的,于是就基于jquery弄了一个,每一个参数有详细的说明
    2012-07-07
  • Jquery动态添加输入框的方法

    Jquery动态添加输入框的方法

    这篇文章主要介绍了Jquery动态添加输入框的方法,实例分析了jQuery中append方法添加页面元素的使用技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery自定义动画函数实例详解(附demo源码)

    jQuery自定义动画函数实例详解(附demo源码)

    这篇文章主要介绍了jQuery自定义动画函数实现方法,形式实例分析了jQuery通过插件结合数学运算实现滑块动画运动的效果,并附完整demo源码供读者下载,需要的朋友可以参考下
    2015-12-12
  • jackson解析json字符串,首字母大写会自动转为小写的方法

    jackson解析json字符串,首字母大写会自动转为小写的方法

    下面小编就为大家分享一篇jackson解析json字符串,首字母大写会自动转为小写的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • jQuery中$.ajax()和$.getJson()同步处理详解

    jQuery中$.ajax()和$.getJson()同步处理详解

    这篇文章主要介绍了jQuery中$.ajax()和$.getJson()同步处理详解的相关资料,非常的细致全面,有需要的小伙伴可以参考下。
    2015-08-08
  • jquery JSON的解析方式

    jquery JSON的解析方式

    第一次用JSON作为jquery异步请求的传输对象,结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了,也大致明白怎么个意思了,归根结底还是对jquery对相关json对象获取的理解有所偏差。
    2009-07-07
  • jQuery实现图片上传预览效果功能完整实例【测试可用】

    jQuery实现图片上传预览效果功能完整实例【测试可用】

    这篇文章主要介绍了jQuery实现图片上传预览效果功能,结合完整实例形式分析了jQuery处理图片上传预览相关事件响应、浏览器判断、图片及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-05-05

最新评论