jQuery Easy UI (適應屏幕分辨率大小)佈局(Layout)

時間 2019-12-08

標籤 jquery easy 適應屏幕分辨率大小佈局 layout 欄目 JQuery 简体版

原文原文鏈接

1、jQuery Easy UI (適應屏幕分辨率大小)佈局(Layout) jquery

一、首先應用的是jquery-easyui-1.4 版本（版本不一樣，兼容性不一樣）佈局

二、實現整個頁面的佈局（ layout: north,south,west,east, center）ui

三、首先整個頁面佈局適應屏幕的分辨率大小spa

四、而後內容區域進行佈局，也要適應屏幕分辨率大小code

五、部分代碼： blog

 1 <body>
 2     <div class="easyui-layout" fit="true">
 3         <div data-options="region:'north'" style="height: 50px">
 4             <h3>
 5                 標題位置</h3>
 6         </div>
 7         <div data-options="region:'south',split:true" style="height: 50px;">
 8             <h3>
 9                 底部位置</h3>
10         </div>
11         <div data-options="region:'east',split:true" title="East" style="width: 200px;">
12             <h3>
13                 填充內容</h3>
14         </div>
15         <div data-options="region:'west',split:true" title="West" style="width: 200px;">
16             <h3>
17                 導航菜單位置</h3>
18         </div>
19         <div data-options="region:'center'">
20             <%--注意：必須設置 屬性 fit="true"--%>
21             <div id="tabs" class="easyui-tabs" fit="true">
22                 <div id="home" title="歡迎使用" style="padding: 3px; overflow: hidden;">
23                     <%-- 中間內容佈局適應屏幕分辨率大小 注意設置屬性 fit="true"--%>
24                     <div class="easyui-layout" fit="true">
25                         <%--若是左右佈局必須設置一個的寬度 width--%>
26                         <div id="p" data-options="region:'west',title:'左側位置',collapsible:false" style="width: 25%;
27                             padding: 0px;">
28                             <%--   若是裏面的內容也要適應屏幕分辨率大小 需設置 width="100%" height="100%"--%>
29                             <div id="departList">
30                                 <h4>
31                                     填充內容</h4>
32                             </div>
33                         </div>
34                         <div data-options="region:'center',title:'右側位置'">
35                             <div id="departAddr">
36                                 <h4>
37                                     填充內容</h4>
38                             </div>
39                         </div>
40                     </div>
41                 </div>
42                 <div title="Test" style="padding: 10px">
43                     This is the Test work.
44                 </div>
45                 <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding: 10px">
46                     This is the help content.
47                 </div>
48             </div>
49         </div>
50     </div>
51 </body>