jQuery UI Layout Plug-in
| ||||||||||||||||||||||||||
If you find Layout useful and want to support its development...
Updated Oct 29, 2012 |
UI Layout Plug-in & Related DownloadsUI Layout DownloadLatest Version: 1.4.0 (change-log)
Despite being a 'release candidate', the 1.3.0 RC version is more bug-free and robust than 1.2.0. Plus it has many new options and features. Official Version: 1.2.0 (change-log)
Sample PagesThese simple demos are self-contained - right-click to download:
SEE MORE demos & samples on our demos page. Layout 1.3.x Custom CallbacksI have compiled some commonly requested custom layout-callback functions into plugin-style add-ons for Layout. So far there are 3 of these. Also below is one layout plugin, which is not a 'callback'. $.layout.callbacks.pseudoCloseNOTE: Also see the slideOffscreen plug-in below. The pseudoClose callback prevents the normal 'close' functionality of a pane and replaces it with a 'resize' command that makes the pane just 1px in size. This can be used when you have an iframe or object that you do not want to 'refresh' when the pane is closed, which all non-IE browsers will do when such an object is made 'hidden'. // pseudoClose Option Syntax $("body").layout({ west__onclose: $.layout.callback.pseudoClose // optional customization , west__pseudoClose: { skipIE: false // can skip IE for iframes that do not contain media objects , hideObject: "" // usually: "", "pane", "iframe" or "object" - element will be made 'invisible' to enhance illusion of pane being 'closed' } }); The new pseudoClose 1.1 feature requires Layout RC30.4 or higher. This tweak allows the normal hide() and show() methods to work with pseudoClose. Use buttons in the center-pane of the demo page to see how this works.
$.layout.callbacks.slideOffscreen – Animation (replaces pseudoClose)I created a custom open/close animation that works just like the default 'slide' animation, except that instead of 'hiding' the pane after closing, it is just moved off-screen. This addresses the 'reloading' issue with iframes and video-players, while retaining the normal open/close animations, allowing Layout to function 100% normally. This is actually not a "callback" - it is a "Layout plug-in". I'm listing it here because it replaces the pseudoClose callback. Use the slideOffscreen effect as you would the normal/default slide effect. You can customize the fxSpeed and fxSettings however you wish... <-- include plugin library after loading Layout --> <script src="jquery.layout-latest.js"></script> <script src="jquery.layout.slideOffscreen-1.1.js"></script> <script> $("body").layout({ // assign the 'slideOffscreen' effect to any pane(s) you wish west__fxName: "slideOffscreen" , west__fxSpeed: 1000 // optional });
$.layout.callbacks.resizeTabLayoutThis callback replaces the need for a custom function to resize layouts that are nested inside a UI Tab-panel. It must be bound to BOTH the layout.onresize event of the outer-layout that wraps the tabs widget, and the tabs.show event so that the layout can be resized each time it becomes 'visible'. // resizeTabLayout Option Syntax $("body").layout({ // outer-pane that contains the tabs-widget center__onresize: $.layout.callbacks.resizeTabLayout }); // Create the tabs and assign callback to show event // This will handle layouts in _any_ of the tab-panels $("body > .ui-layout-center").tabs({ activate: $.layout.callbacks.resizeTabLayout });
$.layout.callbacks.resizePaneAccordionsThis callback replaces the need for a custom function to resize accordions that are nested inside a layout-pane. Accordions have the same problem with resizing when used in combination with the Tabs widget. Although the combination of Accordions and Tabs has nothing to do with Layout, you can use this callback to address that situation as well. // resizePaneAccordions Option Syntax $("body").layout({ // outer-pane that contains an Accordion center__onresize: $.layout.callbacks.resizePaneAccordions }); // can also use callback to handle an Accordion inside a Tabs-panel $("#myTabs").tabs({ activate: $.layout.callbacks.resizePaneAccordions });
$.layout.callbacks.resizeDataTableThis callback replaces the need for a custom function to resize data-tables created with
the DataTables plugin when they are nestedinside a layout-pane.
// resizeDataTable Option Syntax $("body").layout({ // outer-pane that contains an data-table center__onresize: $.layout.callbacks.resizeDataTable }); // can also use callback to handle an data-table inside a Tabs-panel $("#myTabs").tabs({ activate: $.layout.callbacks.resizeDataTable });
Latest jQuery & UI DownloadsOnly the core jQuery script is 'required', but ui.draggable is needed for resizing and ui.effects for animations. jQuery/UI Download PagesjQuery/UI Quick Downloads & CDN InfoThese are the latest stable versions: Individual jQuery UI ComponentsUI components can be downloaded in a 'development bundle', or you can create a custom download: UI Layout uses the following jQuery UI components:
Layout ThemesThere are no Layout themes available yet. Let us know if you create a theme you'd like to share. The complex demo uses 'resizer' graphics from the UI Flora theme:
All other graphics in the demos are proprietary, so do not use them in a commercial project. Change-Log
|
|||||||||||||||||||||||||
![]() |
||||||||||||||||||||||||||