引言
使用JQuery UI Layout Plug-in布局框架實現快速布局，用起來還是挺方便的，稍微研究了一下，就能上手，關於該布局框架的材料，網上也挺多的。在項目中也使用到了，不過那是前端的工作，咱不能搶別人的飯碗不是？，不過對布局多少了解點，還是非常有幫助的。
實現
JQuery UI Layout Plug-in布局框架官網：http://layout.jquery-dev.net/index.cfm
這里使用1.2.0版本的，項目結構：
首先引入：
1 <script type="text/javascript" src="Layout/jquery.js"></script> 2 <script type="text/javascript" src="Layout/jquery.layout.js"></script>
body中代碼：
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方法進行初始化：
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 });
參考文章：http://www.cnblogs.com/chen-fan/articles/2044556.html
注意：在將不需要的參數注釋之后，需將最后一個參數后面的“,”去掉，經測試發現有的瀏覽器版本不支持，看不到效果。
將不需要的參數注釋之后的效果：
總結
今天在使用該布局框架的時候，一個逗號問題，折騰我很長時間，這里記錄一下，提醒以后要更細心才行。
demo：鏈接：http://pan.baidu.com/s/1eQd1b5w 密碼：m0z5