Dans divers processus de développement Web, le traitement des boîtes de dialogue et des boîtes d'invite est une technologie de traitement d'interface très courante. S'il est bien utilisé, il peut offrir aux utilisateurs une bonne expérience de page. Il en va de même pour le développement de bootstrap. Nous utilisons souvent des calques de boîte de dialogue contextuelles pour afficher des données sur les interfaces telles que l'ajout, l'édition et la visualisation des détails. Lors de la suppression, une boîte de confirmation rapide peut être utilisée. Si l'opération réussit, nous pouvons utiliser une boîte d'invite plus riche pour la gérer. Cet article compare principalement ces points techniques utilisés dans le développement de bootstrap.
1. Utilisation de la boîte de dialogue bootstrap
Le bootstrap ordinaire dispose de plusieurs tailles de boîtes de dialogue, y compris de petites boîtes de dialogue avec un état par défaut, des boîtes de dialogue à largeur moyenne et des boîtes de dialogue pleine grandeur. L'interface de la boîte de dialogue de Bootstrap est très sympathique. Lorsque nous utilisons la touche ESC ou cliquez sur d'autres espaces vides avec la souris, la boîte de dialogue sera automatiquement masquée.
Leurs définitions sont tout simplement différentes, comme ce qui suit est le code d'interface de dialogue par défaut par défaut:
<! --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle="validator" enctype="multipart/form-data"> <div> <div> <div> <div> <div> <label>Parent ID</label> <div> <select id="PID" name="PID" type="text" placeholder="parent ID..." ></select> </div> </div> </div> </div> <div> <div> <label>Name</label> <div> <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> <input type = "HIDDEN" id = "id" name = "id" /> <button type = "soumi"> confirmer </ button> <bouton type = "Button" Data-Dismiss = "Modal"> Annuler </ Button> </div> </ form> </ div> </div> </div> </ div>
L'interface approximative est la suivante:
Faites attention au code de style de dialogue dans le code ci-dessus, comme suit:
<div>
S'il s'agit d'une base de données des deux autres tailles, vous n'avez qu'à le modifier ici. Les deux codes ci-dessous sont:
<div>
ainsi que
<div>
Nous pouvons décider de quelle taille de définition de la couche de dialogue adopter en fonction de la disposition des éléments d'interface, mais les méthodes d'appel de ces boîtes de dialogue sont cohérentes.
L'interface de la boîte de dialogue est la suivante:
// Show peut sélectionner le client $ ("# btnselectcustomer"). Show ();L'interface de la boîte de dialogue de fermeture est la suivante:
$ ("# add"). modal ("hide");De manière générale, la boîte de dialogue que nous appartenons est un formulaire qui peut effectuer des opérations de soumission similaires à la sauvegarde des données. Par conséquent, il est nécessaire de vérifier les données du formulaire. S'il y a une erreur, nous devrons peut-être le rappeler sur l'interface. Par conséquent, lorsque la page est initialisée, les règles de vérification du formulaire doivent être initialisées. Vous trouverez ci-dessous nos opérations d'initialisation de formulaire régulière.
// Bond Fonction de l'événement lié BindEvent () {// juger si les informations de formulaire transmettent la vérification $ ("# ffadd"). Valider ({meta: "valider", errorElement: 'span', errorclass: 'help-block-block-error', focusInvalid: false, highlight: function (élément) {$ (élément) .closest ('.. }, Success: Function (Label) {Label.Closest (. Form-Group '). RemoveClass (' Has-Error '); element.parent ('div'). (Data.Success) {// Ajouter le traitement de téléchargement de Portrait ('# File-Portrait'). FileInput ('upload'); {showtips ("Vous n'êtes pas autorisé à utiliser cette fonction, veuillez contacter l'administrateur pour le gérer.");}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Mais généralement, ces codes seront beaucoup répétés, nous pouvons donc encapsuler les fonctions et réutiliser un code pour utiliser un code de traitement plus simple, mais nous pouvons également atteindre l'objectif.
// Bind Related Events Function bindEvent () {// Add et modifier les enregistrements formValidate ("ffAdd", fonction (form) {$ ("# add"). Modal ("hide"); // envoyer des paramètres de construction à l'arrière $ .parsejson (JSON); administrateur pour le gérer. ");});}); }); }2. Supprimer le traitement de la boîte de dialogue de confirmation
1) Utilisation du plug-in de bootbox
En plus de la boîte de dialogue ordinaire ci-dessus, nous rencontrons souvent une boîte de dialogue de confirmation concise. Bien que le code ci-dessus puisse également être utilisé pour créer une boîte de dialogue de confirmation, il n'est pas nécessaire d'être si gênant en général. Vous pouvez utiliser la boîte de dialogue de confirmation de la boîte de démarrage du plug-in pour le gérer.
Bootbox.js est une petite bibliothèque JavaScript qui vous aide à créer rapidement une boîte de dialogue lors de l'utilisation du framework bootstrap, et peut également vous aider à créer, gérer ou supprimer tous les éléments DOM requis ou les gestionnaires d'événements JS.
bootbox.js utilise trois méthodes pour concevoir imiter leur javascript natif certaines méthodes. Leur signature de méthode exacte est flexible pour chacun d'eux pour prendre divers paramètres pour personnaliser l'étiquette et spécifier les valeurs par défaut, mais elles sont souvent appelées les mêmes:
bootbox.alert (message, rappel)
bootbox.prompt (message, rappel)
bootbox.confirm (message, rappel)
Les seuls paramètres requis sont alertes est le message; Le rappel est nécessaire pour confirmer et inviter les appels pour déterminer la réponse de l'utilisateur. Même lors de l'appel, le rappel d'alarme est déterminé lorsque l'utilisateur rejette la boîte de dialogue car notre méthode d'emballage ne peut pas bloquer comme si sa langue maternelle est utile: ils sont asynchrones plutôt que synchrones.
Ces trois méthodes appellent un quart d'une méthode publique, que vous pouvez également créer en utilisant votre propre boîte de dialogue personnalisée:
bootbox.dialog (options)
Pour plus de documentation d'aide à l'API, veuillez consulter: http://bootboxjs.com/documentation.html
Alerte
bootbox.Alert ("Hello World!", fonction () {example.show ("Hello World Callback");});Confirmer
bootbox.confirm ("êtes-vous sûr?", fonction (result) {example.show ("Confirmer le résultat:" + résultat);});Ou code:
bootbox.confirm ("Êtes-vous sûr de supprimer l'enregistrement sélectionné?", fonction (result) {if (result) {// Enfin supprimer la dernière virgule, ids = ids.substring (0, ids.length - 1); // Envoyez ensuite les informations de demande asynchrones à l'arrière-plan pour supprimer les données var postdata = {ids: ids}; (JSON) {var data = $ .parsejson (JSON); }});Rapide
bootbox.prompt ("quel est votre nom?", fonction (result) {if (result === null) {example.show ("invite rejeté");} else {example.show ("hi <b>" + résultat + "</b>");}});Boîte de dialogue personnalisé
L'effet de l'utilisation du code et de l'interface est le suivant:
bootbox.dialog (…)
[2)
2) Utilisation du plug-in SweetAlert
Bien que l'effet ci-dessus soit très cohérent avec le style de bootstrap, l'interface est un peu monotone. L'effet ci-dessus n'est pas ce que j'aime beaucoup, j'ai rencontré un effet qui est plus beau, comme illustré ci-dessous.
Cet effet est mis en œuvre en introduisant le plugin sweetalert (http://t4t5.github.io/sweetalerert/).
SWAL ({Title: "Operation Invite", Text: NewTips, Type: "Warning", showcancelButton: true, confirmButtonColor: "# dd6b55", CancelButtonText: "Cancel", confirmButtonText: "Yes, Execute Delete!", CloseonConfirm: true}, function () {Delfonction ();});Le code d'implémentation avec des effets d'interface similaires ci-dessus est le suivant:
Généralement, son code pop-up peut être rendu très simple, comme indiqué ci-dessous.
3. Traitement de la boîte d'invite d'informations
Les deux traitements ci-dessus sont implémentés à l'aide de boîtes de dialogue contextuelles et bloque l'interface. Généralement, nous effectuons des invites d'informations, en espérant qu'elle n'affectera pas nos autres opérations, ou du moins fournira un effet de disparition automatique très court.
Ici, nous présenterons ici le plug-in Jnotify et le plug-in Toast.
1) Utilisation de la boîte d'invite Jnotify
Jnotify Invite Box, un excellent plugin de boîte d'invite de résultat jQuery. Après avoir soumis le formulaire, nous répondons à l'arrière-plan via AJAX et renvoyons les résultats et affichons les informations de retour au premier plan. Jnotify peut afficher les informations sur les résultats de l'opération très élégamment. Jnotify est un plug-in d'invites basé sur JQuery, qui prend en charge trois méthodes d'invite d'informations: Succès de l'opération, défaillance de l'opération et rappel de l'opération. Le navigateur JNotify a une très bonne compatibilité, prend en charge la modification du contenu de l'invite, prend en charge le positionnement de l'emplacement des boîtes d'invite et peut configurer des paramètres de plug-in.
jSuccess (message, {option}); jerror ("l'opération a échoué, veuillez réessayer !!"); jNotify ("Remarque: veuillez améliorer vos informations personnelles <strong>! </strong>");Configuration détaillée des paramètres de jnotify:
Autohide: true, //, s'il faut masquer automatiquement la barre d'invite clickoverlay: false, // s'il faut cliquer sur le calque de masque pour fermer la barre d'invite Minwidth: 200, // la largeur minimale: 1500, // Temps d'affichage: milliseconds showtimeffect: 200, // temps à afficher sur la page: milliseconds hidetimeeffect: 200, // temps pour disparaître de la page: milliseconds long. 15, // Déplacement lorsque la barre rapide est affichée et cachée horizontal position: "droite", // position horizontale: gauche, centre, ligne de ligne droite: "Interpan", // Position verticale: haut, centre, inférieur inférieur: true, // à afficher le compteur de masque ColorOverlay: "# 000", // Définir la transmission de la masse de masque OpacitalOverlay: 0.3, // // Définir la transmission de la masse de masque OpacitalOverlay. calque onclosed: fn // Après la fermeture de la zone d'invite, exécutez la fonction, vous pouvez rappeler à nouveau un autre Jnotify. Comme mentionné ci-dessus, les trois appels sont appelés en séquence.
Vous trouverez ci-dessous la méthode publique que j'ai encapsulée dans la classe de script pour réaliser l'affichage des effets rapides.
// Afficher l'erreur ou le message invite (nécessite un fichier associé jNotify) de la fonction Downror (Tips, Timeshown, AutoHide) {Jerror (Tips, {AutoHide: AutoHide || True, // ajouté dans v2.0 Timeshown: Timeshown || 1500, HorizontalPosition: 'Center', VerticalPosition: 'Top', FonseOverlay: True, Coloroverlay: '# # # # # #, sur la surdom'): Fonction ': True' {// ajouté dans v2.0 // alert ('JNOFITY est terminé! 'TOP', showoverlay: true, colorelay: '# 000', onCompleted: function () {// ajouté dans v2.0 // alert ('JNofity est terminé!');}});}De cette façon, lorsque nous utilisons la méthode post-post d'Ajax, nous pouvons inviter en fonction des différents besoins.
var postdata = $ ("# ffadd"). SerializEArray (); $ .post (URL, postdata, fonction (json) {var data = $ .parsejson (json); if (data.success) {// ajouter le traitement de téléchargement du portrait $ ('# file-Portrait'). FileInput ('upload'); // Save Successy avec succès. {doucheror ("Save a échoué:" + data.errorMessage, 3000);}}). Error (function () {showtips ("vous n'êtes pas autorisé à utiliser cette fonction, veuillez contacter l'administrateur pour le gérer.");});2) Utilisation du plug-in Toastr
Toastr est une bibliothèque JavaScript pour créer des rappels de messages de page de style gnome / grognement. , Toastr peut définir quatre modes de notification: succès, erreur, avertissement et invite. L'emplacement de la fenêtre rapide et des effets d'animation peuvent être définis par nombre d'énergie. Sur le site officiel, vous pouvez sélectionner des paramètres pour générer JS, ce qui est très pratique à utiliser.
L'adresse du plugin est: http://codeseven.github.io/toastr/
Il peut créer les effets suivants: avertissement, danger, succès, informations de dialogue rapides, l'effet est le suivant.
Son code JS Utilisation est illustré ci-dessous.
// montre un avertissement, pas de titre Toastr.Warning ('Mon nom est Inigo Montoya. Vous avez tué mon père, préparez-vous à mourir!') // Afficher un succès, le titre Toastr.Success ('Amusez-vous à prendre d'assaut le château!', 'Miracle Max dit que cela signifie que cela signifie' '. toastr.clear ()La définition du paramètre de ce plug-in est la suivante.
//Setting parameters, if the default value is used, the following generation of toastr.options = { "closeButton": false, //Whether to display the close button "debug": false, //Whether to use debug mode "positionClass": "toast-top-full-width", //The position of the pop-up window "showDuration": "300", //The animation time displayed "hideDuration": "1000", //The animation time disappearing "timeOut": "5000", //The display time "extendedTimeOut": "1000", //Extended display time "showEasing": "swing", //The animation buffering method during display "hideEasing": "linear", //Animation buffering method when disappearing "showMethod": "fadeIn", //Animation method when displaying "hideMethod": "fadeOut" // Méthode d'animation lorsque la disparition}; // Invite de réussite pour lier $ ("# succès"). Cliquez sur (fonction () {toastr.success ("Félicitations pour votre succès");})Ce qui précède est mon résumé de mon expérience dans le traitement et l'optimisation des boîtes de dialogue et des boîtes d'invite dans le projet. J'espère qu'il sera utile pour tout le monde d'apprendre et d'améliorer l'interface Web. Si vous souhaitez en savoir plus d'informations, veuillez faire attention au site Web Wulin.com!