Plugins
Home ยป Plugins

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

UI Layout - The Ultimate Page Layout Manager


Submitted by jquery-dev on November 15, 2008 - 3:26pm

This plugin was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want - from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations or issues - this widget is ready for production use. Our website includes everything you need: documentation, demos and downloads. All feedback, questions and requests are welcome as development is ongoing. If you create a good looking application using UI.Layout, please let us know.

* New Version *

A new version of Layout will be posted here soon. In the mean time, UI Layout 1.3.0 is available as a Release Candidate. If you have any issues with the current 1.2.0 version or need more functionality, download and try the latest release candidate version. Use the UI Layout discussion forum for questions and support on this beta versions:

Features

  • unlimited layout capabilities: up to 5 regions per layout - unlimited regions using nesting
  • simple to use: powerful but simple syntax make it easy
  • dozens of options: every aspect is customizable, globally and by region
  • total CSS control: dozens of auto-generated classes let you recreate ANY UI look
  • extensible: callbacks, numerous methods, and special utilities provide total control
  • custom buttons: integrates with your own buttons for a custom UI look
  • use any elements: use divs, iframes or any elements you want as 'panes'
  • collapsable: each pane can be closed, using any UI animation you want
  • hidable: panes can be completely hidden, either on startup or at any time
  • resizable: each pane can be resized, within automatic or user-defined size limits
  • slidable: panes can also 'slide open' for temporary access
  • headers & footers: each region has unlimited headers or footers
  • hotkeys: use preset 'cursor hotkeys' or create your own
  • nesting capabilities: put layouts within layouts to create complex layouts
  • demo mode: set applyDefaultStyles option to create a fully functional layout, instantly
  • compatible with UI widgets: intended to be combined with other UI widgets
  • A LOT MORE: see the documentation and demos

Demos

  • example.html - a minimal implementation (see Example below)
  • simple.html - a simple layout, but with full functionality
  • complex.html - uses many options, some CSS styling and custom buttons, and has a 'nested layout'

Specialized Samples

Example

<html>
<head>
  <script src="jquery.js"></script>
  <script src="jquery.layout.js"></script>
  <script>
    $(document).ready(function () {
        $('body').layout({ applyDefaultStyles: true });
      });
  </script>
</head>
<body>
  <div class="ui-layout-center">Center</div>
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-south">South</div>
  <div class="ui-layout-east">East</div>
  <div class="ui-layout-west">West</div>
</body>
</html>

Documentation

The plug-in's extensive options and features are documented in detail here:

License

This plug-in is dual-licensed under the GPL and MIT licenses.

Download

Download the latest version of jquery.layout.js from our
downloads page

Downloads



4.93846
Your rating: None Average: 4.9 (65 votes)