目錄
-----------------------
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