jquery tabs

记录一下tabs插件。

/* tab box */
.x-tabs {
	
}

.x-tab-menu-box {
	position: relative;
	border-bottom: 1px solid #e8e8e8;
}

.x-tab-menu {
	position: relative;
	top: 1px;
	width: 100%;
	overflow: hidden;
	list-style: none;
	z-index: 3;
}

.x-tab-item {
	float: left;
	position: relative;
	height: 20px;
	line-height: 20px;
	padding: 3px 10px;
	background-color: #F2F2F2;
	border: 1px solid #D9D9D9;
	color: #7c7c7c;
	cursor: pointer;
	margin-right: 5px;
}

.x-tab-menu .x-tab-current {
	background-color: #ffffff;
	color: #555555;
	cursor: default;
	border-bottom-color: white;
}

.x-tab-box {
	background: white;
	border: 1px solid #D9D9D9;
	border-top: none 0;
	position: relative;
}

.x-tab-body {
	padding: 10px;
	display: none;
}

.x-tab-body-show {
	display: block;
}


;(function($) {

	$.tabs = function($element, options) {
		
		var self = this;

		this.$element = $element;
		
		options.cls && $element.addClass(options.cls);

		// 宽度
		options.width && options.width !='auto' && this.width(options.width);
		
		// 高度
		options.height && options.height !='auto' && this.height(options.height);

		// 回调函数
		options.onActive && this.on("active",options.onActive);

		this.$menu = $element.find(".x-tab-menu");
		
		this.$body = $element.find(".x-tab-box");

		this.active(options.active || 0 ,true);
		
		var delay=options.delay;
		
		$element.on(options.event,".x-tab-item",function(e){
			
			var sf=self,$li=$(this);
			
			sf.pause();
			
			sf._active_timer_ && clearTimeout(sf._active_timer_);
			
			sf._active_timer_= delay > 0 ? setTimeout(function(){sf.active($li);},delay) : sf.active($li);	
			
			e.preventDefault();
			
		});
		
		// 自动播放
		
		var play=options.play;

		$element.hover(function(e){self.pause();},function(e){play && self.play();});
		
		!!play && this.play($.isNumeric(play) ? play : 3000);
		
		return this;
	};
	
	$.tabs.prototype.width = function(width){
		
		var $ele = this.$element;
		
		if(width == undefined){return $ele.width();}
		
		$.isNumeric(width) ? $ele.width(width+"px") : $ele.css("width",width);
		
		return this;
		
	};
	
	$.tabs.prototype.height = function(height){
		
		var $ele = this.$body;
		
		if(height == undefined){return $ele.height();}
		
		$.isNumeric(height) ? $ele.height(height+"px") : $ele.css("height",height);
		
		return this;
		
	};

	// 自动播放
	$.tabs.prototype.play = function(interval){
		
		var self=this;
		
		this.pause();

		this._play_interval_ = interval || this._play_interval_;

		this._active_interval_ = setInterval(function(){
			
			var sf=self,$menu=sf.$menu,$current=$menu.find("> .x-tab-current");
			
			var $next = $current.length == 0 ? $menu.find("> .x-tab-item:eq(0)").next() : $current.next();

			$next.length == 0 ? $next=$menu.find("> .x-tab-item:eq(0)") : false;
			
			sf.active($next);
			
		},this._play_interval_);
		
		return this;
		
	};
	
	// 停止自动播放
	$.tabs.prototype.pause = function(){
	
		this._active_interval_ && clearInterval(this._active_interval_);
		
		return this;
	};
	
	/** 选择 * */
	$.tabs.prototype.active = function($li,force) {

		var index = -1,cls="x-tab-current";
		
		$li instanceof jQuery ? index=$li.index() : (index = $li ,$li=this.$menu.find("> li:eq("+index+")"));
		
		if(index == -1){return this;}
		
		force=!!force;

		if(!force && $li.hasClass(cls)){return this};
	
		var $current=this.$menu.find("> ."+cls),old=$current.length ? $current.index() : -1;
		
		// 旧有活跃标签页处理
		old !=-1 && $current.removeClass(cls) && this.$body.find("> .x-tab-body:eq("+old+")").removeClass("x-tab-body-show");

		// 设置活跃标签页
		$li.addClass(cls) && this.$body.find("> .x-tab-body:eq("+index+")").addClass("x-tab-body-show");
		
		// 触发事件
		this.trigger("active",index,old);
	
		return this;
	};

	$.tabs.prototype.trigger = function(event) {

		var params = [ this];
		
		for ( var i = 1, l = arguments.length; i < l; i++) 
			params[i] = arguments[i];
		
		var type=event.toUpperCase();
		
		event=new jQuery.Event(type, type+"."+this.widget );
	
		this.$element.triggerHandler(event, params);
	
		return event;
	};

	$.tabs.prototype.on = function(event, handler) {
		this.$element.on(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};
	
	$.tabs.prototype.one = function(event, handler) {
		this.$element.one(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.tabs.prototype.off = function(event, handler) {
		this.$element.off(((event && event.toUpperCase()) || '') + "." + this.widget, handler);
		return this;
	};

	$.tabs.prototype.widget = 'tabs';

	$.fn.tabs = $.fn.Tabs = function(options) {
		var f=null,fields=[];

		for(var i=0,l=this.length;i<l;i++){
				f=$.data(this[i], "widget");
				!f ? (f=new $.tabs(this.eq(i), $.extend( {}, $.fn.tabs.defaults, options)),$.data(this[i], "widget", f)) : false;
				fields[i]=f;
		}

		return l===1 ? fields[0] : fields;
	};

	$.fn.tabs.defaults = {

		active:0,

		cls : '',

		event : 'mouseover',

		width : 'auto',

		height : 'auto',

		delay:0,

		play:false
	};

})(jQuery);

 

<div id='tab_test' class='x-tabs'>

		<div class='x-tab-menu-box'>

			<ul class='x-tab-menu'>

				<li class='x-tab-item x-tab-current'><a>运价查询</a></li>
				<li class='x-tab-item'><a>船期查询</a></li>
				<li class='x-tab-item'><a>货物跟踪</a></li>

				<li class='x-tab-item'><a>报关查询</a></li>

			</ul>

		</div>

		<div class='x-tab-box'>

			<div class='x-tab-body x-tab-body-show'>1</div>

			<div class='x-tab-body '>2</div>

			<div class='x-tab-body '>3</div>

			<div class='x-tab-body '>4</div>

		</div>

	</div>

 

$("#tab_test").tabs({
				play:true,
				width : 600,
				active:2
			});