4.1、easyui布局-layout

在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下:

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

<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'" style="padding:5px;background:#eee;"></div>

4.2、add方法

$('#myDiv').layout('add', {

region: 'west',

width: 180,

title: 'West Title',

split: true,

tools: [{

iconCls: 'icon-add',

handler: function () { alert('add') }

}, {

iconCls: 'icon-remove',

handler: function () { alert('remove') }

}]

});

4.3、整个页面定义成layout

我们在创建layout布局的时候东(east)、南(south),西(west)、北(north)都可以不写，但是中(center)必须写。

假如我们想让整个页面都是layout布局，这样就不用考虑高度宽度等问题。如何做？我们只需要在body标签上面添加一个calss即可。代码如下：

<body class="easyui-layout">

<div data-options="region:'north',title:'North Title',split:true" style="height: 50px">north</div>

<div data-options="region:'south',title:'South Title',split:true" style="height: 50px">south</div>

<div data-options="region:'west',title:'West',split:true" style="width: 100px">west</div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px">east</div>

<div data-options="region:'center',title:'center title'">center</div>

</body>

jquery easy ui 1.3.4 布局layout（4）的更多相关文章

  1. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  2. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  4. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  5. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  9. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. zabbix 汉化

    zabbix2.x的版本自带汉化,3.x的版本也可以通过修改配置文件强制使用自带的汉化,但是不管哪种,翻译的精准度令人费解:偶然发现一个专门翻译zabbix的网站https://www.zabbix. ...

  2. WPF MVVM模式

    1. MVVM MVVM的设计模式最早于2005年由微软的WPF和Silverlight架构师John Gossman在他的博客中提到. WPF中采用MVVM的架构可以获得以下好处: 1. 将UI和业 ...

  3. 新浪微博客户端(11)-自定义checkBox

    在最后一个欢迎界面上添加一个CheckBox. // 2.添加4个UIImageView ; i < NEW_FEATURE_NUMS; i++) { UIImageView *imageVie ...

  4. socket基本

    fd_set用法: http://blog.sina.com.cn/s/blog_5c8d13830100erzs.htm socket连接: lpszHost="127.0.0.1&quo ...

  5. JdbcTemplate三种常用回调方法

    JdbcTemplate针对数据查询提供了多个重载的模板方法,你可以根据需要选用不同的模板方法. 如果你的查询很简单,仅仅是传入相应SQL或者相关参数,然后取得一个单一的结果,那么你可以选择如下一组便 ...

  6. 服务器部署之 cap deploy:setup

    文章是从我的个人博客上粘贴过来的, 大家也可以访问 www.iwangzheng.com $ cap deploy:setup 执行到这一步的时候会时间较长,可以直接中断 * executing &q ...

  7. php用soap创建webservice

    php提供了一个专门用于soap操作的扩展库,使用该扩展库后 可以直接在php中进行soap操作.下面将介绍soap的基本操作. 一.soap扩展的使用方法 php的soap扩展库通过soap协议实现 ...

  8. C语言课程2——我们交流的工具：Coding.net

    各位同学,大家好,在我们本学期既有老师的课堂授课,同样也有我与你们在线的辅导:那么问题来了,我与你们之间是通过何种方式进行交流,比如你的代码我怎么修改,怎样看到修改了哪些地方,我对你们的代码怎样批注, ...

  9. CreateRemoteThread远程线程注入Dll与Hook

    CreateRemoteThread虽然很容易被检测到,但是在有些场合还是挺有用的.每次想用的时候总想着去找以前的代码,现在在这里记录一下. CreateRemoteThread远程注入 DWORD ...

  10. Linux 命令行生成随机密码的十种方法

    Linux操作系统的一大优点是对于同样一件事情,你可以使用高达数百种方法来实现它.例如,你可以通过数十种方法来生成随机密码.本文将介绍生成随机密码的十种方法.这些方法均收集于Command-Line ...