请教:怎样用jquery封装一个面向对象的选项卡

最近用原生js封装了一个选项卡,但是我想要类似superslide那样调用的效果:

$('.tab').funTab({titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'});

注解与需求:$('.tab')规定父选择器,一个规定各种参数集合的对象({titItem:'.tab-title',contItem:'.tab-cont',trig:'click',on:'on'})作为参数传入函数。我的思路是:函数作为$('.tab')对象的方法来定义,但是感觉无从下手。贴下我用原生实现的代码吧。求大神帮忙实现jquery写法。

html代码:

	<div class="tab" id="tab">
		<div class="tab-title" id="tab-title">
			<ol class="clearfix">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</div>
		<div class="tab-cont" id="tab-cont">
			<ul class="clearfix">
				<li>内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
		</div>
	</div>

css代码:

		* { margin:0; padding:0;}
		li { list-style: none;}
		.clearfix:after { 
		content: "" ; 
		display: block ;
		height: 0 ;
		clear: both ;
		visibility: hidden ;
		}
		.tab-title li{ float: left; width: 100px; height: 50px; text-align: center;cursor:pointer; line-height: 50px;}
		.tab-title li.on { background: purple; color: #fff;}
		.tab-cont li { width: 300px; height: 300px;text-align: center; border: 1px solid #333;}

js代码:

	window.onload = function(){
		var funTab = new FunTab('tab');
		funTab.init('onmouseover','on');
		//funTab.autoPlay(2000,'on');	//有bug
	};

	//创建构造函数
	function FunTab(id){
		this.oTab = document.getElementById(id);
		this.tit = this.oTab.getElementsByTagName('ol');
		this.cont = this.oTab.getElementsByTagName('ul');
		this.titItem = this.tit[0].getElementsByTagName('li');
		this.contItem = this.cont[0].getElementsByTagName('li');
		this.iNow = 0;
	}

	//原型
	FunTab.prototype = {
		init : function(trig,on){
			var This = this;
			//设置触发方式、类名初始值
			trig =  trig || 'onclick';
			on = on ? on : 'on';

			for (var i=0;i<this.titItem.length;i++){
				this.titItem[i].index = i;
				this.contItem[i].style.display = 'none';
				this.contItem[0].style.display = 'block';
				this.titItem[i].className = ''; 
				this.titItem[0].className = on; 

				this.titItem[i][trig] = function(){
					This.change(this,on);
				}
			}
		},
		change : function(obj,on){
			for (var i=0;i<this.titItem.length;i++){
				this.titItem[i].className = '';
				obj.className = on;
				this.contItem[i].style.display = 'none';
				this.contItem[obj.index].style.display = 'block';
			}
		},
		autoPlay : function(delayTime,on){	//这里要怎么重用这个on呢???
			var This = this;
			//设置时间间隔初始值
			delayTime = delayTime || 1500;

			var timer = function(){
				if (This.iNow == This.titItem.length-1){
					This.iNow = 0;
				}
				else {
					This.iNow++;
				}
				for (var i=0;i<This.iNow;i++){
					This.titItem[i].className = '';
					This.contItem[i].style.display = 'none';
				}
				console.log(This.iNow);
				This.titItem[This.iNow].className = on;
				This.contItem[This.iNow].style.display = 'block';
			}

			setInterval(timer,delayTime);

			//鼠标移入选项卡时禁用自动播放
			This.oTab.onmouseEnter = function(){
				clearInterval(timer);
			}
		}
	}

另外,我用原生写的autoPlay方法也有bug,能指出就更好啦^_^


来自南极的幽默
浏览 2056回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP