各种效果的tab选项卡

;(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_on",
tabStyle : "normal",
direction : "top",
aniMethod : "swing",
aniSpeed : "fast",
onStyle : "current",
menuChildSel : "*",
cntChildSel : "*"
}; })(jQuery);
<!--tab选项卡开始-->
<div class="orders-tab color_8e flaot_left">
<ul class="tabbtn" id="orders-normaltab">
<li class="current current-left" id="orders-current"></li>
<li>借物 <span>[3]</span></li>
<li>售卖其他产品</li>
<li>发票信息</li>
</ul><!--tabbtn end-->
<div class="tabcon flaot_left" id="normalcon">
<div class="sublist sublist-orders-remark">
<div class="orders-remark">
<textarea class="orders-remark-main"></textarea>
</div>
</div><!--tabcon end-->
<div class="sublist"> </div><!--tabcon end-->
上一篇:SpringMVC关于json、xml自动转换的原理研究[附带源码分析]


下一篇:工具分享——将C#文档注释生成.chm帮助文档