一个组件开发的例子：
来源：http://www.cnblogs.com/uedqd/archive/2013/02/23/2923099.html
先上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.tabs input.active{ background:red; }
.tabs div{ width:200px; height:200px; border:1px #000 solid; display:none;}
</style>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
$(function(){
var t1 = new CreateTab();
t1.init({
id : ‘div1‘
});
var t2 = new CreateTab();
t2.init({
id : ‘div2‘,
events : ‘mouseover‘
});
var t3 = new CreateTab();
t3.init({
id : ‘div3‘,
events : ‘mouseover‘,
delay : 300
});
$(‘#input1‘).click(function(){
t3.select(2);
alert( t3.currentContent() );
});
var t4 = new CreateTab();
t4.init({
id : ‘div4‘,
events : ‘click‘
});
$(t4).on(‘toBeforeChange‘,function(){ //使用on绑定事件，jquery1.8之后使用on绑定事件，来替代bind等方法，解除事件使用off
alert( t4.currentContent() );
});
$(t4).on(‘toChange‘,function(){
//alert( t4.currentContent() );
alert( t4.currentTitle() );
});
$.extend(CreateTab.prototype,{ //插件扩展
currentTitle : function(){
return $(this.id).find(‘input‘).eq( this.iNow ).val();
}
});
});
function CreateTab(){ //组件开发
this.id = null; //构造函数设置属性
this.aInput = null;
this.aDiv = null;
this.iNow = 0;
this.defaults = {
events : ‘click‘,
delay : 0
};
}
CreateTab.prototype = { //原型方法定义可以继承的方法
init : function(options){
var This = this; //将当前作用域的this(实例对象t1,t2...)赋予This，下面调用时在另一个函数内，this的值改变
options = $.extend(this.defaults,options); //extend使options对象的内容覆盖this.defaults的内容，events与delay有初始值
//console.log(this); 输出id为null的对象t1,t2...
this.id = ‘#‘ + options.id;
//console.log(this); id为对应的值
$(this.id).find(‘input‘).on(options.events,function(){
var obj = this; //指代input元素
if(options.events==‘mouseover‘ && options.delay){ //event事件为mouseover且有delay时
obj.timer = setTimeout(function(){
This.change(obj); //相当于t1.change,t2.change....下面的change方法实现选项卡功能
},options.delay);
$(obj).mouseout(function(){
clearTimeout(obj.timer);
});
}
else{
This.change(obj);
}
});
},
change : function(obj){
$(this).trigger(‘toBeforeChange‘); //触发上面使用on绑定的event
//console.log(this); 输出id有值
$(this.id).find(‘input‘).attr(‘class‘,‘‘);
$(this.id).find(‘div‘).css(‘display‘,‘none‘);
$(obj).attr(‘class‘,‘active‘);
$(this.id).find(‘div‘).eq( $(obj).index() ).css(‘display‘,‘block‘); //index()返回dom或jqeury元素的序号
this.iNow = $(obj).index();
$(this).trigger(‘toChange‘);
},
select : function(index){
$(this.id).find(‘input‘).attr(‘class‘,‘‘);
$(this.id).find(‘div‘).css(‘display‘,‘none‘);
$(this.id).find(‘input‘).eq(index).attr(‘class‘,‘active‘);
$(this.id).find(‘div‘).eq(index).css(‘display‘,‘block‘);
this.iNow = index;
},
currentContent : function(){
return $(this.id).find(‘div‘).eq( this.iNow ).html();
}
};
</script>
</head>
<body>
<div id="div1" class="tabs">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<div id="div2" class="tabs">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<div id="div3" class="tabs">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<input type="button" id="input1" value="方法测试" />
<div id="div4" class="tabs">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
有几个部分：
1 init : function(options){
2 var This = this; //将当前作用域的this(实例对象t1,t2...)赋予This，下面调用时在另一个函数内，this的值改变
3 options = $.extend(this.defaults,options); //extend使options对象的内容覆盖this.defaults的内容，events与delay有初始值
4 //console.log(this); 输出id为null的对象t1,t2...
5 this.id = ‘#‘ + options.id;
6 //console.log(this); id为对应的值
7 $(this.id).find(‘input‘).on(options.events,function(){
8 var obj = this; //指代input元素
9 if(options.events==‘mouseover‘ && options.delay){ //event事件为mouseover且有delay时
10 obj.timer = setTimeout(function(){
11 This.change(obj); //相当于t1.change,t2.change....下面的change方法实现选项卡功能
12 },options.delay);
init方法传递参数给对象
1、第2行中，将this的值赋予This，防止下面的函数中this的值改变，通过在该行添加console.log观察this的值，可知：
第5行给没有id的对象赋值，重新打印出结果，发现id不为null：
2、第8行，this的值为input元素，因为作用域的问题，This仍可以在其子函数中使用，且这里的This id不为空，调用方法change
1 change : function(obj){
2
3 $(this).trigger(‘toBeforeChange‘); //触发上面使用on绑定的event
4 //console.log(this); 输出id有值
5 $(this.id).find(‘input‘).attr(‘class‘,‘‘);
6 $(this.id).find(‘div‘).css(‘display‘,‘none‘);
change方法中的this指向对象的实例，t1,t2....，init方法已经传递参数给对象，方法取得对象都是有id值的：
$.extend(CreateTab.prototype,{ //插件扩展
currentTitle : function(){
return $(this.id).find(‘input‘).eq( this.iNow ).val();
}
});
/*CreateTab.prototype.currentTitle= function(){
return $(this.id).find("input").eq(this.iNow).val();
}*/
插件扩展部分例子中采用了jquery的方法，也可以使用注释中的源生js添加原型方法
时间： 2024-11-05 10:28:52