Тази статия е огледална статия за машинен превод, моля, кликнете тук, за да преминете към оригиналната статия.

Architect_Programmer_Code Селскостопанска мрежа»Архитект › Фронт-енд дизайн и уеб › Предна рамка › jQuery пренаписва bootstrap в стил предупреждение/потвърждение на прозореца за съобщения ...
Изглед: 12972|Отговор: 0

[Jquery] jQuery презаписва прозореца за известия/потвърждение в стил bootstrap

[Копирай линк]
Публикувано в 5.11.2015 г. 16:30:50 ч. | | | |
Вярвам, че много хора са уморени от появата на известия и потвърждения и наскоро работят по проект с помощта на bootstrap, и между другото, те са капсулирали кутия за съобщения в стил bootstrap.

Много е лесно за реализиране, самият bootstrap идва с модален модален модул, който изглежда доста добре :) просто го капсулирай и го използвай.

Няма код, няма истина, по-малко приказки и повече прави, и кодиране.


Проектът е 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 модални стилове, приятели, които не са запознати с него, могат да проверят 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 часа след изтеглянето. Ако ви харесва програмата, моля, подкрепете оригинален софтуер, купете регистрация и получете по-добри услуги. Ако има нарушение, моля, свържете се с нас по имейл.
Mail To:help@itsvse.com