/********************************** * tabso * Copyright (c) yeso! * Date: 2010-07-28 说明: * 应用对象必须为舌签按钮的直接父元素,且父元素内不包含其他非按钮元素 * example: $( ".menus_wrap" ).tabso({ cntSelect:".content_wrap",tabEvent:"mouseover" }); * cntSelect:内容块的直接父元素的 jq 选择器 * tabEvent:触发事件名 * tabStyle:切换方式。可取值:"normal" "fade" "move" "move-fade" "move-animate" * direction:移动方向。可取值:"left" "top" (tabStyle为"move"或"move-fade" "move-animate"时有效) * aniMethod:动画方法(特殊效果需插件(如:easing)支持,tabStyle为"move-animate"时有效) * aniSpeed:动画速度 * onStyle:菜单选中样式名 **********************************/ /* 代码整理:懒人之家 lanrenzhijia.com */ ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); return this.each(function(i){ var _this=$(this); var $menus=_this.children( opts.menuChildSel ); var $container=$( opts.cntSelect ).eq(i); if( !$container) return; if( opts.tabStyle=="move"||opts.tabStyle=="move-fade"||opts.tabStyle=="move-animate" ){ var step=0; if( opts.direction=="left"){ step=$container.children().children( opts.cntChildSel ).outerWidth(true); }else{ step=$container.children().children( opts.cntChildSel ).outerHeight(true); } } if( opts.tabStyle=="move-animate" ){ var animateArgu=new Object(); } $menus[ opts.tabEvent]( function(){ var index=$menus.index( $(this) ); $( this).addClass( opts.onStyle ) .siblings().removeClass( opts.onStyle ); switch( opts.tabStyle ){ case "fade": if( !($container.children( opts.cntChildSel ).eq( index ).is(":animated")) ){ $container.children( opts.cntChildSel ).eq( index ).siblings().css( "display", "none") .end().stop( true, true ).fadeIn( opts.aniSpeed ); } break; case "move": $container.children( opts.cntChildSel ).css(opts.direction,-step*index+"px"); break; case "move-fade": if( $container.children( opts.cntChildSel ).css(opts.direction)==-step*index+"px" ) break; $container.children( opts.cntChildSel ).stop(true).css("opacity",0).css(opts.direction,-step*index+"px").animate( {"opacity":1},opts.aniSpeed ); break; case "move-animate": animateArgu[opts.direction]=-step*index+"px"; $container.children( opts.cntChildSel ).stop(true).animate( animateArgu,opts.aniSpeed,opts.aniMethod ); break; default: $container.children( opts.cntChildSel ).eq( index ).css( "display", "block") .siblings().css( "display","none" ); } }); $menus.eq(0)[ opts.tabEvent ](); }); }; $.fn.tabso.defaults={ cntSelect : ".content_wrap", tabEvent : "mouseover", tabStyle : "normal", direction : "top", aniMethod : "swing", aniSpeed : "fast", onStyle : "current", menuChildSel : "*", cntChildSel : "*" }; })(jQuery); /* 代码整理:懒人之家 lanrenzhijia.com */