tabs选项卡jQuery插件 v1.1

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

在《jQuery实现简单的tabs选件卡封装》一文中,我尝试了用jQuery.fn.extend来封装tabs选项卡代码,但是总觉得太简单了,现在换了个跟实用的方式,如果有bug请以评论形式反馈~

实现功能:

1.可指定tabs切换内容;

2.可指定tabs切换方式,如mouseover、click;

3.可设置切换速度;

4.可设置是否自动播放;

5.可设置自动播放时间;

5.可设置切换项若内容为空,可不显示。

jQuery插件代码:

(function($){
/*******************************
         * @name tabs选项卡插件 v1.1
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.06.07
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.tabs = function(_setting){
		_setting = $.extend({
			setRun:'mouseover',//切换方式
			setWrap:null,//切换容器
			setSpeed:0,//切换速度
			setScroll:false,//是否自动播放
			setScrollTime:0//自动播放时间
		},_setting);
		var _this          = this,
		    _run           = _setting.setRun,
		    _content       = _setting.setWrap,
		    _setSpeed      = _setting.setSpeed,
		    _setScroll     = _setting.setScroll,
		    _setScrollTime = _setting.setScrollTime,
		    _index         = 0;
		if( _this.length ){
			_this.die().live(_run,function(){
				_index  =  _this.index(this);
				hottop(_index);
			});
			if( _setScroll ){
				scrollFun();
			}
			function scrollFun(){
				var _mun    = _this.size(),
				    _MyTime = setInterval(function(){
					hottop( _index );
					_index ++;
					if( _index == _mun ){
						_index = 0;
					}
				},_setScrollTime);
			}
			function hottop(i){
				if( _content != null ){
					if( jQuery(_content).eq(i).html() != '' ){
						jQuery(_content).parent().show();
						jQuery(_content).eq(i).stop(true,true).show(_setSpeed).siblings(_content).hide(_setSpeed);
					}else{
						jQuery(_content).hide();
					}
					_this.eq(i).addClass('on').siblings().removeClass('on');
				}else{
					alert('您要切换的内容为空!请添加SetWrap值')
				}
			}
		}
	}
})(jQuery);

jQuery插件代码:

jQuery('#indexBanner-btn li').tabs({
	setRun:'click',
	setWrap:'#indexBanner-pic li',
	setSpeed:600,
	setScroll:true,
	setScrollTime:4000
});

html代码:

<ul id="indexBanner-pic">
<li id="indexBanner-item1"><img src="templates/images/banner-item-5.jpg" alt="" /></li>
<li id="indexBanner-item2"><img src="templates/images/banner-item-2.jpg" alt="" /></li>
<li id="indexBanner-item3"></li>
<li id="indexBanner-item4"><img src="templates/images/banner-item-4.jpg" alt="" /></li>
</ul>
<ul id="indexBanner-btn">
<li id="indexBanner-btn1"></li>
<li id="indexBanner-btn2"></li>
<li id="indexBanner-btn3"></li>
<li id="indexBanner-btn4"></li>
</ul>

标签:

上一篇: linux修改用户密码的方法

下一篇:纯CSS三角 可兼容各主流浏览器

相关文章

评论

发表评论

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