jquery easy ui 1.3.4 布局layout（4）
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）的更多相关文章
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
随机推荐
- 对A*算法的改进
对sunway程序中的BUG所进行的修改 需要注意的是Sunway上面文章“深入A*算法”中引用了一个A*的游戏程序进行讲解,并有这个源码的下载,不过它有一个不小的Bug, 就是新的子节点放入OPEN ...
- cannot get gid for group ‘nobody’
启动php-fpm /data1/server/php-cgi/sbin/php-fpm 错误[28-Mar-2012 11:15:01] ERROR: failed to open configur ...
- ecshop后台admin路径怎么修改
ecshop后台admin路径怎么修改 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-03-25 ecshop如何修改后台admin路径? 大家都知道ec ...
- 一分钟认识GitHub
一分钟认识GitHub 机缘巧合之下,我开始使用 GitHub ,但事实上,刚刚入门的我不知道如何才能使 GitHub 发挥他的全部功能.不久之前,我偶然听了李福斯先生对 GitHub 的介绍,受益匪 ...
- Visual Studio Online Integrations-Customer support
原文:http://www.visualstudio.com/zh-cn/explore/vso-integrations-directory-vs
- JS的运行机制
代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...
- C# 我理解的接口、抽象类、以及事件
一.摘要 面试中无数次被问及到什么是接口,什么是抽象类,接口和抽象类有什么区别?什么是委托,什么是事件. 请写出猫叫了,老鼠跑了的例子..... 这些东西对于一些初学者来说可能还真的有点搞不懂,对于一 ...
- 如何用sql批量删除一个id段内的dedecms文章?
之前因为ytkah批量添加了dedecms文章,数量有些多,后面出现问题了,想要删除一部分织梦文章,后台一篇篇删,删到手软(相关内容:修改dedecms关键词到手软),于是就想到了sql数据库操作!那 ...
- 交叉编译php5,、nginx、squid方法
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 交叉编译php5 软件版本:php-5.4.27 依赖库:zlib,libxml2 交叉编译器:arm-hisi ...
- js判断元素是否隐藏的方法
代码如下: JavaScript代码如下: if( document.getElementById("div").css("display")==='none' ...