手机/P各种提示框整合,纯js实现,比前端大多数框架的提示消息更好用
dome下载地址:https://files.cnblogs.com/files/han-guang-xue/%E4%B8%87%E8%83%BDAlert%E6%8F%90%E7%A4%BA%E6%A1%86.zip
下载好dome之后:打开 index.html页面
html页面如下:建议用自己的工具打开直接看比较方便
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>万能提示框整合</title> <link rel="stylesheet" type="text/css" href="css/iziToast.min.css"> <link rel="stylesheet" type="text/css" href="css/jquery.alertable.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/iziToast.min.js"></script> <script src="js/jquery.alertable.js"></script> <script src="js/velocity.min.js"></script> <script src="js/velocity.ui.min.js"></script> </head> <body> <center> <div style="height:100%;100%;line-height:150px;background:#FFFFFF"> <a onclick="Alert_info()">点我</a> </div> <script> function Alert_info(ele) { b_buttons='<button onclick=A_alert("success",1000,"你好啊!","我的笨笨","flipInX",true,true)>Photo</button>%'+ '<button onclick=A_modal_alert()>Photo</button>%'+ '<button onclick=A_modal_confirm()>Photo</button>%'+ '<button onclick=A_modal_prompt()>Photo</button>'; A_alert("error",40000,"你好啊!","我的笨笨","bottomLeft",true,true,b_buttons, '1.png',30) } /** * 万能Alert提示框 a_ 开头的是必填的 b_开头的可以不写 * @param a_type @提示类型 eg:'warning':警告(橙色) 'info': 普通(蓝色) 'success':成功(绿) 'error':红色 * @param a_time @显示时间 eg:1000(1s) * @param a_title @标题 eg:HelloWord! * @param a_message @信息 eg:我的笨笨 * @param a_direction @方向 手机端不分左右 topLeft:上面左边 topRight:顶部右边 topCenter：顶部中间 flipInX:中间 bottomLeft:底部左边; bottomCenter：底部中间 * @param a_close @关闭按钮 false || true * @param a_progressBar @进度条 false || true * @param b_buttons @按钮 参数可选,可添加多个按钮 eg:'<button>Photo</button>%<button>Photo</button>' * @param b_image @图片 图片,参数 图片路径 默认大小40px; * @param b_imgWidht @图片大小 图片,参数 默认大小40px; eg:30 */ function A_alert(a_type,a_time,a_title,a_message,a_direction,a_close,a_progressBar,b_buttons,b_image,b_imgWidht){ var buttons_ = new Array(); if(b_buttons!=undefined){ var myBtns = b_buttons.split("%"); for(var i = 0; i<myBtns.length; i++){ buttons_[i] = new Array(); buttons_[i][0] = myBtns[i]; } } if(b_image==undefined){ b_image=""; } iziToast.settings({ timeout : a_time == 0 ? 1000 : a_time, close : a_close == 0 ? false : a_close, progressBar : a_progressBar == 0 ? false : a_progressBar, image: b_image.split("%")[0]==undefined ? "" : b_image.split("%")[0], imageWidth: b_imgWidht==undefined ? 40 : b_imgWidht, buttons:buttons_, }); var data = { title : a_title == 0 ? "":a_title, message : a_message == 0? "":a_message, position : a_direction ==0 ?"topLeft":a_direction, } switch (a_type){ case "warning": iziToast.warning(data); break; case "success": iziToast.success(data); break; case "error": iziToast.success(data); break; default:iziToast.info(data);break; } } /** * modal提示框 a_ 开头的是必填的 b_开头的可以不写 * @param a_type @提示类型 eg: * @param a_message @显示时间 eg:1000(1s) */ function A_modal_alert(){ $.alertable.alert('Howdy!'); } function A_modal_confirm(){ $.alertable.confirm('Are You Sure?').then(function() { //点击确定之后执行的函数 $.alertable.alert('You Clicked OK'); }, function() { console.log('Cancel'); }); } /** * show 和 hide 的方法可以查看网址 * @https://www.cnblogs.com/many-object/p/9901751.html */ function A_modal_prompt(){ $.alertable.prompt('How many?',{ show: function() { $(this.overlay).velocity('transition.fadeIn'); $(this.modal).velocity('transition.flipBounceYIn'); }, hide: function() { $(this.overlay).velocity('transition.fadeOut'); $(this.modal).velocity('transition.perspectiveUpOut'); } }).then(function(data) { $.alertable.confirm("您输入的是："+data.value,{ show: function() { $(this.overlay).velocity('transition.fadeIn'); $(this.modal).velocity('transition.flipBounceYIn'); }, hide: function() { $(this.overlay).velocity('transition.fadeOut'); $(this.modal).velocity('transition.perspectiveUpOut'); } }).then(function(){ A_alert("success",1000,"嗯!操作完成的了!","666","topRight",true,true) }); }, function() { A_alert("warning",1000,"嗯!你已取消","5555","topCenter",true,true) }); } </script> </center> </body> </html>
对每个方法的简介:
A_alert()方法是结合了各种提示参数的整合方法,可以直接引用过去当做一个公用的方法,通过传如参数调用
A_modal_alert();
A_modal_confirm();
A_modal_prompt();
这三个方法是一个范例,可以使用自己写方法去调用里面的方法和设置参数值
