jQuery UI Layout
Visit this group

Updated Jan 1, 2010

UI.Layout Plug-in & Related Downloads

UI.Layout Download

 Current Version: 1.2.0 (change-log)

Sample Pages

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

SEE MORE demos & samples on our demos page.

Patched UI Widgets – Depricated

The 'patched' versions of UI widgets are no longer required. The typo in the Draggables widget was fixed, and the Accordion widget now has a resize method. If you previously downloaded the patched widgets, you should scrap them and instead update your site to use jQuery 1.3 and UI 1.7.

Latest jQuery & UI Downloads

Only the core jQuery & UI scripts are 'required', but ui.draggable is needed for resizing and ui.effects for animations.

jQuery/UI Download Pages

The official jQuery download pages:

jQuery/UI All-In-One Downloads

These are the latest stable versions:

Individual jQuery UI Components

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

Here are the individual UI 1.7.1 files used by UI.Layout

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:

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

Change-Log

Released Ver # Changes
Nov 16/08 1.0.0
  • Initial release
Nov 26/08 1.1.0
  • NEW flow-code to prevent simultaneous pane animations
  • NEW options to add text inside toggler-buttons
  • NEW options for hotkeys - standard (cursors) and user-defined
  • NEW auto-resize for ALL layouts on windows.resize
  • NEW CSS utility methods:
    • myLayout.cssWidth( elem )
    • myLayout.cssHeight( elem )
  • UPDATED auto-resizing of panes after a container-resize
  • CHANGED minSize default from 50 to 0 (still auto-limited to 'css size')
  • RENAMED option: raisePaneZindexOnHover ==> showOverflowOnHover
  • FIXED bug in allowOverflow - now works with a 'custom paneClass'
  • REMOVED "overflow: auto" from base-styles. Overflow must now be set by CSS - unless applyDefaultStyles==true. No longer need "!important" to set pane overflow in your stylesheet.
Dec 1/08 1.1.1
  • NEW layout property: state - eg: myLayout.state.west.size
  • CHANGED data returned to callbacks - added pane-state as 3rd param
  • REMOVED layout.containerDimensions property - USE: layout.state.container
  • CHANGED toggler element from a SPAN to a DIV
  • CHANGED default for hideTogglerOnSlide to false
  • CHANGED auto-generated custom-buttons classes for better consistency
    • [buttonClass]-[pane]-[buttonType] ==> [buttonClass]-[buttonType]-[pane]
    • ui-layout-button-west-open ==> ui-layout-button-open-west
    • ui-layout-button-west-pin-up ==> ui-layout-button-pin-west-up
  • UPDATED toggler-text to auto-show correct spans (content-open/closed)
  • FIXED toggler-text - now centers text span correctly
  • FIXED bug affecting IE6 when layout has no north or south pane
Dec 07/08 1.1.2
  • UPDATED paneSelector rules to handle FORMS and pane-nesting
    • automatically looks for panes inside 'first form' in container
    • if using an ID as paneSelector, pane can be 'deeply nested'
  • ADDED auto-CSS for 'containers' other than BODY
    • overflow: hidden – ensures no scrollbars on container
    • position: relative – IF NOT: fixed, absolute or relative
    • height: 100% – IF NOT specified or is 'auto'
  • ADDED noAnimation param to open() & close() (not used internally)
Dec 08/08 1.1.3
  • FIXED typo in cursor-hotkeys code
  • NEW scrollToBookmarkOnLoad option - enables use of URL hash:
    • Example: www.site.com/page.html#myBookmark
    • AFTER layout is created, attempts to scroll to #myBookmark
    • default = true – otherwise bookmarks are non-functional
Dec 27/08 1.2.0
  • NEW maskIframesOnResize option, eg:
    • // mask ALL iframes
      maskIframesOnResize: true // default
    • // mask specific iframe(s)
      maskIframesOnResize: "#iframeOne, #iframeTwo"
  • NEW options for separate open & close effects/settings, eg:
    • fxName // BOTH open & close
    • fxSpeed_close
    • fxSettings_open
  • NEW onshow & onhide callback events
  • NEW start & end options for ALL callbacks, eg:
    • onopen_start / onopen_end
    • onhide_start / onhide_end
  • NEW ability to cancel events using 'start' callbacks, eg:
    • // prevent pane from closing if x greater than 0
      onclose_start: function () { if (x > 0) return false; }
  • CHANGED Layout.config.fxDefaults to Layout.effects (internal)
  • FIXED missing semi-colon so minified version works in IE