easyUI中的layout，easyUIlayout
Layout
通過$.fn.layout.defaults可以重寫Layout.
layout是一個具有五個地區的容器。只有中間地區面板是必須的，其餘的都是邊介面板。每一個邊介面板都可以通過拖動它的邊界來改變尺寸，還可以通過面板上的收縮\展開按鈕來收縮或者展開面板。另外，layout還可以嵌套，因此我們可以用它來建立一個複雜的layout。
<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',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>2、建立一個全屏的Layout
<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',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>3、建立一個嵌套的Layout
<body class="easyui-layout"> <div data-options="region:'north'" style="height:100px"></div> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west'" style="width:180px"></div> <div data-options="region:'center'"></div> </div> </div></body>4、通過ajax來載入內容
<body class="easyui-layout"> <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div> <div data-options="region:'center',href:'center_content.php'" ></div></body>Layout 屬性
| Name | Type | Description | Default |
|---|---|---|---|
| fit | boolean | 是否填充滿父容器 | false |
地區面板的很多選項都定義在panel組件中了，下面列出的是地區面板中增加的一些常用選項
| Name | Type | Description | Default |
|---|---|---|---|
| title | string | 地區面板的標題 | null |
| region | string | 定義地區面板的位置，值域為: north, south, east, west, center. | |
| border | boolean | 是否顯示邊框 | true |
| split | boolean | 是否隔開兩塊地區面板，並可以resize | false |
| iconCls | string | 顯示在地區面板標題之前的表徵圖 | null |
| href | string | ajax載入內容的地址 | null |
| collapsible | boolean | 是否顯示收縮\展開按鈕 | true |
| minWidth | number | 地區面板的最小寬 | 10 |
| minHeight | number | 地區面板的最小高 | 10 |
| maxWidth | number | 地區面板的最大寬 | 10000 |
| maxHeight | number | 地區面板的最大高 | 10000 |
| Name | Parameter | Description |
|---|---|---|
| resize | param | 設定layout的尺寸. 'param'有兩個屬性:width,height 代碼舉例: $('#cc').layout('resize', {width:'80%',height:300}) |
| panel | region | 返回指定的面板,參數取值可以是:'north','south','east','west','center'. |
| collapse | region | 收縮指定的面板, 參數取值可以是:'north','south','east','west'. |
| expand | region | 展開指定的面板,參數取值可以是, the 'region' parameter possible values:'north','south','east','west'. |
| add | options | 增加一塊面板,options即為上面介紹的地區面板的屬性 |
| remove | region | 移除指定的面板, 參數取值可以是:'north','south','east','west'. |
layout dependencies:panel and resizable.
so you can change the 'center''s properties like panel.
like this:
$("#myTitleDiv").panel({
title:"other title"
});
----------------------------------------------------------------
it's a easyui object,not jq obj.so...
問，在easyui中怎調大layout等等各種title的字型，是在easyuicss中改？怎更改指教，
和你自己寫的一樣，找對應的selector就行了，利用好編輯工具尋找。如果使用了firefox或者cheom那麼將更加簡單。審查元素，然後找對應的selector。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
