Clever Geek Handbook

プロジェクトの美しいダイアログ用のMUX.Dialogプラグイン

このプラグインを使用すると、Mootools Webプロジェクトでメッセージと小さなフォームを簡単かつエレガントに表示できます。



主な機能



  1. フル機能の対話。 これは、モダリティ、マルチウィンドウ、Escのクローズ、ドラッグ、ドラッグ（オプション）、ボタンやその他の便利な機能を追加する便利なメカニズムがすぐに使えることを意味します。 同時に、すべてが非常に控えめです。
  2. ダイアログをカスタマイズおよび操作するためのシンプルなAPI。
  3. CSSによるスタイル設定。つまり、外観に関連するすべてのプロパティではなく、動作に関連するプロパティの多くがCSSファイルで再定義できることを意味します。つまり、プロジェクトのスタイルにダイアログを簡単に入力できます（例を参照）。
  4. イベントを使用すると、対話動作の重要な瞬間をキャプチャし、独自の動作でそれらを補完できます。
  5. MUX.Loaderですぐに使用できますが、使用しない場合は必要ありません。 ローダーファイルをダイアログに添付するだけです。アニメーション自体はsubmit



    イベントの前に開始され、閉じると停止します。
  6. 完全なドキュメントと例 。


github https://github.com/lavmax/MUX.Dialogのプロジェクト。



IE7 +、FF3 +、Chrome、Safari、Operaの最新バージョンでテスト済み。



使用とカスタマイズのいくつかの例



メッセージと閉じるための十字ボタンを備えた最も単純なモーダルダイアログの作成と表示 

 new MUX.Dialog({ content: new Element('p', {html: '   . .'}) });


典型的なモーダルメッセージの作成と表示 

 new MUX.Dialog({ title: '!', content: new Element('p', {html: '   . .'}), buttons: [{ title: '  ', click: 'close' }] });


イベントを操作する 

 new MUX.Dialog({ title: '!', content: new Element('p', {html: '   . .'}), buttons: [{ title: '  ', click: 'submit' }], onOpen: function() { //     . //         //    ,   . this.content.getElement('my-selector').doSomething(); }, onSubmit: function() { //       '  '. var self = this; new Request({ ..., onFailure: function(xhr) { ... self.loader.stop(); }, onSuccess: function(responseText, responseXML) { ... self.close(); } }).post(); }, onClose: function() { //  onClose     , //  ..     . //     // (         ). this.loader.stop(); } });




スタイルの操作-マウスカーソルを変更します。 デフォルトでは、見出しとドラッグアンドドロップコースのコーナーは矢印の形をしています。 たとえば、移動とウィンドウ拡張の矢印を作成する場合は、次のスタイルをCSSに追加します。 

 .mux-dialog-header { cursor: move; } .mux-dialog-resize-icon { cursor: se-resize; }




作業ダイアログとコードのその他の例 。

すべての可能なオプション、イベント、およびメソッドの説明はこちら 。



このライブラリを書く前に、Mootools Forge、Mocha UI、ExtJS、jQueryUIにあるすべてのことを知りました。 しかし、不必要な紛争を引き起こさないように、リストされている各ライブラリが私に合わなかった理由を説明することは控えます。 誰もが自分で決めるでしょう。



私は、すべての側面（外観、使用、コード）に関するコメントの建設的な批判に本当に依存しています。 このライブラリを作業中のプロジェクトで使用する場合は、PMまたはgithubでお知らせください。githubでプロジェクトへのリンクを投稿できます。


More articles:


All Articles