This example shows how to build a full page layout.
We can make a full page layout, by omitting the first parameter to the Layout Manager's constructor.
1 | var layout = new YAHOO.widget.Layout({ |
2 | }); |
3 | layout.render(); |
view plain | print | ? |
Each area of the layout (top, right, bottom, left and center) is made up of LayoutUnit
s.
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.
1 | var layout = new YAHOO.widget.Layout({ |
2 | units: [ |
3 | { position: 'top' }, |
4 | { position: 'right' }, |
5 | { position: 'bottom' }, |
6 | { position: 'left' }, |
7 | { position: 'center' } |
8 | ] |
9 | }); |
10 | layout.render(); |
view plain | print | ? |
Each unit 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 bodyanimate
: Should be animate the expand and collapse moments.See the API docs for more info on LayoutUnit options.
1 | <div id="right1"> |
2 | <b>Right 1</b> |
3 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
4 | Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> |
5 | <!-- SNIPPED --> |
6 | </div> |
view plain | print | ? |
1 | { |
2 | position: 'right', |
3 | header: 'Right', |
4 | width: 300, |
5 | resize: true, |
6 | gutter: '5px', |
7 | footer: 'Footer', |
8 | collapse: true, |
9 | scroll: true, |
10 | body: 'right1', |
11 | animate: true |
12 | } |
view plain | print | ? |
1 | <div id="top1"> |
2 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> |
3 | </div> |
4 | <div id="bottom1"> |
5 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> |
6 | </div> |
7 | <div id="right1"> |
8 | <b>Right 1</b> |
9 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> |
10 | <!-- SNIPPED --> |
11 | </div> |
12 | <div id="left1"> |
13 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.</p> |
14 | <!-- SNIPPED --> |
15 | </div> |
16 | <div id="center1"> |
17 | <p id="toggle"><a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a> |
18 | <a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a></p> |
19 | <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, .</p> |
20 | <!-- SNIPPED --> |
21 | </div> |
view plain | print | ? |
1 | (function() { |
2 | var Dom = YAHOO.util.Dom, |
3 | Event = YAHOO.util.Event; |
4 | |
5 | Event.onDOMReady(function() { |
6 | var layout = new YAHOO.widget.Layout({ |
7 | units: [ |
8 | { position: 'top', height: 50, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true }, |
9 | { position: 'right', header: 'Right', width: 300, resize: true, gutter: '5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true }, |
10 | { position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true }, |
11 | { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '5px', collapse: true, close: true, collapseSize: 50, scroll: true, animate: true }, |
12 | { position: 'center', body: 'center1' } |
13 | ] |
14 | }); |
15 | layout.on('render', function() { |
16 | layout.getUnitByPosition('left').on('close', function() { |
17 | closeLeft(); |
18 | }); |
19 | }); |
20 | layout.render(); |
21 | Event.on('tLeft', 'click', function(ev) { |
22 | Event.stopEvent(ev); |
23 | layout.getUnitByPosition('left').toggle(); |
24 | }); |
25 | Event.on('tRight', 'click', function(ev) { |
26 | Event.stopEvent(ev); |
27 | layout.getUnitByPosition('right').toggle(); |
28 | }); |
29 | Event.on('padRight', 'click', function(ev) { |
30 | Event.stopEvent(ev); |
31 | var pad = prompt('CSS gutter to apply: ("2px" or "2px 4px" or any combination of the 4 sides)', layout.getUnitByPosition('right').get('gutter')); |
32 | layout.getUnitByPosition('right').set('gutter', pad); |
33 | }); |
34 | var closeLeft = function() { |
35 | var a = document.createElement('a'); |
36 | a.href = '#'; |
37 | a.innerHTML = 'Add Left Unit'; |
38 | Dom.get('closeLeft').parentNode.appendChild(a); |
39 | |
40 | Dom.setStyle('tLeft', 'display', 'none'); |
41 | Dom.setStyle('closeLeft', 'display', 'none'); |
42 | Event.on(a, 'click', function(ev) { |
43 | Event.stopEvent(ev); |
44 | Dom.setStyle('tLeft', 'display', 'inline'); |
45 | Dom.setStyle('closeLeft', 'display', 'inline'); |
46 | a.parentNode.removeChild(a); |
47 | layout.addUnit(layout.get('units')[3]); |
48 | layout.getUnitByPosition('left').on('close', function() { |
49 | closeLeft(); |
50 | }); |
51 | }); |
52 | }; |
53 | Event.on('closeLeft', 'click', function(ev) { |
54 | Event.stopEvent(ev); |
55 | layout.getUnitByPosition('left').close(); |
56 | }); |
57 | }); |
58 | |
59 | |
60 | })(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings