Sets or retrieves panel content.
content(type, [content], [transition])

type | string, name of the panel
content | string or object, new content for the panel (optional)
transition | string, name of the transition (optional)

#### Description

The first argument type is the name of the panel. It can be one of the following:

- top
- left
- main
- right
- preview
- bottom
- css

As of 1.3 there is a hidden panel named css. If you define content for this panel, it will be set within style tag. You can also load content for the css panel w2layout.load method. w2ui['layout'].content('css', '.class1 { color: red }'); or w2ui['layout'].load('css', 'file.css'); The content argument can be either an HTML or an object. If it is an object, then it will assign layout panel's div to the .box property of the object and call .render() method. This allows you to make a grid, sidebar, or any other object with .box property and .render() method as content for the panel. If the argument content is not specified the method will return current content of the panel. // return current content var content = w2ui['layout'].content('main'); console.log('main panel content is', content); You can optionally provide transition argument that defines visual transition to the new content. The transition is done using w2utils.transition() method and it can be one of the following:

- slide-left
- slide-right
- slide-up
- slide-down
- flip-left
- flip-right
- flip-up
- flip-down
- pop-in
- pop-out

You can set content during object creation: $('#layout').w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'main', content: 'This is main panel' }, { type: 'preview', size: 200 } ] }); Or anytime during run-time: // set new content w2ui['layout'].content('main', 'HTML content'); // set content as an object w2ui['layout'].content('main', w2ui['grid']);