w2layout.content

content(type, [content], [transition])

パネルのコンテンツを設定または、取得します。

type: string

パネル名。

content: string, object

パネルに指定するコンテンツ。オプションです。

transition: string

transition名。オプションです。

説明

第1引数のtypeは、パネルの名前を指定します。 名前は以下を指定することができます。

• top
• left
• main
• right
• preview
• bottom
• css

ver1.3移行はcssという隠しパネルがあります。 このパネルを指定した場合、styleを指定することができます。.load()メソッドでcssパネルをロードすることができます。

w2ui['layout'].content('css', '.class1 { color: red }');

or

w2ui['layout'].load('css', 'file.css');

第2引数のcontentは、HTMLまたは、オブジェクトを指定することができます。 オブジェクトの場合、パネルのdivをcommon.boxプロパティに割り当てて、common.render()メソッドを呼び出します。 これにより、Grid、Sidebar等のcommon.boxプロパティと、common.render()メソッドを持ったオブジェクトは、 パネルのコンテンツとして生成することができます。 contentを定義しない場合、パネルのコンテンツを返します。

// 現時点のコンテツを返します。
var content = w2ui['layout'].content('main');
console.log('main panel content is', content);

第3引数のtransitionは、新しいコンテンツの視覚変化を指定することができます。 視覚変化はw2utils.transition()メソッドが使われ、変化内容は以下を指定することができます。

• slide-left
• slide-right
• slide-top
• slide-bottom
• flip-left
• flip-right
• flip-top
• flip-bottom
• pop-in
• pop-out

オブジェクト作成時に指定する場合

$('#layout').w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
        { type: 'preview', size: 200 }
    ]
});

または、オブジェクト生成後に指定します。

// 新しいコンテンツを設定。
w2ui['layout'].content('main', 'HTML content');
// オブジェクトを設定。
w2ui['layout'].content('main', w2ui['grid']);

デモ

レイアウトをクリックすると、mainパネルにグリッドを表示します。

JavaScript

$().w2grid({
    name    : 'mygrid',
    columns : [
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ],
});
$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', content: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
    ]
});
$('#layout').on('click', function() {
    w2ui['mylayout'].content('main', w2ui['mygrid']);
});