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

时间 2019-11-22

标签 easyui 入门视频教程 layout 初始化属性方法使用繁體版

原文原文链接

目录javascript

-----------------------php

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

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

Easyui入门视频教程第07集---Accordion的使用

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

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

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

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

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

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

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

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

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

layout的两种使用方式html

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

 <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标签实现达到整个页面的布局ajax

<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的属性修改和方法的使用

布局

修改属性的话有两种方式

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

<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是有继承的说法的ui

这里就表示 layout 继承了
panel
resizable

因此如今咱们回到 layout上面

若是要修改 layout的属性
spa

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

在layout中

Layout Options 是layout的属性

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

属性的那个说明通常有四列

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

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

<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初始化和属性方法使用

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

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

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