Webインターフェースを開発する場合、ポップアップ（モーダル）ポップアップウィンドウを使用するか、メッセージを表示する必要があることがよくあります。 上部の検索エンジンは、 「Colorbox」のような退屈した退屈なプラグインを表示します。 私は彼について何も悪いことは言いませんが、それはかなり一般的であり、どういうわけか私の目または何かに飽きてきました。
魂は、あらゆるインターフェース設計に適した、新しい普遍的なものを求めています。
したがって、ポップアップウィンドウの形式でjQueryメッセージ出力プラグインを導入したいと思います。その名前は、サッカーの世界でよく知られている「Messi」（MESsage SImple）です。 それでは、始めましょう...
1.プラグインのインストール：
- jQueryライブラリーを接続します。
- GithubリポジトリからMessiプラグインをダウンロードします。
- ファイルmessi.cssおよびmessi.jsをプロジェクトフォルダーにコピーします。
- スタイルとスクリプトをプロジェクトに接続します。
<link rel="stylesheet" href="messi.min.css" /> <script src="messi.js"></script>
2.プラグインオプション：
- 「自動クローズ」-「x」ミリ秒後にウィンドウを閉じます。 デフォルト：null
- 「ボタン」-ウィンドウのフッターにあるボタンの配列。例：[{id： 'ok'、label： 'OK'、val： 'OK'、btnClass： ''}]。 デフォルト：[]
- 「コールバック」-ウィンドウを閉じた後に関数を呼び出します。 デフォルト：null
- 「中央」-ウィンドウを画面の中央に揃えます。 デフォルト：true
- 「CloseButton」-ウィンドウヘッダーに「閉じる」ボタンを表示します。 デフォルト：true
- 「高さ」-コンテンツを含むブロックの高さ。 デフォルト： 'auto'
- 「タイトル」-ウィンドウのタイトル。 デフォルト：null
- "TitleClass"-ウィンドウタイトルクラス：情報、警告、成功、エラー、アニメーション。 デフォルト：null
- 「モーダル」-モーダルウィンドウのモード（追加レイヤーの読み込み-調光）。 デフォルト：false
- "ModalOpacity"-調光の透明度（モーダルモードのみ）。 デフォルト：.2
- 「パディング」-コンテンツブロックのインデント。 デフォルト： '10px'
- 「表示」-ロード後にウィンドウを表示します。 デフォルト：true
- 「アンロード」-ウィンドウを閉じた後、DOMからプラグインをアンロードします。 デフォルト：true
- 「ビューポート」-ウィンドウの位置を設定します（「中央」オプションが設定されていない場合）。 例：{top： '0px'、left： '0px'}
- 「幅」-ウィンドウの幅。 デフォルト： '500px'
- "ZIndex"-CSSプロパティ：z-index。 デフォルト：99999
3.プラグインの使用：
簡単なメッセージ：
new Messi('This is a message with Messi.');
見出し付きで投稿：
new Messi('This is a message with Messi.', {title: 'Title'});
モーダルモードのメッセージ：
new Messi('This is a message with Messi in modal view. Now you can\'t interact with other elements in the page until close this.', {title: 'Modal Window', modal: true});
任意の位置による投稿：
new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}});
ボタン付きのメッセージ：
new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]});
関数を呼び出してボタン付きのメッセージ（yes / no）：
new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }});
ボタン付きメッセージ（はい/いいえ/キャンセル）+ボタンクラス：
new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success'}, {id: 1, label: 'No', val: 'N', btnClass: 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]});
タイトル：成功：
new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]});
タイトル：情報：
new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]});
タイトル：エラー（アニメーション）：
new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]});
タイトル：警告（アニメーション）：
new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]});
Messi.alert（）の使用：
Messi.alert('This is an alert with Messi.');
Messi.ask（）の使用：
Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); });
Messi.load（）の使用：
Messi.load('ajax.html');
Messi.img（）の使用：
Messi.img('messi.jpg');
デモ： http : //marcosesperon.es/apps/messi/
Github： https : //github.com/marcosesperon/Messi
ボタンのスタイル ： http : //twitter.github.com/bootstrap/
PS ...他に誰がスペイン人ではないような名前を思いついたでしょうか（ファンは私を理解するでしょう）。