Plugson/www/static/js/jquery.vtoy.alert.js

   1
   2 /**
   3  * 用于bootstap框架下提示信息框
   4  * demo:
   5  *
   6  * 模态框
   7  * Modal.confirm({msg: "是否确定提交？"}).on( function (e) {alert("返回结果：" + e);});
   8  * Modal.alert({msg:"该记录已删除！"})
   9  * Modal.process('show'/'hide') 隐藏或显示全屏、进度条
  10  *
  11  * 非模态框
  12  * Message.show({ type : 'S|W|E|I', msg: '提示信息' })
  13  * Message.success('成功信息')
  14  * Message.error('错误信息')
  15  * Message.warn('警告信息')
  16  * Message.info('提示信息')
  17  * Message.warn('警告信息',10000) //10000为显示时长
  18  */
  19 ;$(function() {
  20
  21         window.Modal = function() {
  22                 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
  23                 var alr = $("#msgAlertDiv");
  24
  25         if (alr.length == 0) {
  26             alr = $('<div id="msgAlertDiv" class="modal fade"></div>')
  27             $("body").append(alr);
  28         }
  29
  30                 var ahtml = ' <div class="modal-dialog">'
  31             + '<div class="modal-content">'
  32             + '<div class="modal-header">'
  33             + '<h3 class="modal-title"><B style="font-weight: 400;"> [Title]</B></h3>'
  34             + '</div>'
  35             + '<div class="modal-body " style="word-break: break-all;display: block;">'
  36             + '[Message]'
  37             + '</div>'
  38             + '<div class="modal-footer" >'
  39             + '<button type="button" class="btn btn-success ok" data-dismiss="modal">[BtnOk]</button>'
  40             + '[UserDefined]'
  41             + '<button type="button" class="btn cancel" data-dismiss="modal">[BtnCancel]</button>'
  42             + '</div>' + '</div>' + '</div>';
  43
  44                 var _alert = function(options) {
  45                         alr.html(ahtml); // 复原
  46                         alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
  47
  48             if (document.body.clientHeight > 400) {
  49                                 alr.find('.modal-dialog').css("top",((document.body.clientHeight - 400) / 2));
  50                         }
  51
  52                         alr.find('.cancel').hide();
  53                         _dialog(options);
  54
  55                         return {
  56                                 on : function(callback) {
  57                                         if (callback && callback instanceof Function) {
  58                                                 alr.find('.ok').click(function() {
  59                                                         callback(true)
  60                                                 });
  61                                         }
  62                                 }
  63                         };
  64                 };
  65
  66                 var _confirm = function(options) {
  67                         alr.html(ahtml);
  68                         alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
  69                         alr.find('.cancel').show();
  70             if (document.body.clientHeight > 400) {
  71                                 alr.find('.modal-dialog').css("top",((document.body.clientHeight - 400) / 2));
  72                         }
  73
  74                         _dialog(options);
  75
  76                         return {
  77                                 on : function(callback) {
  78                                         if (callback && callback instanceof Function) {
  79                                                 alr.find('.ok').click(function() {
  80                                                         callback(true);
  81                                                 });
  82                                                 alr.find('.cancel').click(function() {
  83                                                         callback(false);
  84                                                 });
  85                                                 alr.find('.userDefiend').click(function() {
  86                             callback("userDefiend");
  87                         });
  88                                         }
  89                                 }
  90                         };
  91                 };
  92
  93                 var _dialog = function(options) {
  94                         var ops = {
  95                                 msg : '',
  96                                 title : g_vtoy_cur_language.STR_INFO,
  97                                 btnok : g_vtoy_cur_language.STR_BTN_OK,
  98                                 btncl : g_vtoy_cur_language.STR_BTN_CANCEL,
  99                                 userDefined : ""
 100                         };
 101
 102                         $.extend(ops, options);
 103
 104                         var html = alr.html().replace(reg, function(node, key) {
 105                                 return {
 106                                         Title : ops.title,
 107                                         Message : ops.msg,
 108                                         BtnOk : ops.btnok,
 109                                         BtnCancel : ops.btncl,
 110                                         UserDefined : ops.userDefined
 111                                 }[key];
 112                         });
 113
 114                         alr.html(html);
 115                         alr.modal({
 116                                 width : 500,
 117                                 backdrop : 'static'
 118                         });
 119                 }
 120
 121                 var _process = function(showOrHide,time) {
 122                     var defaultTime = 100;
 123                     if($.isNumeric(time)) {
 124                         defaultTime = time;
 125                     }
 126                     var $proc;
 127             $proc = $("#vtoy_proc");
 128             if('hide' === showOrHide) {
 129                 $proc.remove();
 130             } else if ('show' === showOrHide) {
 131                 if($proc.length == 1) {
 132                     return;
 133                 }
 134                 $(document).find(":focus").blur();
 135                 $proc = $('<div id="vtoy_proc" class="loading"></div>');
 136                 $("body").append($proc);
 137                 setTimeout(function() {
 138                     $proc.replaceWith('<div id="vtoy_proc" class="loading" style="background-color: rgba(0, 0, 0, 0.2);"><div class="rectbox"><div class="title">DATA</div><div class="rect rect1"></div><div class="rect rect2"></div><div class="rect rect3"></div><div class="rect rect4"></div><div class="rect rect5"></div></div></div>');
 139                 }, $.isNumeric(time) ? time : 100);
 140             } else {
 141                 alert("Modal.process参数必须为show/hide");
 142             }
 143                 }
 144
 145                 return {
 146                         alert : _alert,
 147                         confirm : _confirm,
 148                         process : _process
 149                 }
 150
 151         }();
 152
 153         window.Message = function() {
 154             var _showMsg = function(type, msg, time) {
 155                 var o = {type : type, msg : msg };
 156                 if(time) {
 157                     o.time = time;
 158                 }
 159                 _show(o);
 160             }
 161
 162                 var _show = function(options) {
 163                         var ops = {
 164                                 msg : "提示内容",
 165                                 type: 'S',
 166                                 time: 3000
 167                         };
 168                         $.extend(ops, options);
 169
 170                         var msg_class = 'alert-success';
 171                         if('S' === ops.type || 's' === ops.type) {
 172                                 msg_class = 'alert-success';
 173                         } else if ('E' === ops.type || 'e' === ops.type) {
 174                                 msg_class = 'alert-danger';
 175                         } else if ('W' === ops.type || 'w' === ops.type) {
 176                                 msg_class = 'alert-warning';
 177                         } else if ('I' === ops.type || 'i' === ops.type) {
 178                             msg_class = 'alert-info';
 179                         } else {
 180                                 alert("未知的类型，请使用: w-警告;s-成功;e-失败;i-提示");
 181                                 return;
 182                         }
 183                         var $messageContainer = $("#fcss_message");
 184                         if($messageContainer.length === 0) {
 185                                 $messageContainer = $('<div id="fcss_message" style="position:fixed; left: 20%; right: 20%; top:0px; z-index:99999999"></div>');
 186                                 $messageContainer.appendTo($('body'));
 187                         }
 188                         var $div = $('<div class="alert ' + msg_class + ' alert-dismissible fade in" role="alert" style="margin-bottom: 0; padding-top:10px; padding-bottom: 10px;"></div>');
 189                         var $btn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
 190                         $div.append($btn).append(ops.msg).appendTo($messageContainer);
 191                         setTimeout(function() {
 192                                 $div.remove();
 193                         }, ops.time);
 194                 }
 195
 196                 var _success = function(msg, time) {
 197                     _showMsg('s', msg, time);
 198                 }
 199                 var _error = function(msg, time) {
 200                     _showMsg('e', msg, time || 6000);
 201                 }
 202                 var _warn = function(msg, time) {
 203                     _showMsg('w', msg, time);
 204                 }
 205                 var _info = function(msg, time) {
 206                     _showMsg('i', msg, time);
 207                 }
 208
 209                 return {
 210                         success : _success,
 211                         error   : _error,
 212                         warn    : _warn,
 213                         info    : _info,
 214                         show    : _show
 215                 }
 216         }();
 217
 218 });