w2layout.message

message(panel, msgOptions)

指定したパネルを検索し、オブジェクトを返します。

panel: string

パネル名。

msgOptions: object

メッセージパラメータ。

説明

たまに、パネルをロックしてメッセージを表示しなければならないことがあります。 .message()メソッドがそれを可能にします。 この関数はオーバーレイをパネルの上部に表示します。

第2引数のmsgOptionsは以下のプロパティを持つオブジェクトです。

options: {
    html        : '',   // メッセージのHTML。
    body        : '',   // w2popupのbodyに似ており、option.htmlの代わりに使うことができます。
    buttons     : '',   // w2popupのbuttonsに似ており、options.htmlの代わりに使うことができます。
    width       : 10,   // 幅(px) (マイナス値を指定した場合、メッセージボックスの100%の幅になります。)
    height      : 10,   // 高さ(px) (マイナス値を指定した場合、メッセージボックスの100%の高さになります。)
    hideOnClick : true, // trueの場合、クリックされたらメッセージを閉じます。
    onOpen      : null, // メッセージが表示されたら実行する関数。
    onClose     : null  // メッセージが閉じられたら実行する関数。
}

メッセージを表示するには

w2ui['layout'].message('main', {
    width  : 200,
    height : 60,
    html   : '<div class="w2ui-centered"><div style="padding: 10px;">'+
             '        message '+
             '</div></div>'
});

メッセージを閉じるには、もう1回呼び出します。

w2ui['layout'].message('main');

デモ

mainパネルにメッセージを表示しています。 レイアウトをクリックすると、メッセージを閉じます。

JavaScript

$('#layout').w2layout({
    name    : 'mylayout',
    panels  : [
        { type: 'top', content: 'top', size: 40 },
        { type: 'main', content: 'This is main panel' },
    ]
});
w2ui['mylayout'].message('main', {
    width  : 200,
    height : 60,
    html   : '<div class="w2ui-centered"><div style="padding: 10px;">'+
             '表示メッセージです。'+
             '</div></div>'
});
$('#layout').on('click', function() {
    w2ui['mylayout'].message('main');
});