Daillog basé sur Bootstarp

Introduction à Bootstrip

Bootstrap, de Twitter, est actuellement un cadre frontal populaire.

Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide. Développé par le concepteur de Twitter Mark Otto et Jacob Thornton, il s'agit d'un cadre CSS / HTML.

Bootstrap fournit des spécifications HTML et CSS élégantes, qui sont rédigées dans la langue CSS dynamique moins. Bootstrap était populaire depuis son lancement et est un projet open source populaire sur GitHub, y compris les dernières nouvelles de la NASA. Les cadres plus familiers aux développeurs mobiles nationaux, tels que le framework open source WEX5, sont également basés sur le code source bootstrap pour l'optimisation des performances.

1.1. Aider à documenter les mots clés

boostrap modal box oaodailog

1.2. Scénarios d'utilisation

Lorsqu'un bouton est cliqué sur une page Web, l'utilisateur doit inviter une confirmation et l'utilisateur ne peut continuer à exécuter, ou l'utilisateur a cliqué sur le bouton Annuler pour annuler l'exécution;

Lorsque vous cliquez pour afficher sur la page Web et que les données affichées doivent être affichées à l'aide d'une boîte contextuelle, vous pouvez utiliser Oaodailog

1.3. Diagramme schématique

Modal basé sur boostrap3.0, jQuery1.9

1.4. Instructions pour une utilisation

Pourquoi avez-vous besoin d'Oaodailog?

un. Étant donné que le modal fourni par Boostrap3.0, un code caché div modal doit d'abord être défini sur la page. L'utilisateur écrit le contenu à afficher dans le div. Si une page a plusieurs boîtes modales, plusieurs boîtes modales cachées div les codes cachés doivent être écrits, ce qui est sans aucun doute redondant.

né Étant donné que le modal par défaut n'a pas de bouton de confirmation et d'annulation, bien sûr, nous pouvons écrire deux boutons dans la div cachée de la boîte modale, mais nous devons également écrire JS pour surveiller les opérations effectuées une fois le bouton de confirmation. Dans le même temps, les opérations effectuées par le bouton de confirmation sont liées aux données cliquées par l'utilisateur lors de la fenêtre contextuelle. Comment les données sont passées, Bootstrap ne nous fournit pas.

c. La version 1.0.0 Oaodailog résout principalement le problème de l'utilisation gênante des boîtes modales de bootstrap et le code redondant.

Image de reproduction:

Commencer

1. Introduire oaodailog.js

Code:

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

2. Appelez le code qui affiche la boîte contextuelle

Code:

 oao.dialog ({title: "Supprimer la boîte d'invite", contenu: "Veuillez confirmer s'il est vraiment supprimé, il ne sera pas restauré après la suppression!", OK: function () {oao.dialog.close ();}});

Il s'agit d'une façon de base et la plus courante d'utiliser la boîte contextuelle de confirmation.

1.5. API

oao.dialog (): Cette méthode est une méthode pour générer une boîte contextuelle. Le paramètre passé est un objet JSON. Bien sûr, vous ne pouvez rien passer, et une boîte contextuelle vierge apparaîtra, ce qui n'est pas un problème. Ce qui suit décrit la signification et les valeurs par défaut de chaque paramètre.

• oao.dialog.close (): Fermez la boîte modale

1.6. Fonctions à prendre en charge 1. Actuellement, le contenu de la boîte contextuelle ne prend en charge que le texte et le HTML statique et ne prend pas en charge les demandes d'URL.

2. Actuellement, seuls deux boutons peuvent être affichés au maximum et les boutons personnalisés ne sont pas pris en charge.

3. La position actuelle et la taille de la boîte contextuelle ne prennent pas en charge la personnalisation

4. Actuellement, une seule boîte contextuelle peut apparaître à la fois, et elle ne prend pas en charge une autre boîte modale dans la boîte contextuelle (le modal bootstrap n'est pas pris en charge dans le calque sous-jacent)

Restez à l'écoute, à bientôt dans la prochaine version.

 / *! * OAODIALOG 1.0.0 * Auteur: Xufei * Date: 2015-7-9 1: 32 * http: //www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. Tous droits réservés. Shanghai ICP n ° 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** Ceci est sous licence sous le GNU LGPL, version 2.1 ou plus tard. function (paramètres) {var defaultSettings = {title: "invite", contenu: "", okval: "confirmer", cancalval: "annuler", ok: function () {$ ("# oaomodal"). modal ('hide');}, annuler: function () {$ ("# oaomodal"). $.extend({}, defaultSettings, settings || {});return oao.settings;}oao.initContent = function(){var modelHtml = "<div id=/"oaoModal/" class=/"modal fade delete_modal/" tabindex=/"-1/" role=/"dialog/" aria-labelledby = / "mymodallabel /" aria-hidden = / "true /"> "+" <div class = / "modal-dialog /"> "+" <div class = / "modal-conte aria-label = / "close /"> <span aria-hidden = / "true /"> × </span> </ button> "+" <h4 class = / "modal-title /"> </h4> "+" </v> "+" <div class = / "modal-body /" style = / "text-align: Center; /"> "+" </v> "+" + " Class = / "Modal-Footer /"> "+" <Button Type = / "Button /" class = / "btn btn-default modalcancel /"> </ Button> "+" <Button Type = / "Button /" class = / "btn btn-primary modalok /"> </ button> "+" </ div> "+" </vary "+" </ div> "+" + "; $ modèlehtml = $ (ModelHtml); $ (". Modalok", $ ModelHtml) .Text (oao.settings.okval); $ (". ModalCancel", $ ModelHtml) .Text (OAO .settings.cancalval); $ (". modal-title", $ modelhtml) .text (oao.settings.title); $ (". modal-body", $ modelhtm l) .html (oao.settings.content); if (! oao.settings.ok) {$ (". Modalok", $ modelhtml) .remove ();} if (! oao. sets.cancel) {$ (". modalcancel", $ modelhtml) .remove ();} $ ("body"). pour la boîte de dialogue pop-up oao.dialog = function (paramètres) {paramètres = oao.init (paramètres); oao.initContent (); // appelle la méthode $ ('# oaomodal'). On ('Hidden.bs.modal', fonction (e) {if (oao.settings.close) {oao.settings.close ();} $ ("# oaomodal"). retire ();}) if (oao.settings.ok) {$ ("# oaomodal .modalok"). click (setting.ok .ModalCancel "). cliquez sur (settings.cancel);} $ (" # oaomodal "). Modal ('show'). CSS ({" margin-top ": function () {return ($ (this) .height () / 2-200);}}) ;;} // méthode pour fermer la dialogue oao.Dialog.close = function () {$ ("# oaomodal"). modal ('hide');}