Layout(container, options)

new Layout(container, options)

Layout class make layout element and include groups, control item move and set events.

Parameters:
Name Type Description
container jQuery | HTMLElement | string

Wrapper element or id selector

options object
Properties
Name Type Attributes Default Description
grouplist array

The list of group options.

Properties
Name Type Attributes Description
id string

The group id

ratio number <optional>

The group ratio

items array

The items that the group includes

Properties
Name Type Attributes Description
id string

The item id

contentId string

The content id

title string

The item's title

isClose string <optional>

Whether the item is closed or not

isDraggable string <optional>

Whether the item is draggable or not

usageStatistics Boolean <optional>
true|false

send hostname to google analytics [default value is true]

Example
var container = document.getElementById('layout');
var Layout = tui.Layout; // or require('tui-layout');
var instance = new Layout(container, {
     grouplist: [{
         id: 'g1',
         ratio: 50,
         items: [{
             id: 'item-lifeStyle',
             contentId: 'lifeStyle',
             title: 'Life Style Seciton',
             isClose: false,
             isDraggable: true
         }, {
             id: 'item-calendar',
             contentId: 'calendar',
             title: 'Calendar Seciton',
             isClose: false,
             isDraggable: true
         }, {
             id: 'item-todoList',
             contentId: 'todoList',
             title: 'TodoList Seciton',
             isClose: false,
             isDraggable: true
        }]
    }, {
         id: 'g2',
         ratio: 50,
         items: [{
             id: 'item-weather',
             contentId: 'weather',
             title: 'Weather Seciton',
             isClose: false,
             isDraggable: true
         }, {
             id: 'item-news',
             contentId: 'news',
             title: 'News Seciton',
             isClose: true,
             isDraggable: true
         }]
    }]
});