Dailog basierend auf BootStarp

Einführung in Bootstrip

Bootstrap von Twitter ist derzeit ein beliebtes Front-End-Framework.

Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller. Es wurde vom Twitter -Designer Mark Otto und Jacob Thornton entwickelt und ist ein CSS/HTML -Framework.

Bootstrap bietet elegante HTML- und CSS -Spezifikationen, die in der dynamischen CSS -Sprache weniger geschrieben sind. Bootstrap war seit seiner Einführung beliebt und war ein beliebtes Open -Source -Projekt auf Github, einschließlich der Breaking News von MSNBC der NASA. Frameworks, die den inländischen mobilen Entwicklern, wie dem WEX5 Front-End Open Source Framework, besser bekannt sind, basieren auch auf dem Bootstrap-Quellcode für die Leistungsoptimierung.

1.1. Helfen Sie, Schlüsselwörter zu dokumentieren

Boostrap Modal Box Oaodailogog

1.2. Nutzungsszenarien

Wenn eine Schaltfläche auf eine Webseite klickt, muss der Benutzer die Bestätigung auffordern und der Benutzer nur weiter ausführen oder der Benutzer auf die Schaltfläche Abbrechen klickt, um die Ausführung abzubrechen.

Wenn Sie auf der Webseite angezeigt werden und die angezeigten Daten mit einem Popup-Feld angezeigt werden müssen, können Sie Oaodailog verwenden

1.3. Schematischer Diagramm

Modal basierend auf Boostrap3.0, jQuery1.9

1.4. Anweisungen zur Verwendung

Warum brauchst du Oaodailog?

A. Da das von Boostrap3.0 bereitgestellte Modal ein Modal Div -versteckter Code zuerst definiert werden muss. Der Benutzer schreibt den Inhalt, der in die DIV angezeigt wird. Wenn eine Seite über mehrere Modalfelsen verfügt, müssen mehrere versteckte Modalboxen Div -Codes geschrieben werden, was zweifellos überflüssig ist.

B. Da das Standardmodal keine Bestätigungs- und Abbrechen -Taste hat, können wir natürlich zwei Schaltflächen in die versteckte Div des Modal -Box schreiben, aber wir müssen auch JS schreiben, um die nach dem Klick der Bestätigungsschaltfläche ausgeführten Operationen zu überwachen. Gleichzeitig bezieht sich die von der Bestätigungsschaltfläche durchgeführten Vorgänge mit den vom Benutzer angeklickten Daten, die beim Popup geklickt wurden. Wie die Daten übergeben werden, bietet uns Bootstrap nicht mit.

C. Die Oaodailog -Version 1.0.0 löst hauptsächlich das Problem der unbequemen Verwendung von Modalboxen mit Bootstrap und dem redundanten Code.

Reproduktionsbild:

Fangen an

1. Einführung von oaodailog.js

Code:

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

2. Rufen Sie den Code an, der das Popup-Box anzeigt

Code:

 oao.dialog ({title: "Eingabeaufforderung Box löschen", Inhalt: "Bitte bestätigen Sie, ob es wirklich gelöscht wird, es wird nach dem Löschen nicht wiederhergestellt!", OK: function () {oao.dialog.close ();}});

Dies ist eine grundlegende und häufigste Möglichkeit, die Bestätigungs-Popup-Box zu verwenden.

1.5. API

OAO.DIALOG (): Diese Methode ist eine Methode, um eine Popup-Box zu generieren. Der übergebene Parameter ist ein JSON -Objekt. Natürlich können Sie nichts übergeben und eine leere Popup-Box wird auftauchen, was kein Problem ist. Im Folgenden beschreibt die Bedeutung und Standardwerte jedes Parameters.

• oao.dialog.close (): Schließen Sie die Modalbox

1.6. Die Funktionen, die unterstützt werden sollen. Derzeit unterstützt der Inhalt des Popup-Felds nur Text und statische HTML und unterstützt keine URL-Anfragen.

2. Derzeit können höchstens zwei Tasten angezeigt werden und benutzerdefinierte Tasten werden nicht unterstützt.

3. Die aktuelle Position und Größe des Popup-Boxs unterstützt keine Anpassung

4. Derzeit kann jeweils nur eine Pop-up-Box auftauchen, und es unterstützt nicht, dass ein weiteres Modal-Box in der Popup-Box aufgebaut wird (Bootstrap-Modal wird in der darunter liegenden Ebene nicht unterstützt).

Bleib dran, wir sehen uns in der nächsten Version.

 /*!* Oaodialog 1.0.0* Autor: xufei* Datum: 2015-7-9 1: 32* http: //www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. Alle Rechte vorbehalten. Shanghai ICP Nr. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** Dies ist unter der GNU LGPL, Version 2.1 oder später. Funktion (Einstellungen) {var defaultSettings = {Titel: "Eingabeaufforderung", Inhalt: "", Okval: "Bestätigung", Cancalval: "Cancel", OK: Funktion () {$ ("#oaomodal"). modal ('hide');}, absag: function () {$ (##Oaomodal ". $ .extend ({}, defaultSetings, Einstellungen || {}); return oao.setings;} oao.initContent = function () {var modelHtml = "<divid =/" oaomodal/"class =/" modal fade delete_modal/"tabindEx =/"-1/"/"-". aria-labelledBy =/"myModallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal content/" "+" <div class aria-label =/"close/"> <span aria-hidden =/"true/"> × </span> </button> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <div class =/"modal-body/" style =/"style =/" text-align: center: center: center: center: center: center: center; class=/"modal-footer/">"+" <button type=/"button/" class=/"btn btn-default modalCancel/"></button>"+" <button type=/"button/" class=/"btn btn-primary modalOK/"></button>"+" </div>"+" </div>"+" </div>"+" </div>";var $ modelhtml = $ (modelHtml); $ (". Modalok", $ modelHtml) .Text (oao.setings.okval); .Settings.cancalval); $ (". Modal-title", $ modelhtml) .Text (oao.Setings.title); $ ("Modal-Body", $ modelhtm l) .html (oao.setings.content); if (! oao.setings.ok) {$ (". modalok", $ modelHtml) .remove ();} if (! oao. Settings.cancel) {$ (". modalcancel", $ modelhtml) .remove ();} $ ("body"). append ($ modelhtml);} // Methode Für das Pop-up-Dialog oao.dialog = Funktion (Einstellungen) {Einstellungen = oao.init (Einstellungen); {if (oao.setings.close) {oao.setings.close ();} $ ("#oaomodal"). remove ();}) if (oao.settings.ok) {$ ("#oaomodal .modalok"). click (setting.ok); .modalcancel "). click (Settings.cancel);} $ ("#oaomodal "). modal ('show'). css ({" margin-top ": function () {return ($ ($) .Height ()/ 2-200); function () {$ ("#oaomodal"). modal ('hide');}