目录

-----------------------

Easyui入门视频教程 第06集---Layout初始化和属性方法使用

Easyui入门视频教程 第06集---Layout初始化和属性方法使用

layout的两种 使用方式

第一种：通过div标签实现 达到部分区域布局

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

</div>

第二种：通过body标签实现 达到整个页面的布局

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

</body>

这里 修改一下 前面说错了一个地方 跟大家说声对不起

collapsed:true 这个属性是 标签 默认的那个区域 收缩 不是之前说的 是否开启收缩功能

在这里 要提前 先将一下 easyui的属性修改和方法的使用

修改属性的话 有两种方式

一种是 直接 修改标签中的属性

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"   

        data-options="iconCls:'icon-save',modal:true">   

    Window Content   

</div>  

另外一中 是通过 js脚本来实现

$('#win').window({

    width:600,

    height:400,

    modal:true

});

这里面 前面的 表示 值 后面的表示

方法使用：
$('#win').window('refresh', 'get_content.php'); 但参数 前面是方法名 后面的是参数  
也可以没有参数
$('#win').window('open');  // open a window   
$('#win').window('close');  // close a window

Easyui是有继承的说法的

这里 就表示 layout 继承了
panel
resizable

所以  现在 我们 回到 layout上面

如果 要修改 layout的属性

注意 在chm帮助文档中 Options 的就是 属性 Methods 的 就是方法

在layout中

Layout Options 是layout的属性

而Region Panel Options 就是 里面的panel区域的属性

属性的那个说明 一般有四列

Name 名称
Type 类型
Description 描述
Default 默认

第一种方法是 直接修改data-options

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

第二种方法是
$('#tt').layout({
        title:'新名称'
});

其他类似

去掉 remove 方法

<script type="text/javascript">

            $(document).ready(function () {

                // 在这里写你的代码...

                $("#cc").layout('remove', 'south');

            });

    </script>

视频网盘下载http://pan.baidu.com/s/1gd7OKSF

源码需要的http://www.bamn.cn/thread-3984-1-1.html

Easyui入门视频教程 第06集---Layout初始化和属性方法使用的更多相关文章

  1. Easyui入门视频教程 第11集---Window的使用

    目录 Easyui入门视频教程 第11集---Window的使用   Easyui入门视频教程 第10集---Messager的使用  Easyui入门视频教程 第09集---登录完善 图标自定义   ...

  2. Easyui入门视频教程 第09集---登录完善 图标自定义

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  3. Easyui入门视频教程 第08集---登录实现 ajax button的使用

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  4. Easyui入门视频教程 第05集---Easyui复杂布局

    目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的使用  ...

  5. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  6. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  7. Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

  8. Easyui入门视频教程 第01集---认识Easyui

    认识EasyUI 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax b ...

  9. Easyui入门视频教程 第10集---Messager的使用

    Easyui入门视频教程 第10集---Messager的使用 <script type="text/javascript"> function show(){ $.m ...

随机推荐

  1. [leetcode]Restore IP Addresses @ Python

    原题地址:https://oj.leetcode.com/problems/restore-ip-addresses/ 题意: Given a string containing only digit ...

  2. 57. 三数之和 &&

    题目 57. 三数之和 给出一个有n个整数的数组S,在S中找到三个整数a, b, c,找到所有使得a + b + c = 0的三元组. 样例 如S = {-1 0 1 2 -1 -4}, 你需要返回的 ...

  3. 硬链接(hard link)和符号连接(symbolic link)

    inode ====== 在Linux系统中,内核为每一个新创建的文件分配一个inode,每个文件都有一个惟一的inode号,我们可以将inode简单理解成一个指针,它永远指向本文件的具体存储位置.文 ...

  4. oracle的行级触发器使用

    行级触发器: 当触发器被触发时,要使用被插入.更新或删除的记录中的列值,有时要使用操作前.后列的值. :NEW 修饰符访问操作完成后列的值 :OLD 修饰符访问操作完成前列的值 例1: 建立一个触发器 ...

  5. 《JavaScript语言精粹》笔记

    0.JavaScript的简单数据类型包括数字.字符创.布尔值(true/false).null和undefined值,其它值都是对象. 1.JavaScript只有一个数字类型,它在内部被表示为64 ...

  6. 【ElasticSearch】ES5新特性-keyword-text类型-查询区别

    ES5新特性-keyword-text类型-查询区别 elasticsearch-head Elasticsearch-sql client junneyang (JunneYang) es keyw ...

  7. 浅谈Kmeans聚类

    http://www.cnblogs.com/easymind223/archive/2012/10/30/2747178.html 聚类分析是一种静态数据分析方法,常被用于机器学习,模式识别,数据挖 ...

  8. cookie相关的函数

    浏览器中,使用JavaScript操作cookie的两个工具函数. 设置cookie值, 必须的參数是name和value,可选參数是过期天数和域名. // 设置cookie值(key,value,过 ...

  9. linux安装experss搭建本地服务器

    准备nodejs和npm 保证本地安装了nodeJS和npm,如果没有安装的话,通过下面的命令进行安装: sudo apt-get install nodejs //安装nodeJS sudo apt ...

  10. 面试小结之Elasticsearch篇

    https://www.cnblogs.com/luckcs/articles/7052932.html