See artikkel on masintõlke peegelartikkel, palun klõpsake siia, et hüpata algse artikli juurde.

Architect_Programmer_Code Põllumajandusvõrgustik»Arhitekt › Front-end disain ja veeb › Esiosa raam › jquery kirjutab bootstrapi stiilis teavituse/kinnita sõnumiakna ümber ...
Vaade: 12972|Vastuse: 0

[Jquery] jquery tühistab bootstrap-stiilis hoiatuse/kinnita sõnumiakna

[Kopeeri link]
Postitatud 05.11.2015 16:30:50 | | | |
Usun, et paljud inimesed on tüdinenud teavituste ja kinnituste ilmumisest ning on hiljuti töötanud projekti kallal, kasutades bootstrapi, ja muide, nad on kapseldanud bootstrap-stiilis sõnumikasti.

Seda on väga lihtne rakendada, bootstrap ise sisaldab modaalset modaalkasti, mis näeb päris hea välja :) lihtsalt kapselda see ja kasuta.

Ei mingit koodi, pole tõde, vähem juttu ja rohkem tee, ja kodeeri.


Projekt Asp.net MVC arhitektuuriga lihtsaks globaalseks kutsumiseks, lisan otse järgmise HTML-i globaalpaigutuse lehele:

  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 -->
Kopeeri kood


Pole palju öelda, kõik on bootstrap modaalstiilid, sõbrad, kes pole sellega tuttavad, saavad kontrollida bootstrap css-i, kinnitusi [....] Sisu asendatakse lõpuks parameetrite kuvamisega, mida me läbisime.

Js pakett näeb välja selline:
  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. });
Kopeeri kood
  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.   });
Kopeeri kood

Krohvid:

On ka mõned detailid, mida tuleb parandada, näiteks blockUI jne, kui on hilja, mine enne magama.

Täida rolli, kui sul aega on.


Originaallink: http://www.tuicool.com/articles/mMNrIr





Eelmine:Onclick ja href kasutamine HTML-i A-sildis
Järgmine:.NET C# küsimused seoses Request payload'i väärtuste võtmisega taustal

Seotud postitused
Disclaimer:
Kõik Code Farmer Networki poolt avaldatud tarkvara, programmeerimismaterjalid või artiklid on mõeldud ainult õppimiseks ja uurimistööks; Ülaltoodud sisu ei tohi kasutada ärilistel ega ebaseaduslikel eesmärkidel, vastasel juhul kannavad kasutajad kõik tagajärjed. Selle saidi info pärineb internetist ning autoriõiguste vaidlused ei ole selle saidiga seotud. Ülaltoodud sisu tuleb oma arvutist täielikult kustutada 24 tunni jooksul pärast allalaadimist. Kui sulle programm meeldib, palun toeta originaaltarkvara, osta registreerimist ja saa paremaid ehtsaid teenuseid. Kui esineb rikkumist, palun võtke meiega ühendust e-posti teel.
Mail To:help@itsvse.com