目录

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

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. 第二十五章 springboot + hystrixdashboard

    注意: hystrix基本使用:第十九章 springboot + hystrix(1) hystrix计数原理:附6 hystrix metrics and monitor 一.hystrixdas ...

  2. [leetcode]Simplify Path @ Python

    原题地址:https://oj.leetcode.com/problems/simplify-path/ 题意: Given an absolute path for a file (Unix-sty ...

  3. Spiral Matrix leetcode java

    题目: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spira ...

  4. 构建配置 ProGuard Shrink 混淆和压缩

    官方文档 压缩代码和资源 要尽可能减小 APK 文件,您应该启用压缩来移除 release build 中未使用的代码和资源.此页面介绍如何执行该操作,以及如何指定要在构建时保留或舍弃的代码和资源. ...

  5. 汉字转拼音 pinyin4j 字符串 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. Java程序员须知的七个日志管理工具

    本文由 ImportNew - 赖 信涛 翻译自 takipiblog.欢迎加入翻译小组.转载请见文末要求. Splunk vs. Sumo Logic vs. LogStash vs. GrayLo ...

  7. JQuery实现可编辑的表格

    点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 第一种单击表格可以编辑的方法 //相当于在页面中的 body标签加上onload事件$(function() {    ...

  8. Java复习1-基本数据类型

    数据类型 整形 type 存储 取值范围 int 4字节 -2 147 483 648 ~ 2 147 483 647 (超过20亿) short 2字节 -32 768 ~ 32 7677 long ...

  9. Android短信收到，语音播报

    发送短信功能界面 /** * 发送短信Demo * * @description: * @author ldm * @date 2016-4-22 上午9:07:53 */ public class ...

  10. 【转】 Java多态特性:重载和覆写的比较

    Java重载: 在同一个类中 方法具有相同的名字,相同或不同的返回值,但参数不同的多个方法(参数个数或参数类型) public class MethoDemo{ public static void ...