jQuery学習記(2) -- jqueryを使って様々なモーダルプロンプトボックスコードとプロジェクト構造を実装する

長い間モーダルフレームを実装したいと思っていて、たくさんのjqueryプラグインを探しましたが、今回満足のいくものに出会えませんでした。まだ開発段階なので、ドキュメント API さえありません。それを理解するのに長い時間がかかりました。

まずコードを見てみましょう。ソース コードを見て、必要な効果をカスタマイズしました。

コードをコピーします コードは次のとおりです: pageEncoding="utf-8" %> &lt ;!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> JQueryMagicDialog #btn{ 上: 50px; 左: 250px> $(function(){ $('.dlgDemoBtn').click(function(){ var el = $(this), act = el.attr('action '); switch(act){ case 'basic': $(' ').mac('dialog',{ タイトル: ' プロンプト'、 モデル: true、 autoOpen: true、 幅: 200、 ドラッグ可能: true、 el: ' あなたが私をクリックしました！

' }); break; case 'extended': title: 'プロンプト', message: '{ を押してください0} でウィンドウを閉じることができます。'、 パラメータ: [' ESC/Enter ']、 ボタン: [{ テキスト: '確認'、 クリック: function(d){ d.close(); }] }); break; case 'wait': var h = mac .wait('このウィンドウは 3 秒後に自動的に閉じます'); window.setTimeout(function(){ h.close(); }, break; > case 'alert': mac.alert('Hello!'); break; case 'confirm': mac.confirm(' よろしいですか? ', function(){ alert('はいをクリックしました!'); break case 'customize': mac.confirm(' &lt ;p>よろしいですか?

', null, null, [{ text: 'Close', click: function(d){ d.close(); 🎜 >} },{ テキスト: '確認', クリック: function(d){ d.close(); }]); > ブレーク; } }); " btn"> 基本 拡張 ; スピナー アラート 確認 カスタマイズ ;

プロジェクト全体の構造を次の図に示します。

このうち、css フォルダーと Images フォルダーには必要な css ファイルと画像が含まれており、js フォルダーには必要な js ファイルが含まれています。これらのファイルが必要になる機能は今後たくさんあります。動的プロンプト ボックスは、小さな機能の 1 つにすぎません。つまり、magicDialog フォルダー内のファイルです。

OK、dialogDemo.jsp ファイルを実行すると、ページは次のようになります:

エフェクトを投稿してください!

「 基本 」をクリックします:

「スピナー 」をクリックします:

「カスタマイズ」をクリックします:

全体として、これは非常に優れたプラグインです。IE9 および Chrome ブラウザでテストした場合は正常に動作しますが、ポップアップ ボックスは Chrome ブラウザでのドラッグをサポートしていますが、IE9 ではサポートしていません。

具体的なソース ファイルについては、公式 Web サイト http://boarsoft.com/cn/ を参照してください。他にもたくさんの例がありますので、今後 1 つずつ試していきます。

これは私の研究結果であり、転載は許可されており、連絡は歓迎されますが、転載する前にこの記事のリンクアドレスを記載する必要があります。

jQuery学習記(2) -- jqueryを使って様々なモーダルプロンプトボックスコードとプロジェクト構造を実装する_jquery