jQuery实现简单的tabs选件卡封装

作者:norion时间:2012年5月19日评论次数:0 条

自从学会用jQuery.fn.extend之后,就开始喜欢上封装,今天由于项目的需求封装了一个简单tabs插件,现在分享给大家:

插件代码:

(function($){
/*******************************
         * @name 简单的tabs选项卡插件
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.05.18
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.tabs = function(Content){
		var _this  = this;
		var _index = 0;
		_this.live('mouseover',function(){
			_index  =  _this.index(this);
			hottop(_index);
		});
		function hottop(i){
			jQuery(Content).eq(i).stop(true,true).show().siblings(Content).hide();
			_this.eq(i).addClass('on').siblings().removeClass('on');
		}
	}
})(jQuery);

插件调用:

jQuery('.hotName li').tabs('.hotDetail');

html代码:

<ul class="hotName">
<li class="on">选项1</li>
<li>选项2</li>
</ul>
<div class="hotDetail on">选项内容1</div>
<div class="hotDetail">选项内容2</div>

是不是很简单呀,由于没有什么时间,就不做成demo了,还请见谅…完。

标签:

上一篇: nginx重启出现“No such process”提示的解决方案

下一篇:修复”Placeholder跨浏览器兼容插件 v1.0″的小bug

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注