w2layout.load

load(type, url, [transition], [onLoad])

コンテンツをロードしてパネルに表示します。

type: string

パネル名。

url: string

コンテンツを取得するサーバのURL。

transition: string

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

onLoad: string

コールバック関数。オプションです。

説明

この関数はurlからコンテンツをを取得してパネルに表示します。 コンテンツはテキストまたは、JavaScriptを含まないHTMLでなければなりません。 第1引数のtypeは、パネルの名前を指定します。 名前は以下を指定することができます。

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

第2引数のurlは、コンテンツをロードするサーバのURLです。

第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'].load('main', 'http://domain.com/path/to/file', 'slide-left', function () {
    console.log('content loaded');
});

コンテンツのロードや、表示後にJavaScriptを実行したい場合、 第4引数のonLoadを指定することができます。

デモ

ローディングが完了すると、mainパネルのコンテンツが"load from server."に変わります。

JavaScript

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

// コンテンツを返します
w2ui['mylayout'].load('main', '../content/load.html', 'slide-left', function () {
    console.log('content loaded');
});

HTML

<span>load from server.</span>