UI Layout Demos

TIP: After viewing a demo, click 'Back' to return to this page

There are basic demos for the Layout plug-in:

• example.html — a minimalist example
• simple.html — a simple, but complete layout
• complex.html — utilizes many features and has a 'nested layout'
• destroy.html — has a 'destroy' method to remove a layout
• destroy2.html — shows cascading layout 'destroy' and 'create'
• body_padding.html — shows layout padding (inset) and margins (outset)

Demos using a container element instead of BODY for the Layout:

• container.html — container to limit width and horizontally center
• container_margins.html — container to create page-margins around a layout
• container_with_layout.html — container plus a wrapper-layout for vertical padding
• container_centered.html — container that is vertically and horizontally centered

Demos show 'layout nesting' to create different arrangements:

• nested.html — create multiple sidebars/columns
• nested_simple.html — a simple example with nested layouts
• nested_sidebars.html — a sub-layout in each sidebar
• nested_3levels.html — nesting 3-levels deep - inside a 'container'
• layouts_inside_tabs.html — multiple nested-layouts inside multiple tabs
• nested_percent_columns.html — shows proportional/percentage-size columns

Examples of layouts with iframes:

• frames.html — navbar with framed-page as center-pane
• iframes_many.html — page with multiple iframes, in different configurations
• iframe_local.html — how to control layouts in child or parent frames

Examples for Saving the State of layouts:

• saved_state.html — simple demo for Layout's stateManagement
• saved_state_nested.html — stateManagement with nested/child layouts

Examples of how a layout can be customized:

• popups.html — handling pop-ups and drop-downs using allowOverflow() method
• printable.html — how to 'neutralize' layout styles for printing

Demos with jQuery-UI widgets integrated with Layout:

• accordion.html — integrates the UI Accordion widget
• tabs_basic.html — basic integration of Layout with UI Tabs widget
• tabs_simple.html — slightly enhanced version of tabs_basic demo
• tabs.html — 3 sets of tabs - with & without auto-sizing
• tabs_ajax.html — demonstrates remote/Ajax tabs, which requires extra steps
• accordions_and_tabs_inside_layout.html — integrates of numerous Accordions & Tabs
• layout_inside_tab.html — puts a layout inside a tab, and handles 'resize on show'
• layouts_inside_tabs.html — multiple nested-layouts inside multiple tabs
• droppable.html — integrates the the UI Droppable/Sortable widget
• autocomplete.html — integrates the UI AutoComplete widget
• datepicker.html — integrates the UI Date-Picker widget
• layout_inside_dialog.html — uses a layout inside a UI Dialog

Demos with misc jQuery Plugins integrated with Layout:

• widget_slickgrid.html — integrates the SlickGrid plugin

Other, misc demos:

• ajax.html — Ajax injection of new content into a layout
• button_samples_1.html — simple demo using custom buttons to control layout functionality
• custom_togglers.html — customize the toggler-buttons to make them multi-functional
• two_pane_toggler.html — customize the west toggler to create a 2-pane-toggle
• custom_scrollbars.html — integrates the jScrollPane plug-in to add custom scrollbars
• flexible_height_columns.html — use custom code to size-to-fit injected content
• table_fixed_header.html — use Layout to create fixed header & footer for a scrolling table
• toggle_center_pane.html — modifying animations to create custom UI functionality
• toggle_alternate_layouts.html — toggle between multiple layouts
• toggle_alternate_layouts2.html — email application mockup - toggle between 'list' and 'edit'

If you create an application or testing page that integrates UI widgets, we'd love to showcase it here. Leave us a message in the discussion group.