【原创】jquery插件开发-类级别

时间 2019-12-08

原文原文链接

1-类级别插件开发

jquery插件开发之-----命名空间下定义公共方法javascript

命名空间----定义公共方法
调用命名空间.方法名称（参数）
缺点：可传参数，可是不可配置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类插件开发</title>
		<style type="text/css">
			#box{ width: 100px; height: 100px; background: #003BB3;}
		</style>
		<!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" />-->
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
		<style>
			.input-group span{ cursor: pointer;}
		</style>

	</head>
	<body style="padding: 30px; ">

		
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					<p>公共方法01：水平垂直居中</p>
					<div id="box"></div>
				</div>
				<div class="col-md-3">
					<p>公共方法02：判断是不是电话号码</p>
					<div class="input-group">
			            <input type="text" class="form-control" id="tel" >
			            <span class="input-group-addon" id="btn">搜索</span>
		        	</div>
	        	</div>
	        	<div class="col-md-3">
					<p>公共方法03：邮件格式</p>
					<div class="input-group">
			            <input type="text" class="form-control" id="mail" >
			            <span class="input-group-addon" id="btn_mail">搜索</span>
		        	</div>
	        	</div>
			</div>
		</div>
	</body>
</html>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
	//定义otoc命名空间下------------------------------------------开始
	$.otoc={
		
		//公共方法01：水平垂直居中
		center_h_v:function(obj){
			obj.css({
				'left':($(window).width()-obj.width())/2,
				'top':($(window).height()-obj.height())/2,
				'position':'absolute'
			});
		},
		
		//公共方法02：判断是不是电话号码
		istel:function(str){
			if(str==="")
		    {
		    	alert("不能为空！");
		    	return false;
		    }
		    var partten = /^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$/;
		    if(partten.test(str)) {
		    	alert("格式正确-电话号码");
		        return true;
		    }else{
		    	alert("格式错误-电话号码");
		        return false;
		    };
		},
		
		//公共方法03：邮件格式
		checkEmail:function(str){
		    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
		    if(str==="")
		    {
		    	alert("不能为空！");
		    	return false;
		    }
		    var isok= reg.test(str);
		    if (isok){
		    	alert("格式正确-邮件格式");
		        return true;
		    }else {
		    	alert("格式错误-邮件格式");
		        return false;
		    }
		}
	}
	//定义otoc命名空间下--------------------------------------结束
	
	//调用---------------------------------------------------开始
		//调用-公共方法01
		var box = $("#box")
		$.otoc.center_h_v(box)
		
		
		//调用-公共方法02
		$("#btn").click(function(){
			var this_tel = $("#tel").val();
			$.otoc.istel(this_tel);
		})
		
		//调用-公共方法03
		$("#btn_mail").click(function(){
			var this_mail = $("#mail").val();
			$.otoc.checkEmail(this_mail);
		})
	
	//调用---------------------------------------------------结束
	
	
})
</script>

2-对象级别插件开发

详见个人文章：http://www.javashuo.com/article/p-fczpoqei-de.htmlcss