使用Easy UI進行頁面的簡單佈局

xcmercy發表於2017-12-16
UI

Easy UI進行頁面佈局有兩種方式：標記建立佈局和全域性佈局，標記建立佈局是在div標籤中設定 class=“easyui-layout”,全域性佈局是在body標籤中設定class=“easyui-layout”。

建立全域性佈局

  1. 在body標籤中設定class=“easyui-layout”。
  2. 對頁面進行佈局

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:80px;padding:20px">
    </div>
    
    <div data-options="region:'south'" style="height:30px;padding:6px">
    	XXX技術有限公司版權所有
    </div>
    
    <div data-options="region:'west',title:'Navigator',split:true" style="width:200px;padding:10px">
    	<ul id="MenuTree" class="easyui-tree"></ul>
    </div>
    
    <div data-options="region:'center'">
    	 <div id="mainTabs" class="easyui-tabs" data-options="fit:true">
    	 </div>  
    </div>
    
</body>
data-option屬性中的region對應的值有north、south、west、center、east，分別對應上、下、左、中、右

title設定每一個模組的名字

split為true時，表明該模組一個拉伸改變其尺寸

          


3.一般在左邊的模組中新增樹形選單，中間區域是在點選左邊樹選單的時候動態新增一個標籤頁，後續介紹。

相關文章