UI Layout Plug-in & Related Downloads

UI Layout Download

Sample Pages

These simple demos are self-contained - right-click to download:

• example.html – requires only jquery.js and jquery.layout-latest.js
• simple.html – also requires jquery.ui.all.js, or animations won't work

SEE MORE demos & samples on our demos page.

Layout 1.3.x Custom Callbacks

I 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.pseudoClose

NOTE: 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.

• DEMO of pseudoClose functionality
• jquery.layout.pseudoClose-1.0.js
• jquery.layout.pseudoClose.min-1.0.js

$.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
});

• DEMO of slideOffscreen functionality
• jquery.layout.slideOffscreen-1.1.js
• jquery.layout.slideOffscreen.min-1.1.js

$.layout.callbacks.resizeTabLayout

This 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
});

• Simple DEMO of functionality
• Complex DEMO of functionality
• jquery.layout.resizeTabLayout-1.3.js
• jquery.layout.resizeTabLayout.min-1.3.js

$.layout.callbacks.resizePaneAccordions

This 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
});

• Simple DEMO of functionality
• Complex DEMO of functionality
• jquery.layout.resizePaneAccordions-1.2.js
• jquery.layout.resizePaneAccordions-1.2.min.js

$.layout.callbacks.resizeDataTable

This callback replaces the need for a custom function to resize data-tables created with the DataTables plugin when they are nestedinside a layout-pane.
(NOTE: This callback may be out of date but still illustrates how to handle DataTables inside a layout)

// 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
});

• jquery.layout.resizeDataTable-latest.js
• jquery.layout.resizeDataTable-1.0.js
• jquery.layout.resizeDataTable.min-1.0.js
• No demos available
• This callback was written and contributed by Robert Brower

Latest jQuery & UI Downloads

Only the core jQuery script is 'required', but ui.draggable is needed for resizing and ui.effects for animations.

jQuery/UI Download Pages

• jQuery Downloads
• jQuery UI Downloads

jQuery/UI Quick Downloads & CDN Info

These are the latest stable versions:

• jquery-latest.js
• jquery-latest.min.js
• Google CDN Info

Individual jQuery UI Components

UI components can be downloaded in a 'development bundle', or you can create a custom download:

• Build Your Download

UI Layout uses the following jQuery UI components:

• ui.core.js (only is using pane resizing OR animations
• ui.draggable.js (only if user-resizable panes is enabled)
• effects.core.js (only if using pane open/close/resize animations)
• effects.slide.js (default pane-animation effect)
• effects.drop.js (only if you specify this effect)
• effects.scale.js (only if you specify this effect)

Layout Themes

There 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:

• resizable-n.gif — North resizer bar
• resizable-s.gif — South resizer bar
• resizable-e.gif — East resizer bar
• resizable-w.gif — West resizer bar
• flora_resizers.zip — ALL 4 graphics

All other graphics in the demos are proprietary, so do not use them in a commercial project.

Change-Log