各种效果的tab选项卡

Posted 2020-08-07 单眼皮男生

;(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-->