Last modified date : 2019/01/31

使い方

$.MTAppMsg({
    msg: '',
    type: 'info',
    parent: false,
    timeout: 0,
    animation: 'fadeOut'
});

オプション設定は下記の通りです。msg は必須です。

オプション

msg(Type : String, Default : '')

表示させたいメッセージの内容を設定します。HTML タグも使えます。

type(Type : String, Default : 'info')

info、success、error のいずれかを設定します。タイプによってメッセージの背景色が違います。初期値は info です。
error を設定した場合は閉じるボタンは表示されません。

type: info の場合

type: success の場合

type: error の場合

parent(Type : Boolean, Default : false)

通常のメッセージ部分の出力ソースコードは次のようになっています。

<div class="msg msg-info">
  <p class="msg-text">表示されるメッセージ</p>
  <span class="mt-close-msg close-link clickable icon-remove icon16 action-icon">閉じる</span>
</div>

このうち、表示されるメッセージを囲む p 要素を削除し、div.msg 要素に直接 msg オプションの値を出力する場合は、parent オプションに true を設定します。

<div class="msg msg-info">
  表示されるメッセージ
  <span class="mt-close-msg close-link clickable icon-remove icon16 action-icon">閉じる</span>
</div>

timeout(Type : Number, Default : 0)

0 を超える数値を設定すると、一定時間経過後にメッセージが非表示になります。
単位はミリ秒です(3 秒の場合は 3000)。

animation(Type : String, Default : 'fadeOut')

非表示になる際のアニメーションを指定します。設定できる値は 'fadeOut' または 'slideUp' です。
初期値は 'fadeOut' です。

サンプル

type: info のメッセージを表示させる場合は次のコードを user.js に記述します。

$.MTAppMsg({
    msg:  '表示させるメッセージinfo',
    type: 'info'
});

type: success のコードを 5 秒後にスライドアップアニメーションで非表示にする場合は、次のコードを user.js に記述します。

$.MTAppMsg({
    msg:  '表示させるメッセージsuccess',
    type: 'success',
    timeout: 5000,
    animation: 'slideUp'
});

また、次のようなコードを user.js に記述すれば、メッセージ部分に YouTube 等の動画を表示させることも可能です。

<mt:SetVarBlock name="msg"><iframe width="560" height="315" src="http://www.youtube.com/embed/ESTFQB6XOmM" frameborder="0" allowfullscreen></iframe></mt:SetVarBlock>
$.MTAppMsg({
  msg:  '<mt:Var name="msg" encode_js="1">',
  type: 'info'
});