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>