jqeury-easyui-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>

 
一直在想这是为什么？

赞 (0)

相关推荐

  • Android开发笔记 TableLayout常用的属性介绍

    Android开发笔记 TableLayout常用的属性介绍

    TableLayout经常用到的属性有: android:collapseColumns:以第0行为序,隐藏指定的列: android:collapseColumns该属性为空时,效果如下图: 把android:collapseColumns=0,2-------------->意思是把第0和第2列去掉,如下图: android:shrinkColumns:以第0行为序,自动延伸指定的列填充可用部分: 当LayoutRow里面的控件还没有布满布局时,shrinkColumns不起作用,如下图:

  • android layout 按比例布局的代码

    为了创建比例大小的子View,可以将LinearLayout的宽度和高度设为fill_parent, 而将子View的宽度或是高度设为0,然后为子View设置不同权重(weight) ,这样子View的大小就会权值成比例. 本例使用横向LinearLayout,LinearLayout的android:layout_width="match_parent",表示将使用整个屏幕宽度. 对于LinearLayout的几个子View,将它们的宽度都定义为0,android:layout_wi

  • CoordinatorLayout的使用如此简单（Android）

    CoordinatorLayout的使用如此简单（Android）

    曾在网上找了一些关于CoordinatorLayout的教程,大部分文章都是把CoordinatorLayout.AppbarLayout.CollapsingToolbarLayout 以及Toolbar等一起使用来介绍,这让我不知不觉在心中认为把这几个布局要一起使用,而且只是用于那种场景中.其实CoordinatorLayout的功能并不是局限于与AppBarLayout一起使用,它的功能强大着呢,本文主要对CoordinatorLayout的使用进行介绍,后面再写一篇文章将AppBarLa

  • Android中的android:layout_weight使用详解

    Android中的android:layout_weight使用详解

    在使用LinearLayout的时候,子控件可以设置layout_weight.layout_weight的作用是设置子空间在LinearLayout的重要度(控件的大小比重).layout_weight的值越低,则控件越重要.若不设置layout_weight则默认比重为0. 如果在一个LinearLayout里面放置两个Button,Button1和Button2,Button1的layout_weight设置为1,Button2的layout_weight设置为2,且两个Button的la

  • android LinearLayout和RelativeLayout组合实现精确布局方法介绍

    android LinearLayout和RelativeLayout组合实现精确布局方法介绍

    先明确几个概念的区别: padding margin都是边距的含义,关键问题得明白是什么相对什么的边距． padding是控件的内容相对控件的边缘的边距． margin是控件边缘相对父空间的边距．  android:gravity 属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置．该属性就干了这个． android:layout_gravity是用来设置该view中的子view相对于父view的位置．比如一个button

  • jQuery布局插件UI Layout简介及使用方法

    jQuery布局插件UI Layout简介及使用方法

    UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使用ExtJS的项目改造成jQuery项目.其核心是一个大小自适应的中心面板(必选),面板的上下左右四个方向可以放置可折叠.可缩放的面板(可选),各个面板可以添加任意数量的页眉和页脚面板.UI Layout支持内层布局的嵌套,任意块元素都可以当作布局的容器,最基本的布局容器是body. 基本使用方法:

  • Android布局——Preference自定义layout的方法

    导语:PreferenceActivity是一个方便设置管理的界面,但是对于界面显示来说比较单调,所以自定义布局就很有必要了.本文举例说明在Preference中自定义layout的方法.笔者是为了在设置中插入@有米v4广告条才研究了一晚上的. 正文:首先PreferenceScreen是一个xml文件于res/xml目录下,不属于layout文件.要插入layout,有两种方法. 1.使用Preference的android:@layout属性 1)xml文件中preference的添加 复制

  • jQuery EasyUI 中文API Layout(Tabs)

    jQuery EasyUI 中文API Layout(Tabs)

    Tabs[标签] 创建一个tab标签 使用说明 使用到的头文件:easyui.css.icon.css.jquery-1.4.2.min.js.jquery.easyui.min.js html 复制代码 代码如下: <div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;&qu

  • SWT(JFace)体验之GridLayout布局

    SWT(JFace)体验之GridLayout布局

    GridLayout布局 GridLayout 布局的功能非常强大,也是笔者常用的一种布局方式.GridLayout是网格式布局,它把父组件分成一个表格,默认情况下每个子组件占据一个单元格的空间,每个子组件按添加到父组件的顺序排列在表格中.GridLayout提供了很多的属性,可以灵活设置网格的信息.另外,GridLayout 布局提供了GridData类,子组件可以设置相应的GridData,例如 "dogPhoto.setLayoutData(gridData)",GridData

  • 基于AnDroid FrameLayout的使用详解

    今天在学习实现墨迹天气那样的拖动效果时,看到用的是重写FrameLayout.翻了翻书,突然想明白,为什么用FrameLayout.在FrameLayout中,用我看的书中的话说是,空间永远用不完. 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><FrameLayout    xmlns:android="http://schemas.android.com/apk/res/androi

随机推荐