Use JQuery UI Layout Plug-in Layout

First introduce: 1 <script type = "text/javascript" src = "Layout/jquery. js "> </script> 2 <script type =" text/javascript "src =" Layout/jquery. layout. js "> </script> body code: copy code 1 <div class = "ui-layout-center"> 2 Center3 </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> copy the code then the layout method is used for initialization: copy code 1 <script type = "text/javascript"> 2 $ (function () {3 var myLayout = $ ("body "). layout (4 {5 applydefastystyles: true, // app default style 6 scrollToBookmarkOnLoad: false, // scroll to label 7 showOverflowOnHover: false when loading the page, // move the cursor over to show hidden items, which can be used only when the scroll bar is disabled. 8 north _ closable: false, // you can disable 9 north _ resizable: false, // you can change the size of 10 north _ size: 50, // pane size 11 spacing_open: 8, // the gap between the border 12 spacing_closed: 60, // when the border is closed 13 resizerTip: "adjustable size ", // when the mouse moves to the border, the prompt 14 resizerCursor: "resize-p", // the pointer style of the mouse moves up 15 resizerDragOpacity: 0.9, // adjust the transparency when the border is moved. 16. maskIframesOnResize: "# ifa", // mark iframe (not tested) 17. sliderTip: "Show/hide sidebar", // The prompt displayed when you move the cursor over the border after hiding a Pane. 18 sliderCursor: "pointer", // pointer style when the mouse moves over the border after a Pane is hidden. 19 slideTrigger_open: "dblclick", // after a Pane is hidden, the mouse triggers the event displayed. (Click "," dblclick "," mouseover) 20 slideTrigger_close: "click", // when a Pane is hidden, the mouse triggers the closed event. ("Click", "mouseout") 21 togglerTip_open: "close", // when pane is opened, when you move the cursor over the border, the prompt 22 togglerTip_closed: "Open ", // when pane is closed, when you move the mouse over the border, the prompt 23 togglerLength_open: 100 is displayed. // when pane is opened, the length of the Border Button is 24 togglerLength_closed: 200, // when pane is disabled, the Border Button length is 25 hideTogglerOnSlide: true, // hide the open/close button on the border (test failed) 26 togglerAlign_open: "left ", // when pane is opened, the position of the Border Button is 27 togglerAlign_closed: "right". // when pane is closed, the position of the Border Button is 28 togglerContent_open: "<Div style = 'background: red'> AAA </div>", // when pane is enabled, the content to be displayed in the Border Button can be a symbol "<", etc. You need to add the default css style. ui-layout-toggler. content 29 togglerContent_closed: "