各种效果的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-->
				
时间: 2024-10-07 05:29:50

各种效果的tab选项卡的相关文章

jquery tab选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

语音导航的tab选项卡效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序员同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用. 在线案例,下载收藏. annyang是一个能够实现语音识别的js类库,小巧易用(仅仅2k),兼容中文.接下来我们看看怎么使用. 首先导入该annyang库,可以使用CDN的方式,也可以下载来使用. <!--下载到本地使

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

CSS实例:Tab选项卡效果

页面1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

vue实现tab选项卡切换效果

tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div class="tab"> <span @click="cur = 0">首页</span> <span @click="cur = 1">广场</span> <span @click=&qu

【Little Demo】左右按钮tab选项卡双切换

通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. 1) 先实现Tab内容和标签部分的显示: HTML代码: <div class="tab-Infomations"> <div class="arrows"></div> <div class="tab-conten

可以自动切换的tab选项卡实现过程详解

可以自动切换的tab选项卡实现过程详解:关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换.本章节分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

移动web:tab选项卡

平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmove.touchend. 和做其他的效果一样,先有html结构,css样式修饰,再写JS代码. html: <div class="mtabs" id="tabs"> <ul class="mhead"> <li>t

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><