In verschiedenen Webentwicklungsprozessen ist die Verarbeitung von Dialogfeldern und Eingabeaufforderungsfeldern eine sehr häufige Schnittstellenverarbeitungstechnologie. Wenn es gut verwendet wird, kann es den Benutzern ein gutes Seitenerlebnis bieten. Gleiches gilt für die Entwicklung von Bootstrap. Wir verwenden häufig das Dialogfeld mit Pop-up-Dialogfeldschichten, um Daten an Schnittstellen wie Hinzufügen, Bearbeiten und Anzeigen von Details anzuzeigen. Beim Löschen kann ein Eingabeauftragsbestätigungsbox verwendet werden. Wenn der Vorgang erfolgreich ist, können wir eine reichhaltigere Eingabeaufforderung verwenden, um sie zu verarbeiten. Dieser Artikel vergleicht hauptsächlich diese technischen Punkte, die in der Bootstrap -Entwicklung verwendet werden.
1. Verwendung des Bootstrap -Dialogfelds
Die reguläre Bootstrap verfügt über mehrere Größen von Dialogfeldern, einschließlich kleiner Dialogfelder mit Standardstatus, Dialogfeldern mit mittlerer Breite und Dialogfeldern in voller Größe. Die Dialogfeld -Schnittstelle von Bootstrap ist sehr freundlich. Wenn wir die ESC -Taste verwenden oder mit der Maus auf andere leere Leerzeichen klicken, wird das Dialogfeld automatisch versteckt.
Ihre Definitionen sind einfach unterschiedlich, z. B. folgendermaßen ist der Standardcode für kleine Dialoginterfas -Schnittstellen:
<! --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ data-toggle = "validator" engType = "MultiPart/Form-Data"> <div> <div> <div> <div> <Label> Übergeordnete ID </Label> <div> <select id = "pid" name = "pid" type = "text <input id="Name" name="Name" type="text" placeholder="name..." /> </div> </div> </div> <div> <div> <label>Remarks</label> <div> <textarea id="Note" name="Note" placeholder="Note..."></textarea> </div> </div> </div> </div> </div> </div> </div> <div> <Eingabe type = "Hidden" id = "id" name = "id"/> <button type = "subieren"> bestätigen </button> <button type = "button" "data-dismiss =" modal "> abbrechen </button> </div> </form> </div> </div> </div> </div>
Die ungefähre Schnittstelle lautet wie folgt:
Achten Sie auf den Dialog -Style -Code im obigen Code wie folgt:
<div>
Wenn es sich um eine Datenbank der beiden anderen Größen handelt, müssen Sie sie hier nur ändern. Die beiden unten gezeigten Codes sind:
<div>
sowie
<div>
Wir können entscheiden, welche Größe der Dialogschicht -Definition anhand des Layouts von Schnittstellenelementen angenommen werden soll. Die Anrufmethoden dieser Dialogfelder sind jedoch konsistent.
Die Schnittstelle des Dialogfelds lautet wie folgt:
// Show kann Customer $ ("#BtnSelectCustomer") auswählen. Show ();Das Schließdialogfeld Schnittstelle lautet wie folgt:
$ ("#add"). modal ("hide");Im Allgemeinen ist das von uns angegebene Dialogfeld ein Formular, das Einreichungsvorgänge ausführen kann, die dem Speichern von Daten ähnlich sind. Daher ist es notwendig, die Daten des Formulars zu überprüfen. Wenn ein Fehler vorliegt, müssen wir ihn möglicherweise an der Schnittstelle erinnern. Wenn die Seite initialisiert wird, müssen daher die Überprüfungsregeln des Formulars initialisiert werden. Nachfolgend sind unsere regulären Formularinitialisierungsvorgänge aufgeführt.
// Die verwandte Ereignisfunktion BindEvent () {// beurteilen, ob die Forminformationen Überprüfung $ ("#ffadd"). Validate ({meta: "validate", Fehlerelement: 'span', Fehlerklasse: 'Help-Block-Help-Block-Fehler', FocusInvalid: false, highlight: Funktion (Element) {{{{{{{{{{{{{{{{{{{ $ (Element) .CLOSEST ('. Formgruppe'). Fehler: Funktion (Fehler) {Element.Parent ('Div'). Anhänge (Fehler); = $ .PARSEJSON (JSON); }}). Fehler (function () {showtips ("Sie sind nicht autorisiert, diese Funktion zu verwenden, bitte wenden Sie sich an den Administrator, um sie zu verarbeiten.");}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Im Allgemeinen werden diese Codes jedoch sehr wiederholt, sodass wir Funktionen zusammenfassen und einen Code wiederverwenden können, um einen einfacheren Verarbeitungscode zu verwenden, aber wir können auch das Ziel erreichen.
// Verbindungsbezogene Ereignisse function BindEvent () {// Records formvalidat ("ffadd", function (Form) {$ ("add"). Modal ("hide"); // Konstruktparameter an den Hintergrund var postdata = $ ("#ffadd"). $ .PARSEJSON (JSON); Administrator, um damit umzugehen. ");});}); }); }2. Dialogfeld Bestätigung löschen
1) Verwendung des Bootbox-Plug-Ins
Zusätzlich zum regulären Dialogfeld oben begegnen wir häufig auf ein prägnantes Dialogfeld zur Bestätigung. Obwohl der obige Code auch zum Erstellen eines Bestätigungsdialogfelds verwendet werden kann, ist es nicht erforderlich, im Allgemeinen so problematisch zu sein. Sie können das Dialogfeld Bestätigungsdialog der Plug-in-Bootbox verwenden, um es zu verarbeiten.
Bootbox.js ist eine kleine JavaScript -Bibliothek, mit der Sie beim Verwenden des Bootstrap -Frameworks schnell ein Dialogfeld erstellen und alle erforderlichen DOM -Elemente oder JS -Event -Handler erstellen, verwalten oder löschen können.
Bootbox.js verwendet drei Methoden, um ihre nativen JavaScript einige Methoden nachzuahmen. Ihre genaue Methodensignatur ist für jeden von ihnen flexibel, um verschiedene Parameter zu nehmen, um das Etikett anzupassen und die Standardwerte anzugeben. Sie werden jedoch häufig als dasselbe bezeichnet:
Bootbox.Alert (Nachricht, Rückruf)
Bootbox.prompt (Nachricht, Rückruf)
Bootbox.Confirm (Nachricht, Rückruf)
Die einzigen erforderlichen Parameter sind Alarmmeldungen. Der Rückruf ist erforderlich, um Anrufe zu bestätigen und fordern, um die Antwort des Benutzers zu bestimmen. Auch wenn das Aufrufen des Alarm -Rückrufs bestimmt wird, wenn der Benutzer das Dialogfeld ablehnt, da unsere Verpackungsmethode nicht so blockieren kann, wie seine Muttersprache nützlich ist: Sie sind eher asynchron als synchron.
Diese drei Methoden rufen ein Viertel einer öffentlichen Methode an, die Sie auch mit Ihrem eigenen benutzerdefinierten Dialog erstellen können:
Bootbox.Dialog (Optionen)
Weitere API -Hilfedokumentation finden Sie unter: http://bootboxjs.com/documentation.html
Alarm
Bootbox.Alert ("Hello World!", Function () {example.show ("Hello World Callback");});Bestätigen
bootbox.confirm ("Sind Sie sicher?", Funktion (Ergebnis) {example.show ("Ergebnis bestätigen:"+result);});Oder Code:
bootbox.confirm("Are you sure you delete the selected record?", function (result) { if (result) { //Finally remove the last comma, ids = ids.substring(0, ids.length - 1); //Then send the asynchronous request information to the background to delete the data var postData = { Ids: ids }; $.get("/Province/DeletebyIds", Postdata, Funktion (JSON) {var data = $ .Parsejson (JSON); }});Prompt
bootbox.prompt ("Wie heißt Ihr Name?", Funktion (Ergebnis) {if (result === null) {example.show ("Eingabeaufforderung entlassen");} else {example.show ("hi <b>"+result+"</b>");}});Benutzerdefinierter Dialog
Der Effekt der Verwendung des Codes und der Schnittstelle ist wie folgt:
Bootbox.Dialog (…)
[2)
2) Verwendung des SweetAlert-Plug-Ins
Obwohl der obige Effekt sehr übereinstimmt, ist die Grenzfläche ein wenig eintönig. Der obige Effekt ist nicht das, was ich sehr mag, ich habe einen Effekt begegnet, der schöner aussieht, wie unten gezeigt.
Dieser Effekt wird durch Einführung des Plugin SweetAlert (http://t4t5.github.io/sweetalert/) implementiert.
SWAL ({Titel: "Operation prompt", text: newtips, Typ: "WARNUNG", showcancelbutton: true, conf.Der Implementierungscode mit ähnlichen Schnittstelleneffekten oben ist wie folgt:
Im Allgemeinen kann sein Popup-Code sehr einfach gemacht werden, wie unten gezeigt.
A. Verarbeitung von Informations -Eingabeaufforderung Box
Die obige zwei Verarbeitung wird mithilfe von Popup-Dialogfeldern implementiert und blockiert die Schnittstelle. Im Allgemeinen führen wir Informationsaufforderungen durch, in der Hoffnung, dass sich dies nicht auf unsere weiteren Vorgänge auswirkt oder zumindest einen sehr kurzen automatischen Verschwindeneffekt liefern.
Hier werden wir also das JNOTIFY-Plug-In- und Toast-Plug-In vorstellen.
1) Verwendung von Jnotify -Eingabeaufforderung Box
Jnotify Eingabeaufforderung Box, ein ausgezeichnetes JQuery -Ergebnis -Eingabed -Box -Plugin. Nachdem wir das Formular eingereicht haben, antworten wir über Ajax auf den Hintergrund und geben die Ergebnisse zurück und zeigen die Rückgabeinformationen im Vordergrund an. JNOTIFY kann die Betriebsergebnisseinformationen sehr elegant anzeigen. JNOTIFY ist ein JQuery-basiertes Informations-Eingabeaufforderung-Plug-In, das drei Informations-Eingabeaufforderungen unterstützt: Betriebserfolg, Betriebsausfall und Betriebserinnerung. Jnotify Browser hat eine sehr gute Kompatibilität, unterstützt das Ändern von Eingabeaufforderungen, unterstützt die Positionierung des Speicherorts der Eingabeaufforderungen und kann Plug-in-Parameter konfigurieren.
JSUCCESS (Nachricht, {Option}); Jerror ("Die Operation fehlgeschlagen, bitte versuchen Sie es erneut !!");Detaillierte Konfiguration von JNOtify -Parametern:
AutoHide: TRUE, // Ob automatisch das Eingabeaufforderung -Balken -Clickoverlay ausblenden: Falsch, oder ob die Maskenschicht klicken soll, um die Eingabeaufforderung zu schließen. : 15, // Displacement when the prompt bar is displayed and hidden HorizontalPosition : "right", // Horizontal Position: left, center, rightVerticalPosition : "bottom", // Vertical Position: top, center, bottomShowOverlay : true, // Whether to display the mask layer ColorOverlay : "#000", // Set the color of the mask layer OpacityOverlay : 0.3, // Set the Transparenz der Maskenschicht Onclosed: FN // Nach dem Schließen des Eingabeaufforderungsfelds können Sie die Funktion ausführen. Wie oben erwähnt, werden die drei Anrufe nacheinander aufgerufen.
Im Folgenden finden Sie die öffentliche Methode, die ich in der Skriptklasse eingekapselt habe, um die Anzeige von schnellen Effekten zu erreichen.
//Show error or prompt message (requires jNotify related file) function showError(tips, TimeShown, autoHide) { jError( tips, { autoHide: autoHide || true, // added in v2.0 TimeShown: TimeShown || 1500, HorizontalPosition: 'center', VerticalPosition: 'top', ShowOverlay: true, ColorOverlay: '#000', onCompleted: function () {// In v2.0 // alert ('jnofity ist abgeschlossen!'); 'Center', VerticalPosition.Auf diese Weise können wir, wenn wir AJAX 'Post -Methode verwenden, nach unterschiedlichen Anforderungen fordern.
var postdata = $ ("#ffadd"). serializearray (); $ .post (url, postdata, function (json) {var data = $ .Parsejson (JSON); if (data.success) {// Die Upload-Verarbeitung von Porträt $ ('#Dateiporträt'). FileInput ('Upload'). Duschror ("Speichern fehlgeschlagen:" + data.errormessage, 3000);2) Verwendung des Toastr-Plug-Ins
Toastr ist eine JavaScript-Bibliothek zum Erstellen von nicht blockierenden Seitennachrichten-Erinnerungen im Gnome/Growl-Stil. ToAstr kann vier Benachrichtigungsmodi festlegen: Erfolg, Fehler, Warnung und Eingabeaufforderung. Die Position des schnellen Fensters und der Animationseffekte kann nach Anzahl der Energie eingestellt werden. Auf der offiziellen Website können Sie Parameter auswählen, um JS zu generieren, was sehr bequem zu verwenden ist.
Die Plugin -Adresse lautet: http://codeseven.github.io/toastr/
Es kann folgende Effekte erzielen: Warnung, Gefahr, Erfolg, schnelle Dialoginformationen, der Effekt ist wie folgt.
Der Verwendung von JS -Code ist unten angezeigt.
// eine Warnung zeigen, kein Titel toastr.Warning ('Mein Name ist Inigo montoya. Du hast meinen Vater getötet, bereit zu sterben!') // einen Erfolg zeigen, der Titel toastr.success ('Viel Spaß, das Schloss zu stürmen!', 'Miracle Max sagt') // ERROR TITEL TOASTROVEL. listen toastr.clear () listenDie Parameterdefinition dieses Plug-Ins lautet wie folgt.
// Parameter einstellen, wenn der Standardwert verwendet wird, ist die folgende Generation von Toastr.Options = {"CloseButton": Falsch, // ob die Schließknopf "Debug": Falsch, // Ob Debug-Modus "PositionClass": "Toast-Top-Vull-Widthth That The Position of the Pop-Up-Fenster" 1000 ":" 300 ":" 300 ":" 300 ":" 300 ":" 300 ":" 300 ": // Die Animationszeit verschwindet "Timeout": "5000", // Die Anzeigezeit "ExtendedTimeout": "1000", // erweiterte Anzeigezeit "ShowEsing": "Swing", // Die Animationspuffermethode während des Displays "Hideasing": "Linear", // Animation Puffering -Methode beim Verschwinden "HidsmethodMethod": "Fadein": "Fadein", "// // Animationsmethode". // Animationsmethode beim Verschwinden}; // Erfolgsaufforderungen zum Binden von $ ("#Erfolg"). Click (function () {toastr.success ("Herzlichen Glückwunsch zu Ihrem Erfolg");});})Das obige ist meine Zusammenfassung meiner Erfahrung in der Verarbeitung und Optimierung von Dialogfeldern und Eingabeaufforderungen im Projekt. Ich hoffe, es wird für alle hilfreich sein, die Weboberfläche zu lernen und zu verbessern. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!