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. 用Nikto探测一个网站所用到的技术

    Nikto是一款开源的(GPL)网页服务器扫描器,它可以对网页服务器进行全面的多种扫描,包含超过3300种有潜在危险的文件/CGIs:超过 625种服务器版本:超过230种特定服务器问题,包括多种有潜 ...

  2. map vs hash_map

    1. map, multimap, set, multiset g++ 中 map, multimap, set, multiset 由红黑树实现 map: bits/stl_map.h multim ...

  3. Nginx Http框架的理解

    Nginx Http框架的理解 HTTP框架是Nginx基础框架的一部分,Nginx的其它底层框架如master-worker进程模型.event模块.mail 模块等. HTTP框架代码主要有2个模 ...

  4. zabbix 邮件报错 Support for SMTP authentication was not compiled in

    服务器系统是centos6.5 zabbix版本是3.0.4 根据 网上教程配置好邮件脚本后,触发发送邮件的时候报错: Support for SMTP authentication was not ...

  5. mysql 查看 删除 日志操作总结(包括单独和主从mysql)

    我们可以在mysql的安装目录下看到mysql的二进制日志文件,如mysql-bin.000***等,很多人都不及时的处理,导致整个硬盘被塞满也是有可能的.这些是数据库的操作日志.它记录了我们平时使用 ...

  6. 3DES封装类

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Se ...

  7. Entity Framework简介

    前言 很久很久之前就想来好好的学习一下EF,一直也是各种理由导致一直也没有好好的开始,现在下定决心了,不管怎样一定要把这先走一遍,并且把自己学到的相关EF的知识进行记录,以备后用,也望广大博友们一起来 ...

  8. Capistrano SSH::AuthenticationFailed, not prompting for password

    文章是从我的个人博客上粘贴过来的, 大家也可以访问 www.iwangzheng.com 在本地执行cap deploy部署的时候会报错: connection failed for: 11.11.1 ...

  9. 练习英语ing——[POJ1004]Financial Management

    [POJ1004]Financial Management 试题描述 Larry graduated this year and finally has a job. He's making a lo ...

  10. PHP学习之一晚撸下W3chscool

    PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...