YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: Layout Manager: Full Page Layout

Layout Manager: Full Page Layout

This example shows how to build a full page layout.

Using the Layout Manager for a full page layout

We can make a full page layout by omitting the first parameter to the Layout Manager's constructor.

Setting up the Layout Units

Each area of the layout (top, right, bottom, left and center) is made up of a LayoutUnit.

The only required unit is the center unit. It will be the one that is fluid when styled.

We can setup these units by passing them into the unit array configuration option.

Configuring a unit

Each LayoutUnit has its own configuration settings. In the example below we, will show the following options:

  • position: The position that this unit will take in the Layout.
  • header: The string to use for the Header of the unit.
  • width: The width (in pixels) that the unit will take up in the layout.
  • resize: Should the unit be resizable.
  • gutter: The gutter applied to the unit's wrapper, before the content.
  • footer: An id or string to use as the footer of the unit.
  • collapse: Should the unit be collapable. (places an icon in the header)
  • scroll: Should the unit's body have scroll bars if the body content is larger than the display area.
  • body: An id or string to be used as the unit's body
  • animate: Should be animate the expand and collapse moments.

See the API docs for more info on LayoutUnit options.

The HTML for the body

The configuration for the Right unit

Full Example Source

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings