【原創】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>