Αυτό το άρθρο είναι ένα άρθρο καθρέφτη της αυτόματης μετάφρασης, κάντε κλικ εδώ για να μεταβείτε στο αρχικό άρθρο.

Architect_Programmer_Code Δίκτυο Γεωργίας»Αρχιτέκτονας › Σχεδιασμός front-end & web › Πλαίσιο μπροστινού άκρου › Το jQuery ξαναγράφει το παράθυρο ειδοποίησης/επιβεβαίωσης μηνύματος στυλ bootstrap ...
Άποψη: 12972|Απάντηση: 0

[Jquery] Το jQuery παρακάμπτει το παράθυρο μηνύματος ειδοποίησης/επιβεβαίωσης τύπου bootstrap

[Αντιγραφή συνδέσμου]
Δημοσιεύτηκε στις 5/11/2015 4:30:50 μ.μ. | | | |
Πιστεύω ότι πολλοί άνθρωποι έχουν βαρεθεί με την εμφάνιση ειδοποιήσεων και επιβεβαιώσεων, και πρόσφατα εργάζονται σε ένα έργο χρησιμοποιώντας το bootstrap, και παρεμπιπτόντως, έχουν ενσωματώσει ένα πλαίσιο μηνυμάτων τύπου bootstrap.

Είναι πολύ απλό στην εφαρμογή, το ίδιο το bootstrap συνοδεύεται από ένα modal modal box, το οποίο φαίνεται αρκετά καλό:) απλά ενθυλακώστε το και χρησιμοποιήστε το.

Κανένας κώδικας, καμία αλήθεια, λιγότερη συζήτηση και περισσότερα κάνουν, και κωδικοποιούν.


Το έργο είναι Asp.net αρχιτεκτονική MVC για εύκολη καθολική κλήση, προσθέτω απευθείας το ακόλουθο HTML στη σελίδα καθολικής διάταξης:

  1. <!-- system modal start -->
  2.     <div id="ycf-alert" class="modal">
  3.       <div class="modal-dialog modal-sm">
  4.         <div class="modal-content">
  5.           <div class="modal-header">
  6.             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  7.             <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
  8.           </div>
  9.           <div class="modal-body small">
  10.             <p>[Message]</p>
  11.           </div>
  12.           <div class="modal-footer" >
  13.             <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
  14.             <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
  15.           </div>
  16.         </div>
  17.       </div>
  18.     </div>
  19.   <!-- system modal end -->
Αντιγραφή κώδικα


Δεν έχω πολλά να πω, είναι όλα τα στυλ bootstrap modal, οι φίλοι που δεν είναι εξοικειωμένοι με αυτό μπορούν να ελέγξουν το bootstrap css, αγκύλες [....] Το περιεχόμενο τελικά θα αντικατασταθεί με την εμφάνιση παραμέτρων που περάσαμε.

Το πακέτο js μοιάζει με αυτό:
  1. $(function () {
  2.   window.Modal = function () {
  3.     var reg = new RegExp("\[([^\[\]]*?)\]", 'igm');
  4.     var alr = $("#ycf-alert");
  5.     var ahtml = alr.html();

  7.     //关闭时恢复 modal html 原样，供下次调用时 replace 用
  8.     //var _init = function () {
  9.     //        alr.on("hidden.bs.modal", function (e) {
  10.     //                $(this).html(ahtml);
  11.     //        });
  12.     //}();

  14.     /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */


  17.     var _alert = function (options) {
  18.       alr.html(ahtml);        // 复原
  19.       alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
  20.       alr.find('.cancel').hide();
  21.       _dialog(options);

  23.       return {
  24.         on: function (callback) {
  25.           if (callback && callback instanceof Function) {
  26.             alr.find('.ok').click(function () { callback(true) });
  27.           }
  28.         }
  29.       };
  30.     };

  32.     var _confirm = function (options) {
  33.       alr.html(ahtml); // 复原
  34.       alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
  35.       alr.find('.cancel').show();
  36.       _dialog(options);

  38.       return {
  39.         on: function (callback) {
  40.           if (callback && callback instanceof Function) {
  41.             alr.find('.ok').click(function () { callback(true) });
  42.             alr.find('.cancel').click(function () { callback(false) });
  43.           }
  44.         }
  45.       };
  46.     };

  48.     var _dialog = function (options) {
  49.       var ops = {
  50.         msg: "提示内容",
  51.         title: "操作提示",
  52.         btnok: "确定",
  53.         btncl: "取消"
  54.       };

  56.       $.extend(ops, options);

  58.       console.log(alr);

  60.       var html = alr.html().replace(reg, function (node, key) {
  61.         return {
  62.           Title: ops.title,
  63.           Message: ops.msg,
  64.           BtnOk: ops.btnok,
  65.           BtnCancel: ops.btncl
  66.         }[key];
  67.       });
  68.       
  69.       alr.html(html);
  70.       alr.modal({
  71.         width: 500,
  72.         backdrop: 'static'
  73.       });
  74.     }

  76.     return {
  77.       alert: _alert,
  78.       confirm: _confirm
  79.     }

  81.   }();
  82. });
Αντιγραφή κώδικα
  1. // 四个选项都是可选参数
  2. Modal.alert(
  3.   {
  4.     msg: '内容',
  5.     title: '标题',
  6.     btnok: '确定',
  7.     btncl:'取消'
  8.   });

  10. // 如需增加回调函数，后面直接加 .on( function(e){} );
  11. // 点击“确定” e: true
  12. // 点击“取消” e: false
  13. Modal.confirm(
  14.   {
  15.     msg: "是否删除角色？"
  16.   })
  17.   .on( function (e) {
  18.     alert("返回结果：" + e);
  19.   });
Αντιγραφή κώδικα

Αποδόσεις:

Υπάρχουν επίσης κάποιες λεπτομέρειες που πρέπει να βελτιωθούν, όπως το blockUI κ.λπ., αν είναι αργά, πηγαίνετε πρώτα για ύπνο.

Συμπληρώστε όταν έχετε χρόνο.


Αρχικός σύνδεσμος: http://www.tuicool.com/articles/mMNrIr





Προηγούμενος:Χρήση των onclick και href στην ετικέτα A στην HTML
Επόμενος:Ερωτήσεις .NET C# σχετικά με το αίτημα λήψης τιμών ωφέλιμου φορτίου στο παρασκήνιο

σχετικές αναρτήσεις
Αποκήρυξη:
Όλο το λογισμικό, το υλικό προγραμματισμού ή τα άρθρα που δημοσιεύονται από το Code Farmer Network προορίζονται μόνο για μαθησιακούς και ερευνητικούς σκοπούς. Το παραπάνω περιεχόμενο δεν θα χρησιμοποιηθεί για εμπορικούς ή παράνομους σκοπούς, άλλως οι χρήστες θα υποστούν όλες τις συνέπειες. Οι πληροφορίες σε αυτόν τον ιστότοπο προέρχονται από το Διαδίκτυο και οι διαφορές πνευματικών δικαιωμάτων δεν έχουν καμία σχέση με αυτόν τον ιστότοπο. Πρέπει να διαγράψετε εντελώς το παραπάνω περιεχόμενο από τον υπολογιστή σας εντός 24 ωρών από τη λήψη. Εάν σας αρέσει το πρόγραμμα, υποστηρίξτε γνήσιο λογισμικό, αγοράστε εγγραφή και λάβετε καλύτερες γνήσιες υπηρεσίες. Εάν υπάρχει οποιαδήποτε παραβίαση, επικοινωνήστε μαζί μας μέσω email.
Mail To:help@itsvse.com