目录

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

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高可用负载均衡集群（转）

    阅读目录 1.简介 2.基本环境 3.配置MySQL主主复制 4.中间件简述 4.1.Haproxy介绍 4.2.keepalived介绍 5.中间件的安装与配置(haproxy.keepalived ...

  2. C#实现json的序列化和反序列化

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

  3. svn“Previous operation has not finished; run 'cleanup' if it was interrupted“报错的解决方法

    今天碰到了个郁闷的问题,svn执行clean up命令时报错“Previous operation has not finished; run 'cleanup' if it was interrup ...

  4. 【R】自定义函数方法

  5. 转： git使用时让http记住帐号密码

    见 http://git.mydoc.io/?t=154710 https 方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受 https 带来的极速 按照以下设置记住密 ...

  6. Visual stuido 项目路径的奇怪问题

    从别人那里以zip的形式接受了一个solution, 然后在接收目录解压缩,然后剪切到其他的目录.此时报错,说找不到项目文件,看Visual studio 寻找的详细路径,发现它还是到解压缩的那个目录 ...

  7. [Algorithm] Reservoir Sampling

    Given a stream of elements too large to store in memory, pick a random element from the stream with ...

  8. Mathematica 文本界面获得之前的结果

    使用%号做标记.获得文本界面之前的运算结果:

  9. js实现双击滚屏效果

    <body onDblClick="s=setInterval('scrollBy(0,2)',50)" onMousedown="clearInterval(s) ...

  10. javascript实现金额大写转换函数

    function transform(tranvalue) { try { var i = 1; var dw2 = new Array("", "万", &q ...