bit part Products
MTAppjQuery P7

MTAppMsg

管理画面上部に MT 標準スタイルの通知メッセージを表示する。info/success/error、閉じるボタン、一定時間後の自動非表示に対応。

管理画面の上部（#content-header）に、Movable Type 標準スタイルの通知メッセージを表示する静的メソッドです。保存完了やエラーなどの状態を、画面上部のメッセージ領域に出すのに使います。種別（info / success / error）や一定時間後の自動非表示を指定できます。

構文

$.MTAppMsg(options);

静的メソッド（$.MTAppMsg）です。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ型既定値説明
msgstring''表示するメッセージ。HTML としてそのまま描画されます（<br> 等を使えます）
typestring'info'メッセージ種別。'info' / 'success' / 'error'
parentbooleanfalsetrue で p.msg-text ラッパーを省き、msg を直接コンテナに入れる
timeoutnumber01 以上で、その時間（ミリ秒）経過後にメッセージを自動的に隠す
animationstring'fadeOut'自動非表示時のアニメーション。'fadeOut' / 'slideUp'

戻り値

なし（undefined）。

使用例

// 3秒後に自動で消える成功メッセージ
$.MTAppMsg({ msg: '保存しました', type: 'success', timeout: 3000 });

// エラーメッセージ（閉じるボタンは付かない）
$.MTAppMsg({ msg: '入力に誤りがあります', type: 'error' });

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $.MTAppMsg({ msg: '保存しました', type: 'success', timeout: 3000 });
    }
})(jQuery);

生成される HTML

#content-header の末尾にメッセージ要素が追加されます。

<div class="msg msg-success">
    <p class="msg-text">保存しました</p>
    <span class="mt-close-msg close-link clickable icon-remove icon16 action-icon">閉じる</span>
</div>

補足

  • type が 'error' 以外のときは「閉じる」ボタンが付き、クリックでメッセージを消せます（error のときは付きません）。
  • parent: true のときは p.msg-text ラッパーを省き、msg をそのまま div.msg 内に置きます（自前の HTML で組み立てたいとき向け）。
  • timeout を 1 以上にすると、メッセージを表示した時点から計測し、指定ミリ秒後に animation（既定 fadeOut）で自動的に隠します。
  • msg は HTML としてそのまま描画されるため、信頼できない値（編集者の入力値など）を渡さないでください。
  • MTAppGetLabel のラベル一覧表示や MTAppDebug のページ情報表示など、他のメソッドの内部でも利用されています。

関連

  • MTAppDialogMsg — jQuery UI のダイアログでメッセージを表示する。
  • MTAppshowHint — 要素にホバーで吹き出しヒントを表示する。