LinuxGUI/WebUI/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             + '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'
  34             + '<h3 class="modal-title"><B style="font-weight: 400;"> [Title]</B></h3>'
  35             + '</div>'
  36             + '<div class="modal-body " style="word-break: break-all;display: block;">'
  37             + '[Message]'
  38             + '</div>'
  39             + '<div class="modal-footer" >'
  40             + '<button type="button" class="btn btn-success ok" data-dismiss="modal">[BtnOk]</button>'
  41             + '[UserDefined]'
  42             + '<button type="button" class="btn cancel" data-dismiss="modal">[BtnCancel]</button>'
  43             + '</div>' + '</div>' + '</div>';
  44
  45                 var _alert = function(options) {
  46                         alr.html(ahtml); // 复原
  47                         alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
  48
  49             if (vtoy_chrome_app_mode == 0) {
  50                 if (document.body.clientHeight > 400) {
  51                     alr.find('.modal-dialog').css("top",((document.body.clientHeight - 400) / 2));
  52                 }
  53             }
  54
  55                         alr.find('.cancel').hide();
  56                         _dialog(options);
  57
  58                         return {
  59                                 on : function(callback) {
  60                                         if (callback && callback instanceof Function) {
  61                                                 alr.find('.ok').click(function() {
  62                                                         callback(true)
  63                                                 });
  64                                         }
  65                                 }
  66                         };
  67                 };
  68
  69                 var _confirm = function(options) {
  70                         alr.html(ahtml);
  71                         alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
  72                         alr.find('.cancel').show();
  73             if (vtoy_chrome_app_mode == 0) {
  74                 if (document.body.clientHeight > 400) {
  75                     alr.find('.modal-dialog').css("top",((document.body.clientHeight - 400) / 2));
  76                 }
  77             }
  78
  79                         _dialog(options);
  80
  81                         return {
  82                                 on : function(callback) {
  83                                         if (callback && callback instanceof Function) {
  84                                                 alr.find('.ok').click(function() {
  85                                                         callback(true);
  86                                                 });
  87                                                 alr.find('.cancel').click(function() {
  88                                                         callback(false);
  89                                                 });
  90                                                 alr.find('.userDefiend').click(function() {
  91                             callback("userDefiend");
  92                         });
  93                                         }
  94                                 }
  95                         };
  96                 };
  97
  98                 var _dialog = function(options) {
  99                         var ops = {
 100                                 msg : "提示内容",
 101                                 title : "操作提示",
 102                                 btnok : "确定",
 103                                 btncl : "取消",
 104                                 userDefined : ""
 105                         };
 106
 107                         $.extend(ops, options);
 108
 109                         var html = alr.html().replace(reg, function(node, key) {
 110                                 return {
 111                                         Title : ops.title,
 112                                         Message : ops.msg,
 113                                         BtnOk : ops.btnok,
 114                                         BtnCancel : ops.btncl,
 115                                         UserDefined : ops.userDefined
 116                                 }[key];
 117                         });
 118
 119                         alr.html(html);
 120                         alr.modal({
 121                                 width : 500,
 122                                 backdrop : 'static'
 123                         });
 124                 }
 125
 126                 var _process = function(showOrHide,time) {
 127                     var defaultTime = 100;
 128                     if($.isNumeric(time)) {
 129                         defaultTime = time;
 130                     }
 131                     var $proc;
 132             $proc = $("#vtoy_proc");
 133             if('hide' === showOrHide) {
 134                 $proc.remove();
 135             } else if ('show' === showOrHide) {
 136                 if($proc.length == 1) {
 137                     return;
 138                 }
 139                 $(document).find(":focus").blur();
 140                 $proc = $('<div id="vtoy_proc" class="loading"></div>');
 141                 $("body").append($proc);
 142                 setTimeout(function() {
 143                     $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>');
 144                 }, $.isNumeric(time) ? time : 100);
 145             } else {
 146                 alert("Modal.process参数必须为show/hide");
 147             }
 148                 }
 149
 150                 return {
 151                         alert : _alert,
 152                         confirm : _confirm,
 153                         process : _process
 154                 }
 155
 156         }();
 157
 158         window.Message = function() {
 159             var _showMsg = function(type, msg, time) {
 160                 var o = {type : type, msg : msg };
 161                 if(time) {
 162                     o.time = time;
 163                 }
 164                 _show(o);
 165             }
 166
 167                 var _show = function(options) {
 168                         var ops = {
 169                                 msg : "提示内容",
 170                                 type: 'S',
 171                                 time: 3000
 172                         };
 173                         $.extend(ops, options);
 174
 175                         var msg_class = 'alert-success';
 176                         if('S' === ops.type || 's' === ops.type) {
 177                                 msg_class = 'alert-success';
 178                         } else if ('E' === ops.type || 'e' === ops.type) {
 179                                 msg_class = 'alert-danger';
 180                         } else if ('W' === ops.type || 'w' === ops.type) {
 181                                 msg_class = 'alert-warning';
 182                         } else if ('I' === ops.type || 'i' === ops.type) {
 183                             msg_class = 'alert-info';
 184                         } else {
 185                                 alert("未知的类型，请使用: w-警告;s-成功;e-失败;i-提示");
 186                                 return;
 187                         }
 188                         var $messageContainer = $("#fcss_message");
 189                         if($messageContainer.length === 0) {
 190                                 $messageContainer = $('<div id="fcss_message" style="position:fixed; left: 20%; right: 20%; top:0px; z-index:99999999"></div>');
 191                                 $messageContainer.appendTo($('body'));
 192                         }
 193                         var $div = $('<div class="alert ' + msg_class + ' alert-dismissible fade in" role="alert" style="margin-bottom: 0; padding-top:10px; padding-bottom: 10px;"></div>');
 194                         var $btn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
 195                         $div.append($btn).append(ops.msg).appendTo($messageContainer);
 196                         setTimeout(function() {
 197                                 $div.remove();
 198                         }, ops.time);
 199                 }
 200
 201                 var _success = function(msg, time) {
 202                     _showMsg('s', msg, time);
 203                 }
 204                 var _error = function(msg, time) {
 205                     _showMsg('e', msg, time || 6000);
 206                 }
 207                 var _warn = function(msg, time) {
 208                     _showMsg('w', msg, time);
 209                 }
 210                 var _info = function(msg, time) {
 211                     _showMsg('i', msg, time);
 212                 }
 213
 214                 return {
 215                         success : _success,
 216                         error   : _error,
 217                         warn    : _warn,
 218                         info    : _info,
 219                         show    : _show
 220                 }
 221         }();
 222
 223 });