☰

$.alert

Create Simple Alert Messages with jQuery and Bootstrap - alert.js

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/17293/109035/%24alert.js 

  1. /*
  2.  * Jquery Message插件
  3.  * 使用例子 :
  4.  * $.alert("提示内容",{
  5.  *      title : "标题",
  6.  *      position : ['left', [-0.1,0]]
  7.  * })
  8.  * 也可以这样使用
  9.  * $.alert("提示内容","标题");
  10.  * 位置请使用
  11.  * top-left,top-right,bottom-left,bottom-right,center 大小写都可以哦
  12.  */
  13.  
  14. (function ($) {
  15.     $.alert_ext = {
  16.         // 默认配置
  17.         defaults: {
  18.             autoClose: true,  // 自动关闭
  19.             closeTime: 5000,   // 自动关闭时间，不少于1000
  20.             withTime: false, // 添加计时  会在文字后面添加  ...10
  21.             type: 'danger',  // 提示类型
  22.             position: ['center', [-0.42, 0]], // 位置,第一个写位置，英文哦，后面是偏移，如果是1跟-1之间为百分比
  23.             title: false, // 标题
  24.             close: '',   // 需绑定关闭事件滴按钮
  25.             speed: 'normal',   // 速度
  26.             isOnly: true, //是否只出现一个
  27.             minTop: 10, //最小Top
  28.             onShow: function () {
  29.             },  // 打开后回调
  30.             onClose: function () {
  31.             }  // 关闭后回调
  32.         },
  33.  
  34.         // 提示框模版
  35.         tmpl: '<div class="alert alert-dismissable ${State}"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><h4 style="white-space: nowrap;">${Title}</h4><p>${Content}</p></div>',
  36.  
  37.         // 初始化函数
  38.         init: function (msg, options) {
  39.             this.options = $.extend({}, this.defaults, options);
  40.  
  41.             this.create(msg);
  42.             this.set_css();
  43.  
  44.             this.bind_event();
  45.  
  46.             return this.alertDiv;
  47.         },
  48.  
  49.         template: function (tmpl, data) {
  50.             $.each(data, function (k, v) {
  51.                 tmpl = tmpl.replace('${' + k + '}', v);
  52.             });
  53.             return $(tmpl);
  54.         },
  55.  
  56.         // 创建提示框
  57.         create: function (msg) {
  58.             this.alertDiv = this.template(this.tmpl, {
  59.                 State: 'alert-' + this.options.type,
  60.                 Title: this.options.title,
  61.                 Content: msg
  62.             }).hide();
  63.             if (!this.options.title) {
  64.                 $('h4', this.alertDiv).remove();
  65.                 $('p', this.alertDiv).css('margin-right', '15px');
  66.             }
  67.             if (this.options.isOnly) {
  68.                 $('body > .alert').remove();
  69.             }
  70.             this.alertDiv.appendTo($('body'));
  71.         },
  72.  
  73.         // 设置样式
  74.         set_css: function () {
  75.             var alertDiv = this.alertDiv;
  76.  
  77.             // 初始化样式
  78.             alertDiv.css({
  79.                 'position': 'fixed',
  80.                 'z-index': 10001 + $(".alert").length
  81.             });
  82.  
  83.             // IE6兼容
  84.             var ie6 = 0;
  85.             if ($.browser && $.browser.msie && $.browser.version == '6.0') {
  86.                 alertDiv.css('position', 'absolute');
  87.                 ie6 = $(window).scrollTop();
  88.             }
  89.  
  90.             // 位置设置提取
  91.             var position = this.options.position,
  92.                 pos_str = position[0].split('-'),
  93.                 pos = [0, 0];
  94.             if (position.length > 1) {
  95.                 pos = position[1];
  96.             }
  97.  
  98.             // 偏移百分比检测
  99.             if (pos[0] > -1 && pos[0] < 1) {
  100.                 pos[0] = pos[0] * $(window).height();
  101.             }
  102.             if (pos[1] > -1 && pos[1] < 1) {
  103.                 pos[1] = pos[1] * $(window).width();
  104.             }
  105.  
  106.  
  107.             // 位置设置
  108.             for (var i in pos_str) {
  109.                 if ($.type(pos_str[i]) !== 'string') {
  110.                     continue;
  111.                 }
  112.                 var str = pos_str[i].toLowerCase();
  113.  
  114.                 if ($.inArray(str, ['left', 'right']) > -1) {
  115.                     alertDiv.css(str, pos[1]);
  116.                 } else if ($.inArray(str, ['top', 'bottom']) > -1) {
  117.                     alertDiv.css(str, pos[0] + ie6);
  118.                 } else {
  119.                     alertDiv.css({
  120.                         'top': ($(window).height() - alertDiv.outerHeight()) / 2 + pos[0] + ie6,
  121.                         'left': ($(window).width() - alertDiv.outerWidth()) / 2 + pos[1]
  122.                     });
  123.                 }
  124.             }
  125.  
  126.             if (parseInt(alertDiv.css('top')) < this.options.minTop) {
  127.                 alertDiv.css('top', this.options.minTop);
  128.             }
  129.         },
  130.  
  131.         // 绑定事件
  132.         bind_event: function () {
  133.             this.bind_show();
  134.             this.bind_close();
  135.  
  136.             if ($.browser && $.browser.msie && $.browser.version == '6.0') {
  137.                 this.bind_scroll();
  138.             }
  139.         },
  140.  
  141.         // 显示事件
  142.         bind_show: function () {
  143.             var ops = this.options;
  144.             this.alertDiv.fadeIn(ops.speed, function () {
  145.                 ops.onShow($(this));
  146.             });
  147.         },
  148.  
  149.         // 关闭事件
  150.         bind_close: function () {
  151.             var alertDiv = this.alertDiv,
  152.                 ops = this.options,
  153.                 closeBtn = $('.close', alertDiv).add($(this.options.close, alertDiv));
  154.  
  155.             closeBtn.bind('click', function (e) {
  156.                 alertDiv.fadeOut(ops.speed, function () {
  157.                     $(this).remove();
  158.                     ops.onClose($(this));
  159.                 });
  160.                 e.stopPropagation();
  161.             });
  162.  
  163.             // 自动关闭绑定
  164.             if (this.options.autoClose) {
  165.                 var time = parseInt(this.options.closeTime / 1000);
  166.                 if (this.options.withTime) {
  167.                     $('p', alertDiv).append('<span>...<em>' + time + '</em></span>');
  168.                 }
  169.                 var timer = setInterval(function () {
  170.                     $('em', alertDiv).text(--time);
  171.                     if (!time) {
  172.                         clearInterval(timer);
  173.                         closeBtn.trigger('click');
  174.                     }
  175.                 }, 1000);
  176.             }
  177.         },
  178.  
  179.         // IE6滚动跟踪
  180.         bind_scroll: function () {
  181.             var alertDiv = this.alertDiv,
  182.                 top = alertDiv.offset().top - $(window).scrollTop();
  183.             $(window).scroll(function () {
  184.                 alertDiv.css("top", top + $(window).scrollTop());
  185.             })
  186.         },
  187.  
  188.         // 检测是否为手机浏览器
  189.         check_mobile: function () {
  190.             var userAgent = navigator.userAgent;
  191.             var keywords = ['Android', 'iPhone', 'iPod', 'iPad', 'Windows Phone', 'MQQBrowser'];
  192.             for (var i in keywords) {
  193.                 if (userAgent.indexOf(keywords[i]) > -1) {
  194.                     return keywords[i];
  195.                 }
  196.             }
  197.             return false;
  198.         }
  199.     };
  200.  
  201.     $.alert = function (msg, arg) {
  202.         if ($.alert_ext.check_mobile()) {
  203.             alert(msg);
  204.             return;
  205.         }
  206.         if (!$.trim(msg).length) {
  207.             return false;
  208.         }
  209.         if ($.type(arg) === "string") {
  210.             arg = {
  211.                 title: arg
  212.             }
  213.         }
  214.         if (arg && arg.type == 'error') {
  215.             arg.type = 'danger';
  216.         }
  217.         return $.alert_ext.init(msg, arg);
  218.     }
  219. })(jQuery);