Tento článok je zrkadlovým článkom o strojovom preklade, kliknite sem pre prechod na pôvodný článok.

Architect_Programmer_Code Poľnohospodárska sieť»Architekt › Front-end dizajn a web › Predný rám › jquery prepisuje okno správ o upozornenia/potvrdení v štýle bootstrap ...
Pohľad: 12972|Odpoveď: 0

[Jquery] jquery prepisuje bootstrapové okno správy o upozornenia/potvrdení

[Kopírovať odkaz]
Zverejnené 5. 11. 2015 16:30:50 | | | |
Verím, že mnohí ľudia majú dosť toho, že sa objavujú upozornenia a potvrdenia, a nedávno pracovali na projekte s bootstrapom, pričom mimochodom, zapuzdrili do bootstrap štýlu schránky na správy.

Je to veľmi jednoduché na implementáciu, bootstrap sám o sebe obsahuje modálny modálny box, ktorý vyzerá celkom dobre :) stačí ho zapuzdriť a použiť.

Žiadny kód, žiadna pravda, menej rečí a viac konania a kódovania.


Projekt je Asp.net architektúre MVC pre jednoduché globálne volanie, priamo pridávam nasledujúci HTML na stránku globálneho rozloženia:

  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 -->
Kopírovať kód


Nie je veľa čo dodať, všetko sú to bootstrap modálne štýly, priatelia, ktorí s tým nie sú oboznámení, môžu skontrolovať bootstrap css, zátvorky [....] Obsah bude nakoniec nahradený zobrazením parametrov, ktoré sme minuli.

JS balík vyzerá takto:
  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. });
Kopírovať kód
  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.   });
Kopírovať kód

Stvárnenie:

Sú tu aj niektoré detaily, ktoré treba vylepšiť, napríklad blockUI a podobne, ak je neskoro, choďte spať najskôr.

Zastúpte, keď budete mať čas.


Pôvodný odkaz: http://www.tuicool.com/articles/mMNrIr





Predchádzajúci:Použitie onclick a href v tagu A v HTML
Budúci:.NET C# otázky ohľadom hodnôt Request payload na pozadí

Súvisiace príspevky
Vyhlásenie:
Všetok softvér, programovacie materiály alebo články publikované spoločnosťou Code Farmer Network slúžia len na vzdelávacie a výskumné účely; Vyššie uvedený obsah nesmie byť použitý na komerčné alebo nezákonné účely, inak nesú všetky následky používateľmi. Informácie na tejto stránke pochádzajú z internetu a spory o autorské práva s touto stránkou nesúvisia. Musíte úplne vymazať vyššie uvedený obsah zo svojho počítača do 24 hodín od stiahnutia. Ak sa vám program páči, podporte originálny softvér, zakúpte si registráciu a získajte lepšie originálne služby. Ak dôjde k akémukoľvek porušeniu, kontaktujte nás prosím e-mailom.
Mail To:help@itsvse.com