1-类级别插件开发
jquery插件开发之-----命名空间下定义公共方法
- 命名空间----定义公共方法
- 调用命名空间.方法名称(参数)
- 缺点:可传参数,但是不可配置。
<!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-对象级别插件开发
详见我的文章:https://my.oschina.net/u/583531/blog/1621234