目录

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

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. 《mysql技术内幕 InnoDB存储引擎（第二版）》阅读笔记

    一.mysql架构 mysql是一个单进程多线程架构的数据库. 二.存储引擎 InnoDB: 支持事务 行锁 读操作无锁 4种隔离级别,默认为repeatable 自适应hash索引 每张表的存储都是 ...

  2. 怎样用纯HTML和CSS更改默认的上传文件按钮样式

    如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...

  3. [asp.net]C#实现json的序列化和反序列化

    在做asp.net和unity进行http通信的时候,当unity客户端发出表单请求的时候,我要将他要请求的数据以json的格式返回给客户端,让客户端来解析.服务器端这一块就涉及到json的序列化和反 ...

  4. SCIKIT-LEARN与GBDT使用案例

    http://blog.csdn.net/superzrx/article/details/47073847 安装 SCIKIT-LEARN是一个基于Python/numpy/scipy的机器学习库  ...

  5. VS2010自带的性能分析工具分析.NET程序的性能

    这篇博文给大家分享的是,如何使用VS自带的性能分析工具来分析我们编写的.NET程序,一边找出程序性能的瓶颈,改善代码的质量.在实际开发中,性能真的很重要,往往决定一个产品的生死~良好的用户体验的基础之 ...

  6. Spark Structured Streaming：将数据落地按照数据字段进行分区方案

    方案一(使用ForeachWriter Sink方式): val query = wordCounts.writeStream.trigger(ProcessingTime(5.seconds)) . ...

  7. thinkcmf 角色授权支持分类

    ThinkCMF中的权限是以后台菜单为基础来进行设置的(menu table),即如果你需要一个自定义的权限,那么你需要在后台菜单里添加一项菜单,然后在角色管理里可以针对角色进行授权   而现在遇到一 ...

  8. how to restrict copy paste in a Textbox, in MFC?

    [问题] I am developing a small application in MFC... there is a little problem..hope you guys would he ...

  9. Python标准库：内置函数type(object)

    type(object) type(name, bases, dict) 本函数是返回对象的类型对象.仅仅有一个參数object时,直接返回对象的类型对象.假设仅仅是想推断一个对象是否属于某一个类的对 ...

  10. C++ 构造与析构的执行顺序

    1.代码如下:class A{public: int _Id; A():_Id(0) { printf("A[%d]\n",_Id); } ~A() { printf(" ...