目录

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

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. Openfire XMPP Smack RTC IM 即时通讯 聊天 MD

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

  2. String 转化Calendar

    SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd HH:mm:ss" ); Date dateExecute = s ...

  3. JAVA 中不错的开源FTP组件：commons-net

    第一步:引入jar到pom.xml. <!-- https://mvnrepository.com/artifact/commons-net/commons-net --> <dep ...

  4. VS2013开发一个简单的asmx接口程序

    一.开发和调试 1:创建一个ASP.NET web应用程序 2:选择空的模板 3:系统生成项目目录 4:右键项目-添加项-新建项 5:选择Web  服务(ASMX) 6:选择之后项目中会有一个Test ...

  5. Pandas Series笔记

    1.指向单元素的,类型为元素的类型 2.指向多个元素的,类型为Series 3.如果用索引切片,索引是非整型的,实际按照索引顺序取值,且包含末端 4.如果指定的索引不存在,则会报错 5.可以根据元素的 ...

  6. 如何实现json字符串和 BsonDocument的互相转换

    String to BsonDocument string json = "{ 'foo' : 'bar' }"; MongoDB.Bson.BsonDocument docume ...

  7. Direct2D教程III——几何（Geometry）对象

    目前博客园中成系列的Direct2D的教程有 1.万一的 Direct2D 系列,用的是Delphi 2009 2.zdd的 Direct2D 系列,用的是VS中的C++ 3.本文所在的 Direct ...

  8. Springboot单元测试（MockBean||SpyBean）

    转载:https://blog.csdn.net/maiyikai/article/details/78483423 本来要写springboot集成netty实现的,但是想起来单元测试没总结,那就趁 ...

  9. 如何让windows更高效？

    首先解释一下个标题: "让windows更高效,既指让windows更友好更优化,也指可以让使用windows来工作或学习的人更高效的工作学习." 解释下本文的动机: 指导我自己或 ...

  10. 电脑技巧 如何保存网页为PDF

    安装Adobe Acrobat X pro(要安装版本,不要绿色版),完成之后再打印机里面可以看到添加了新的Adobe PDF打印机   对于任意的Office文档,都可以直接打印到PDF得到PDF文 ...