/********************************** * 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 */