封装js组件 之 消息弹窗插件,确认弹窗插件(demo案例)

发布时间:2019-09-26作者:laosun阅读(637)

封装js组件

自己动手封装js组件之弹窗插件(demo案例)。内含message 消息提醒弹窗、confirm确认弹窗,弹窗输入备注进行下一步,确认弹窗后需要等待N秒后才能点击确定按钮。

    博主第一次封装js组件,因为自己的后台有个地方需要用到,所以就做了一套,可是花了博主整整一天的时间。现在公布出来,供大家玩耍。

    该插件主要是弹窗,该弹窗分为四种类型:

    1. 普通消息弹窗,只有一个确定按钮。

    2. 确认消息弹窗,有取消和确定按钮。

    3. 确认消息弹窗,必须输入内容才可进行下一步。

    4. 确认消息弹窗,确定按钮有倒计时。

    回调方法详解,一共有四种,如下所示:

    # 异常提醒,使用案例:回调过来以后,自己可以使用任何插件来进行 《弱提醒》
    error:function(){},
    #打开弹窗之前的回调,使用案例:弹窗中的内容需要请求后台才可以。
    openBefore:function(){return true},
    #关闭之后的提醒,使用案例:关闭之后刷新当前页...
    afterClose:function(){},
    #点击确定后的回调,使用案例:是否删除,点击是,从这请求后台。
    callback:function(){},

    默认参数详解:

    timehwnd:null,
    type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    maskClose:true,//点击遮罩关闭弹窗,默认true(如果设置为false,那么只能点击取消或者确定按钮才可关闭)
    title:'温馨提示',//弹窗标题
    bodyClass:'',//默认为空,如果想要将body区域增加样式,从这进行修改(博主预览图中的红色字体等就是通过这个来设置的)
    body:'您确定要执行吗?',//弹窗内容
    placeholder:'',//只有confirm-apply_remark才有 (这个是textarea的)
    width:300,//默认弹窗宽度
    height:'auto',//默认弹窗高度(这个高度是中间内容区域的高度,如果要计算这个弹窗高度,需要增加顶部和尾部的95px + padding:20的40px)(如果使用confirm-apply-remark,建议设置此值)
    minWidth:300,//最小宽度
    minHeight:24,//最小高度
    maxWidth:1000,//最小宽度
    maxHeight:500,//最大高度
    remarkMinLength:0,//默认为0,表示textarea备注至少输入多少个字。 填写0,表示可以为空
    countdownSecond:5,//倒计时,默认五秒倒计时
    #上边的所介绍的四种回调,这里就不再说了
    error:function(){},
    openBefore:function(){return true},
    afterClose:function(){},
    callback:function(){},

    博主并不是专攻 js 的程序员,而是后端。做的不好的地方,可以留言告诉博主,互相交流互相学习。 

    下边来看下预览图:

    2.png

    3.png

    源码:

    demo.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>alert弹窗</title>
    </head>
    <link href='animate.min.css' rel='stylesheet' type='text/css'>
    <link href='sunalert.min.css' rel='stylesheet' type='text/css'>
    <body>
    <!-- 页面 -->
    <style>
    .btns{text-align: center;margin-bottom: 20px;}
    .btns a{ margin: 20px; }
    </style>
    <div class="btns">
    	<a href="javascript:;" id="sunalert-message">普通消息展示弹窗(仅仅展示)</a>
    	<a href="javascript:;" id="sunalert-confirm" reloadUrl="http://www.baidu.com">确认消息弹窗(confirm)</a>
    </div>
    <div class="btns">
    	<a href="javascript:;" id="confirm-apply-remark">确认消息(输入内容)</a>
    	<a href="javascript:;" id="confirm-wait">确定消息弹窗(按钮倒计时等待)</a>
    </div>
    <div class="btns">
    	<a href="javascript:;" id="sunalert-confirm1" reloadUrl="http://www.sunjs.com">练习Demo1</a>
    	<a href="javascript:;" id="sunalert-confirm2">练习Demo2(批量导出)</a>
    	<a href="javascript:batchUnBindCallBack();;">练习Demo3(直接弹出)</a>
    	<span id="demo1"></span>
    </div>
    
    <!-- 正文 -->
    <script src="jquery-2.1.4.min.js"></script>
    <script type='text/javascript' src='sunalert.js'></script>
    <style>
    .body-ext{
    	color: red!important;
    }
    </style>
    <script type="text/javascript">
    	$(document).ready(function() {
    		//message 普通消息 弹窗
    		$("#sunalert-message").SunAlert({
    			type:'message',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			maskClose:true,//点击遮罩关闭弹窗,默认true
    			title:'温馨提示',//弹窗标题,默认为温馨提示
    			body:'操作已成功',//弹窗内容,默认内容:您确定要执行吗?
    			callback:function(_this, id){
    				console.log(id+"	点击了确定");
    			}
    		})[0];
    		//confirm 确认消息 弹窗
    		$("#sunalert-confirm").SunAlert({
    			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			title:'温馨提示',//弹窗标题
    			openBefore:function(_this, id){
    				//TODO 请求 ajax 获取批次详情
    				var body = "本批次共绑定数据1000条,已被解绑23条<br/><br/><font style='color:red'>请已实际解绑结果为准</font>";
    				//打开之前更新弹窗内容
    				_this.update({
    					body:body
    				});
    				console.log(id+"	打开弹窗之前");
    				return true;
    			},
    			afterClose:function(_this, id){
    				console.log(id+"	点击了取消");
    			},
    			callback:function(_this, id){
    				var url = $("#"+id).attr("reloadUrl");
    				console.log(id+"	点击了确定,准备请求 "+url+" 准备批量解绑");
    			}
    		})[0];
    		//confirm 输入内容进行下一步 确认消息 弹窗
    		$("#confirm-apply-remark").SunAlert({
    			type:'confirm-apply-remark',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			maskClose:true,//点击遮罩关闭弹窗,默认true
    			title:'锁定',//弹窗标题,默认为温馨提示
    			width:450,
    			height:100,//confirm-apply-remark类型,最好设置个高度,支撑textarea
    			placeholder:'锁定原因',//只有confirm-apply-remark才有
    			remarkMinLength:5,//只有confirm-apply-remark才有,填写0,表示可以为空
    			error:function(msg){
    				alert(msg);
    			},
    			openBefore:function(_this, id){
    				console.log(id+"	打开弹窗之前");
    				return true;
    			},
    			afterClose:function(_this, id){
    				console.log(id+"	点击了取消");
    			},
    			callback:function(_this, id, value){
    				console.log(id+"	点击了确定,输入的内容是:"+value);
    			}
    		})[0];
    		//确定按钮五秒倒计时
    		$("#confirm-wait").SunAlert({
    			type:'confirm-wait',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			maskClose:false,//点击遮罩关闭弹窗,默认true
    			title:'批量删除',//弹窗标题,默认为温馨提示
    			body:'<strong>您确定要批量删除吗?</strong><br/><br/><font color="red">本次删除后数据将可能无法找回,您确定要继续执行吗?</font><br/><br/>先给你3秒钟时间冷静一下吧',
    			width:400,
    			countdownSecond:3,//3秒倒计时,倒计时完成后,才能点击确定按钮
    			callback:function(_this, id, value){
    				console.log(id+"	倒计时结束,点击了确定");
    			}
    		})[0];
    
    
    		//====================练习demo====================================================================
    		//confirm 确认消息 弹窗
    		$("#sunalert-confirm1").SunAlert({
    			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			title:'温馨提示',//弹窗标题
    			openBefore:function(_this, id){
    				//TODO 请求 ajax 获取批次详情
    
    				//例子demo
    				// var isReturn = false;
    				// requestTo(url, params, function(result){//封装好的ajax请求。 等同$.post
    				// 	if(result.code=='0'){
    				// 		var body = result.msg;
    				// 		_this.update({
    				// 			body:body
    				// 		});
    				// 		isReturn = true;
    				// 		return false;
    				// 	}else{
    				// 		$("body").SunAlert({
    				// 			width:400,
    				// 			type:'message',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    				// 			body:result.msg
    				// 		})[0].open("sunalert-validate");
    				// 		return false;
    				// 	}
    				// });
    				// return isReturn;
    
    				var body = "本批次共绑定数据1000条,已被解绑23条<br/><br/><font style='color:red'>请已实际解绑结果为准</font>";
    				//打开之前更新弹窗内容
    				_this.update({
    					body:body
    				});
    				console.log(id+"	打开弹窗之前");
    				return true;
    			},
    			afterClose:function(_this, id){
    				console.log(id+"	点击了取消");
    			},
    			callback:function(_this, id){
    				var url = $("#"+id).attr("reloadUrl");
    				console.log(id+"	点击了确定,准备请求 "+url+" 准备批量解绑");
    				if( typeof batchUnBindCallBack === 'function' ){//如果存在回调的方法,则进行回调弹窗提醒
    					batchUnBindCallBack();
    				}
    			}
    		})[0];
    
    
    		//confirm 确认消息 弹窗
    		$("#sunalert-confirm2").SunAlert({
    			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			title:'导出XXX',//弹窗标题
    			body:'注:本次操作将会压缩成zip格式',
    			callback:function(_this, id){
    				//TODO 提取选中的checkbox id等等操作
    				var ids = "1,2,3,4,5";
    				console.log(_this.id+"	点击了确定,准备开始导出:"+ids);
    				//TODO 请求后台
    				if( typeof exportCallBack === 'function' ){//如果存在回调的方法,则进行回调弹窗提醒
    					exportCallBack(ids);
    				}
    			}
    		})[0];
    	});
    	
    	//回调
    	function exportCallBack(ids){
    		var aa = $("body").SunAlert({
    			type:'confirm',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			maskClose:true,//点击遮罩关闭弹窗,默认true
    			title:'温馨提示',//弹窗标题,默认为温馨提示
    			body:'打包已成功,是否跳转到下载页面?'+ids,//弹窗内容,默认内容:您确定要执行吗?
    			callback:function(_this, id){
    				location.href = 'https://www.sunjs.com';
    			}
    		})[0].open("bbbbb");
    	}
    	
    	//回调
    	function batchUnBindCallBack(){
    		var aa = $("body").SunAlert({
    			type:'message',//message、confirm、confirm-wait、confirm-apply-remark,默认值message
    			maskClose:true,//点击遮罩关闭弹窗,默认true
    			title:'温馨提示',//弹窗标题,默认为温馨提示
    			body:'操作已成功',//弹窗内容,默认内容:您确定要执行吗?
    			callback:function(_this, id){
    				console.log(_this.id+"	本次demo测试已经结束");
    				//_this.destroy();
    			}
    		})[0];
    		aa.open("aaaaaaaaa");
    	}
    </script>
    </body>
    </html>


    底部有下载地址


0 +1

相关下载

版权声明

下载资源可能涉及版权问题,下载赶早,删档不补

 请文明留言

3 条评论