bootstarpに基づくdailog

ブートストリップの紹介

TwitterのBootstrapは現在、人気のあるフロントエンドフレームワークです。

Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。 TwitterデザイナーのMark OttoとJacob Thorntonによって開発されたCSS/HTMLフレームワークです。

ブートストラップは、エレガントなHTMLおよびCSS仕様を提供します。これは、動的なCSS言語では少ないと書かれています。 Bootstrapは発売以来人気があり、NASAのMSNBCのBreaking Newsを含むGitHubで人気のあるオープンソースプロジェクトでした。 WEX5フロントエンドのオープンソースフレームワークなど、国内のモバイル開発者にとってより馴染みのあるフレームワークは、パフォーマンスの最適化のためのブートストラップソースコードにも基づいています。

1.1。キーワードを文書化するのに役立ちます

BooStrap Modal Box oaodailog

1.2。使用シナリオ

Webページでボタンがクリックされた場合、ユーザーは確認をプロンプトする必要があり、ユーザーは実行を続けることのみであるか、ユーザーが[キャンセル]ボタンをクリックして実行をキャンセルします。

クリックしてWebページで表示すると、表示されたデータをポップアップボックスを使用して表示する必要があります。Oaodailogを使用できます

1.3。概略図

boostrap3.0、jquery1.9に基づくモーダル

1.4。使用する手順

なぜオオダイログが必要なのですか？

a。 boostrap3.0によって提供されるモーダルは、最初にページでモーダルDIV隠されたコードを定義する必要があります。ユーザーは、Divに表示されるコンテンツを書き込みます。ページに複数のモーダルボックスがある場合、複数の非表示のモーダルボックスDIV隠されたコードを書く必要があります。これは間違いなく冗長です。

b。デフォルトのモーダルには確認とキャンセルボタンがないため、もちろん、モーダルボックスの非表示のdivに2つのボタンを書き込むことができますが、確認ボタンをクリックした後に実行される操作を監視するためにJSを書き込む必要もあります。同時に、確認ボタンによって実行される操作は、ポップアップ時にユーザーがクリックしたデータに関連しています。データがどのように渡されるか、Bootstrapは私たちに提供しません。

c。 Oaodailogバージョン1.0.0は、主に、ブートストラップのモーダルボックスと冗長コードの不便な使用の問題を解決します。

複製画像：

始めましょう

1。Oaodailog.jsを紹介します

コード：

 <script type = "text/javascript" src = "$ {ctx} /static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </script>

2。ポップアップボックスを表示するコードを呼び出します

コード：

 oao.dialog（{title： "削除プロンプトボックス" "、content："実際に削除されているかどうかを確認してください。

これは、確認ポップアップボックスを使用するための基本的で最も一般的な方法です。

1.5。 API

oao.dialog（）：この方法は、ポップアップボックスを生成する方法です。渡されたパラメーターはJSONオブジェクトです。もちろん、何も渡すことができず、空白のポップアップボックスがポップアップしますが、これは問題ありません。以下は、各パラメーターの意味とデフォルト値を説明しています。

•oao.dialog.close（）：モーダルボックスを閉じます

1.6。サポートされる機能1。現在、ポップアップボックスのコンテンツはテキストと静的HTMLのみをサポートしており、URL要求をサポートしていません。

2.現在、せいぜい2つのボタンのみを表示でき、カスタムボタンはサポートされていません。

3.ポップアップボックスの現在の位置とサイズは、カスタマイズをサポートしていません

4.現在、一度にポップアップできるポップアップボックスは1つだけで、ポップアップボックスに別のモーダルボックスのポップアップをサポートしていません（Bootstrap Modalは、基礎となるレイヤーではサポートされていません）

お楽しみに、次のバージョンでお会いしましょう。

 /*！* oaodialog 1.0.0*著者：xufei*日付：2015-7-9 1：32* http：//www.oaoera.com* Copyright©2014 www.oaoera.com Inc. Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co.、Ltd。**これはGNU LGPL、バージョン2.1以下でライセンスされています。 function（settings）{var defaultsettings = {title： "provent"、content： ""、okval： "confirm"、cancalval： "cancel"、ok：function（）{$（ "＃oaomodal"）。モーダル（ 'hide'）;}、cancel：function（）{$（ "＃oaomodal"） $ .extend（{}、defaultSettings、settings || {}）; return oao.settings;} oao.initcontent = function（）{var modelhtml = "<div id =/" oaomodal/"class =/" modal fade delete_modal/"tapindex =/" -1/"-1/" DIALOG/" aria-labelledby =/"mymodallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-content/"> "+" <div class =/"modal-header/"> "+" <button/"<button/" class =/"clong =/" data-dismiss =/"Mod-disiss =/" aria-label =/"close/"> <span aria-hidden =/"true/">×</span> </button> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <div class =/"modal-body/" style =/"text-align; class =/"modal-footer/"> "+" <button type =/"button/" class =/"btn btn-default modalcancel/"> </button> "+" <ボタン=/"ボタン/" class =/"btn btn-primary modalok/"> </button> "+"+" $ modelhtml = $（modelhtml）; $（ "。modalok"、$ modelhtml）.text（oao.settings.okval）; $（ "。modalcancel"、$ modelhtml）.text（oao .settings.cancalval）; $（ "。モーダルタイトル"、$ modelhtml）.text（oao.settings.title）; $（ "。モーダルボディ"、$ modelhtm l）.html（oao.settings.content）; if（！oao.settings.ok）{$（ "。modalok"、$ modelhtml）.remove（）;} if（！oao。 settings.cancel）{$（ "。ModalCancel"、$ modelhtml）.Remove（）;} $（ "Body"）。append（$ modelhtml）;} //メソッドポップアップダイアログoao.dialog = function（settings）{settings = oao.init（settings）; oao.initcontent（）; // call method $（ '＃oaomodal'）。 {if（oao.settings.close）{oao.settings.close（）;} $（ "＃oaomodal"）。remove（）;}）if（oao.settings.ok）{$（ "＃oaomodal .modalok"） .modalcancel "）。クリック（settings.cancel）;} $（"＃oaomodal "）。modal（ 'show'）。css（{" margin-top "：function（）{return（this）.height（）/ 2-200）;}}） function（）{$（ "＃oaomodal"）。modal（ 'hide'）;}