さまざまなWeb開発プロセスでは、ダイアログボックスとプロンプトボックスの処理は、非常に一般的なインターフェイス処理テクノロジーです。よく使用すれば、ユーザーに良いページエクスペリエンスを提供できます。同じことがブートストラップ開発にも当てはまります。多くの場合、ポップアップダイアログボックスレイヤーを使用して、追加、編集、表示などのインターフェイスにデータを表示します。削除すると、迅速な確認ボックスを使用できます。操作が成功した場合は、よりリッチなプロンプトボックスを使用して処理できます。この記事では、主にブートストラップ開発で使用されるこれらの技術的ポイントを比較しています。
1。ブートストラップダイアログボックスの使用
通常のブートストラップには、デフォルトの状態を備えた小さなダイアログボックス、中幅のダイアログボックス、フルサイズのダイアログボックスなど、いくつかのサイズのダイアログボックスがあります。ブートストラップのダイアログボックスインターフェイスはとてもフレンドリーです。 ESCキーを使用する場合、またはマウスのある他の空白スペースをクリックすると、ダイアログボックスが自動的に非表示になります。
次のように、それらの定義はまったく異なります。デフォルトの小さなダイアログインターフェイスコード：
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle = "validator" enctype = "multipart/form-data"> <div> <div> <div> <div> <div> <aber> parent id </label> <div> <select id = "pid" name = "pid" typen <入力ID = "name" name = "name" type = "text" placeholder = "name =" name "/> </div> </div> </div> <div> <div> <ablead> remarks </label> <div> <textarea id =" note "name =" note "placeholder =" note ... <入力型= "hidden" id = "id" name = "id"/> <button type = "submit">確認</button> <ボタン= "button =" data-dismiss = "modal"> cancel </button> </div> </form> </div> </div> </div>
近似インターフェイスは次のとおりです。
次のように、上記のコードのダイアログスタイルコードに注意してください。
<div>
他の2つのサイズのデータベースの場合、ここで変更するだけです。以下に示す2つのコードは次のとおりです。
<div>
同様に
<div>
インターフェイス要素のレイアウトに基づいて採用するダイアログレイヤー定義のサイズを決定できますが、これらのダイアログボックスの呼び出し方法は一貫しています。
ダイアログボックスインターフェイスは次のとおりです。
// showは顧客$（ "＃btnselectcustomer"）を選択できます。show（）;
閉じるダイアログボックスインターフェイスは次のとおりです。
$（ "＃add"）。modal（ "hide"）;
一般的に、ポップアップするダイアログボックスは、保存データと同様の提出操作を実行できるフォームです。したがって、フォームのデータを確認する必要があります。エラーがある場合は、インターフェイスでそれを思い出させる必要がある場合があります。したがって、ページが初期化されている場合、フォームの検証ルールを初期化する必要があります。以下は、通常のフォーム初期化操作です。
//関連イベント関数bindevent（）{//フォーム情報が検証$（ "＃ffadd"）に合格するかどうかを判断します（ "verta：" validate "、errorelement： 'span'、errorclass： 'help block-block-error'、focusinginvalid：false、highligh：false：function（element）{ $（ '。form-group'）。 }、errorplacement（エラー、要素）{parent（ 'div'） data $ .Parsejson（json）; }}）。error（function（）{showtips（ "この関数を使用することは許可されていません。"）;}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}）; }}}）; }}}）; }}ただし、一般的にこれらのコードは繰り返されるため、関数をカプセル化し、いくつかのコードを再利用してよりシンプルな処理コードを使用できますが、目標を達成することもできます。
// bind関連イベント機能bindevent（）{// records formalidate（ "ffadd"、function（form）{$（ "＃add"）。モーダル（ "hide"）; // constructパラメーターを背景var postdata = $（ "＃ffadd"）。 $ PARSEJSON（JSON）;それを処理します。 "）;}）;}）; }）; }2. [確認]ダイアログボックスの処理を削除します
1）ブートボックスプラグインの使用
上記の通常のダイアログボックスに加えて、しばしば簡潔な確認ダイアログボックスに遭遇します。上記のコードを使用して確認ダイアログボックスを作成することもできますが、一般的にそれほど面倒である必要はありません。プラグインブートボックスの[確認]ダイアログボックスを使用して処理できます。
bootbox.jsは、Bootstrapフレームワークを使用するときにダイアログボックスをすばやく作成するのに役立つ小さなJavaScriptライブラリであり、必要なDOM要素またはJSイベントハンドラーを作成、管理、削除するのにも役立ちます。
bootbox.jsは、3つの方法を使用して、ネイティブJavaScriptのいくつかの方法を模倣します。それらの正確なメソッドの署名は、それぞれがラベルをカスタマイズしてデフォルト値を指定するためにさまざまなパラメーターを取得するために柔軟ですが、それらはしばしば同じと呼ばれます。
bootbox.alert（メッセージ、コールバック）
bootbox.prompt（メッセージ、コールバック）
bootbox.confirm（メッセージ、コールバック）
必要なパラメーターはアラートのみです。コールバックは、ユーザーの応答を決定するために呼び出しを確認および促すために必要です。アラームコールバックを呼び出す場合でも、ユーザーがダイアログボックスを拒否したときに決定されます。ラッピング方法は母国語のようにブロックできないため、同期するのではなく非同期です。
これらの3つの方法は、パブリックメソッドの4分の1を呼び出します。これは、独自のカスタムダイアログを使用して作成することもできます。
bootbox.dialog（オプション）
詳細については、ドキュメントの詳細については、http：//bootboxjs.com/documentation.htmlを参照してください
アラート
bootbox.alert（ "hello world！"、function（）{emple.show（ "hello world callback"）;}）;確認する
bootbox.confirm（ "確かに？"、function（result）{emple.show（ "reconse："+result）;}）;またはコード：
bootbox.confirm（ "選択したレコードを削除しますか？"、function（result）{//最後のコンマ、ids = ids.substring（0、length -1）; Postdata、json）{var datas（json）; }}）;プロンプト
bootbox.prompt（ "あなたの名前は何ですか？"、function（result）{if（result === null）{example.show（ "PRONT DISTRICSED"）;}カスタムダイアログ
コードとインターフェイスを使用する効果は次のとおりです。
bootbox.dialog（…）
[2）
2）SweetAlertプラグインの使用
上記の効果はブートストラップのスタイルと非常に一致していますが、インターフェイスは少し単調です。上記の効果は私があまり好きなものではなく、以下に示すように、より美しく見える効果に遭遇しました。
この効果は、プラグインSweetAlert（http://t4t5.github.io/sweetalert/）を導入することで実装されます。
SWAL（{タイトル：操作プロンプト "、テキスト：newtips、タイプ："警告 "、showcancelbutton：true、commandbuttoncolor："＃dd6b55 "、cancelbuttontext：" cancel "、cumpentttontext：" yes、execute delete！ "、closeononconfirm：true}、utunt（）{delfuncontion（）;上記の同様のインターフェイス効果を持つ実装コードは次のとおりです。
一般に、以下に示すように、そのポップアップコードは非常にシンプルにすることができます。
3。情報プロンプトボックスの処理
上記の2つの処理は、ポップアップダイアログボックスを使用して実装され、インターフェイスをブロックします。一般的に、私たちは情報のプロンプトを行い、それが私たちのさらなる操作に影響を与えないことを望んでいるか、少なくとも非常に短い自動消失効果を提供することを望んでいます。
ここでは、JNotifyプラグインとトーストプラグインを紹介します。
1）JNotifyプロンプトボックスの使用
jnotifyプロンプトボックス、優れたjquery結果プロンプトボックスプラグイン。フォームを送信した後、ajaxを介して背景に応答し、結果を返し、前景に返品情報を表示します。 jnotifyは、操作結果情報を非常にエレガントに表示できます。 Jnotifyは、jQueryベースの情報プロンプトプラグインであり、3つの情報プロンプトの方法をサポートします。操作の成功、操作の障害、操作リマインダーです。 JNotifyブラウザは非常に優れた互換性、プロンプトコンテンツの変更をサポートし、プロンプトボックスの位置の配置をサポートし、プラグインパラメーターを構成できます。
jsuccess（message、{option}）; jerror（ "操作が失敗しました、再試行してください!!"）; jnotify（ "注：<strong>個人情報を改善してください！</strong>"）;jnotifyパラメーターの詳細な構成：
Autohide：true、//プロンプトバーClickOverlayを自動的に非表示にするかどうか：false、//マスクレイヤーをクリックしてプロンプトバーミニ幅を閉じるかどうか：200、//最小幅タイムシュダウン：1500、//表示時間：Milliseconds shoptimeeffect：200、//ページ上に表示される：Milliseffect：200、// ：15、//プロンプトバーが表示され、隠された水平ポジションが表示されたときの変位：「右」、//水平位置：左、中央、右verticalposition：//垂直位置：トップ、センター、ボトムショーバーレイ：真、//マスクレイヤーカラーオーバーレイを表示するかどうか： "＃000"オンクロースのマスク層の：fn //プロンプトボックスを閉じた後、関数を実行すると、他のjnotifyを再度呼び出すことができます。上記のように、3つの呼び出しが順番に呼び出されます。
以下は、迅速な効果の表示を実現するために、スクリプトクラスにカプセル化されたパブリックメソッドです。
//エラーまたはプロンプトメッセージ（JNOTIFY関連ファイルが必要）関数Showerror（TIPS、TIMESHOWN、AUTOHIDE）{JERROR（TIPS、{autoHide：autoHide：autoHide || true、// v2.0 Timeshown：Timeshown || 1500、 oncompleted：function（）{// v2.0 // alert（ 'jnofityが完了！'）;} //プロンプトメッセージ関数ショーチップ（Tips、Autohide）{jsuccess（tips、{autohide：autohide || true || addidal：timeshown： 'center'、verticalposition： 'top'、showoverlay：true、coloroverlay： '＃000'、oncompleted：function（）{// v2.0 // alert（ 'jnofityが完了！}）;このようにして、Ajaxの投稿方法を使用すると、さまざまなニーズに応じて促すことができます。
var postdata = $（ "＃ffadd"）。serializearray（）; $ .post（url、postdata、function（json）{var data = $ .parsejson（json）; if（data.success）{//ポートレートのアップロード処理を追加$（ '＃file-portrait'）。 Showerror（ "Save Failed：" + data.errormessage、3000）; erser（）{showtips（ "この関数を使用することは許可されていません。2）Toastrプラグインの使用
ToAstrは、GNOME/Growlスタイルの非ブロックページメッセージリマインダーを作成するためのJavaScriptライブラリです。 、To -astrは、成功、エラー、警告、およびプロンプトの4つの通知モードを設定できます。プロンプトウィンドウとアニメーション効果の位置は、エネルギー数で設定できます。公式ウェブサイトでは、パラメーターを選択してJSを生成できます。これは非常に便利です。
プラグインアドレスはhttp://codeseven.github.io/toastr/
次の効果を作成できます：警告、危険、成功、迅速なダイアログ情報、効果は次のとおりです。
その使用JSコードを以下に示します。
//警告を表示して、タイトルtoastr.warning（「私の名前はイニゴモントーヤです。あなたは私の父を殺しました、死ぬ準備をします！」）//成功を示し、タイトルを示します。 toastr.clear（）
このプラグインのパラメーター定義は次のとおりです。
//パラメーターの設定、デフォルト値が使用される場合、次の生成toAstr.options = {"closebutton"：false、//閉じるボタンを表示するかどうか "debug"：false、//デバッグモード「ポジショニングクラス」：「トーストトップフルウィッド」：「トーストトップフルウィッス」 //「タイムアウト」を消すアニメーション時間：「5000」、//ディスプレイ時間「拡張時間」：「1000」、//拡張ディスプレイ時間「ショーエイジング」：「スイング」、//ディスプレイ中のアニメーションバッファリングメソッド「隠し」：「リニア」、//アニメーションバッファリングメソッド// ANIMATIONメソッドが消えるとき}; //成功は$（ "＃success"）をbindするようにプロンプトします。上記は、プロジェクトのダイアログボックスとプロンプトボックスの処理と最適化の経験の私の要約です。誰もがWebインターフェイスを学び、改善することが役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください！