复制代码 代码如下: /** * jQuery插件 * Author: purecolor@foxmail.com * Date : 2011-02-25 * Params: * defaults:{ currentClass:当前样式, trigger:触发方式, callBack:回调函数, auto:是否自运行, detay:延迟时间, index:当前位置 * } * Return: null * Note : Tab选项框插件 * */ (function($){ $.fn.extend({ tabBuild:function(options){ return $(this).each(function(){ var defaults={ currentClass:"currentOne", trigger:"mouseover", callBack:null, auto:true, detay:3000, index:0 } var params=$.extend(defaults,options); var $this=$(this); var items=$('.tab-menu',$this),i=0; var autoTimer,curro=0; items.each(function(){ $(this).data('lvl',i); if(i==params.index){ $('.tab-content',$this).eq(i).show(); $(this).addClass(params.currentClass); }else{ $('.tab-content',$this).eq(i).hide(); } i++; $(this).bind(params.trigger,function(e){ //移除自动运行 if(params.auto){ if(autoTimer) clearInterval(autoTimer); } move($(this).data("lvl")); //清除冒泡 if (e.stopPropagation) { e.stopPropagation(); // for Mozilla and Opera } else if (window.event) { window.event.cancelBubble = true; // for IE } }); }); //移动播放 function move(i){ //移除上一个效果 items.eq(params.index).removeClass(params.currentClass); $('.tab-content',$this).eq(params.index).hide(); //移至当前位置 items.eq(i).addClass(params.currentClass); $('.tab-content',$this).eq(i).show(); params.index=i; } //自动运行 function auto(){ if(params.auto){ autoTimer=setInterval(function(){ curro=(params.index>=2)?0:(params.index+1); move(curro); },params.detay); }else{ if(autoTimer) clearInterval(autoTimer); } } auto(); }); } }); })(jQuery);

　　推荐阅读

　　jQuery 操作option的实现代码

js清空option之前清空option ，我的做法是遍历现有option，将其每个子元素都置空即可。现在使用jQuery来实现，我们只需要调用其支持的empty方法即可。 empty() 删除匹配的元素集合中所有的子节点。 再加上，我们要>>>详细阅读

本文标题：基于jQuery的Tab选项框效果代码(插件)

地址：http://www.17bianji.com/kaifa2/JS/24859.html

 1/2    1