[前端]使用JQuery UI Layout Plug-in佈局

時間 2019-11-19

標籤前端使用 jquery layout plug 佈局欄目 JQuery 简体版

原文原文鏈接

引言

使用JQuery UI Layout Plug-in佈局框架實現快速佈局，用起來仍是挺方便的，稍微研究了一下，就能上手，關於該佈局框架的材料，網上也挺多的。在項目中也使用到了，不過那是前端的工做，咱不能搶別人的飯碗不是？，不過對佈局多少了解點，仍是很是有幫助的。javascript

實現

JQuery UI Layout Plug-in佈局框架官網：http://layout.jquery-dev.net/index.cfmcss

這裏使用1.2.0版本的，項目結構：html

首先引入：前端

1  <script type="text/javascript" src="Layout/jquery.js"></script>
2     <script type="text/javascript" src="Layout/jquery.layout.js"></script>

body中代碼：java

1 <div class="ui-layout-center">
2         Center
3     </div>
4     <div class="ui-layout-north">North</div>
5     <div class="ui-layout-south">South</div>
6     <!--<div class="ui-layout-east">East</div>-->
7     <div class="ui-layout-west">West</div>

而後就是使用layout方法進行初始化：jquery

 1     <script type="text/javascript">
 2         $(function () {
 3             var myLayout = $("body").layout(
 4             {
 5                 applyDefaultStyles: true,//應用默認樣式  
 6                 scrollToBookmarkOnLoad: false,//頁加載時滾動到標籤  
 7                 showOverflowOnHover: false,//鼠標移過顯示被隱藏的，只在禁用滾動條時用。 
 8                 north__closable: false,//能夠被關閉  
 9                 north__resizable: false,//能夠改變大小  
10                 north__size: 50,//pane的大小  
11                 spacing_open: 8,//邊框的間隙  
12                 spacing_closed: 60,//關閉時邊框的間隙  
13                 resizerTip: "可調整大小",//鼠標移到邊框時，提示語  
14                 resizerCursor:"resize-p",// 鼠標移上的指針樣式  
15                 resizerDragOpacity: 0.9,//調整大小邊框移動時的透明度  
16                 maskIframesOnResize: "#ifa",//在改變大小的時候，標記iframe（未經過測試）  
17                 sliderTip: "顯示/隱藏側邊欄",//在某個Pane隱藏後，當鼠標移到邊框上顯示的提示語。  
18                 sliderCursor: "pointer",//在某個Pane隱藏後，當鼠標移到邊框上時的指針樣式。  
19                 slideTrigger_open: "dblclick",//在某個Pane隱藏後，鼠標觸發其顯示的事件。(click", "dblclick", "mouseover)  
20                 slideTrigger_close: "click",//在某個Pane隱藏後，鼠標觸發其關閉的事件。("click", "mouseout")  
21                 togglerTip_open: "關閉",//pane打開時，當鼠標移動到邊框上按鈕上，顯示的提示語  
22                 togglerTip_closed: "打開",//pane關閉時，當鼠標移動到邊框上按鈕上，顯示的提示語  
23                 togglerLength_open: 100,//pane打開時，邊框按鈕的長度  
24                 togglerLength_closed: 200,//pane關閉時，邊框按鈕的長度  
25                 hideTogglerOnSlide: true,//在邊框上隱藏打開/關閉按鈕(測試未經過)  
26                 togglerAlign_open: "left",//pane打開時，邊框按鈕顯示的位置  
27                 togglerAlign_closed: "right",//pane關閉時，邊框按鈕顯示的位置  
28                 togglerContent_open: "<div style='background:red'>AAA</div>",//pane打開時，邊框按鈕中須要顯示的內容能夠是符號"<"等。須要加入默認css樣式.ui-layout-toggler .content   
29                 togglerContent_closed: "<img/>",//pane關閉時，同上。  
30                 enableCursorHotkey: true,//啓用快捷鍵CTRL或shift + 上下左右。  
31                 customHotkeyModifier: "shift",//自定義快捷鍵控制鍵("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt  
32                 south__customHotkey: "shift+0",//自定義快捷鍵（測試未經過）  
33                 fxName: "drop",//打開關閉的動畫效果  
34                 fxSpeed: "slow"//動畫速度  
35                 //fxSettings: { duration: 500, easing: "bounceInOut" }//自定義動畫設置(未經過測試)  
36                 //initClosed:true,//初始時，全部pane關閉  
37                 //initHidden:true //初始時，全部pane隱藏  
38                 //onresize: ons,//調整大小時調用的函數  
39                 //onshow_start: start,
40                 //onshow_end: end
41                 /* 
42                 其餘回調函數 
43                  
44                 顯示時調用 
45                 onshow = "" 
46                 onshow_start = ""  
47                 onshow_end = ""  
48                 隱藏時調用 
49                 onhide = ""  
50                 onhide_start = ""  
51                 onhide_end = ""  
52                 打開時調用 
53                 onopen = ""  
54                 onopen_start = ""  
55                 onopen_end = ""  
56                 關閉時調用 
57                 onclose = ""  
58                 onclose_start = ""  
59                 onclose_end = ""  
60                 改變大小時調用 
61                 onresize = ""  
62                 onresize_start = ""  
63                 onresize_end = ""  
64                 */
65             }
66             );
67 
68 
69         });