jQuery封装的tab选项卡插件分享,实现二个相比较完整的开源级选项卡插件

By admin in 4858美高梅 on 2019年3月29日

在那篇小说中,笔者完结了八当中央的选项卡作用:请猛击前边的链接>>
  [js插件开发教程]原生js仿jquery架构扩充开发选项卡插件.

在那篇文章中,我实现了三个主题的选项卡功用:请猛击前边的链接>>
  [js插件开发教程]原生js仿jquery架构扩充开发选项卡插件.

关于jQuery写插件及其演示

关于写jQuery插件是很有须要的,那是前者学习个中必须经过的二个历程

 

 

对此开始写插件先想知道原理
(function($){
$.fn.yourName = function(options){
//种种品质、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件完结代码
});
};
})(jQuery);

 

那是三个基础的模板

 

其中的var options = $.extend(defaults, options);

 

1.$.extend()方法

$.extend()方法在JQuery中有七个用法,第①次是扩大方法,

第①个措施是

jQuery.extend([deep], target, object1, [objectN])

返回值:Object

把三个目的合并获得新的target,deep是可选的(递归合并)

jQuery封装的tab选项卡插件分享,实现二个相比较完整的开源级选项卡插件。统一 settings 和 options,修改并回到 settings。

在网站开发中平常会用到选项卡功用,为了节省一下写代码时间,封装了一下tab插件,方便调用。

还紧缺八个常用的切换(自动切换与发光度渐变),当然有朋友会说,还有左右,上下等等,这么些动画会放在核心图(幻灯片)插件系列.

还不够七个常用的切换(自动切换与发光度渐变),当然有意中人会说,还有左右,上下等等,那么些动画会放在宗旨图(幻灯片)插件种类.

jQuery 代码:
var settings = { validate: false, limit: 5, name: foo };
var options = { validate: true, name: bar };
jQuery.extend(settings, options);

开创选项卡组件

(自动切换,结束控制,折射率渐变 ) 效果预览:

(自动切换,结束控制,发光度渐变 ) 效果预览:

结果:
settings == { validate: true, limit: 5, name: bar }

应用方式: html结构

4858美高梅 1

4858美高梅 2

描述:

合并 defaults 和 options, 不修改 defaults。

  <div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="#tabs-2">tab-2</a></li>
        <li><a href="#tabs-3">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
      <div id="tabs-2">tabs-2-panel</div>
      <div id="tabs-3">tabs-3-panel</div>
 </div>

机动切换的落实:

机关怀换的兑现:

jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: foo };
var options = { validate: true, name: bar };
var settings = jQuery.extend(empty, defaults, options);

js调用

本条思路很不难,开启定时器,让选项卡的索引+1,加到4的时候(选项卡的尺寸)从0先导

本条思路很简短,开启定时器,让选项卡的索引+1,加到4的时候(选项卡的长短)从0早先

结果:
settings == { validate: true, limit: 5, name: bar }
empty == { validate: true, limit: 5, name: bar }

2中扩展:

第一种,看代码

view source print?

$(function(){
jQuery.extend({
modalshow: function (options) {
var defaults = {
triggerID: 'LoginShow',
callback: function () { }
}        //这里是$.extend的第二种用法        var opts = $.extend({},defaults, options);
if ($(# + opts.triggerID)[0] == null) {
var $triggerBTN = $('');
$triggerBTN.bind(click, function () {
alert(opts.triggerID);
});
$(body).append($triggerBTN);
} else {
$(# + opts.triggerID).bind(click, function () {
alert(opts.triggerID);
})
}
}
});
$.modalshow();//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成
})

其次种扩展

view source print?

$(function(){
jQuery.fn.extend({
modalshow: function (options) {
var defaults = {
//这里的this是JQuery对象
triggerID: this.attr(id),
callback: function () { }
}        //这里是$.extend的第二种用法        var opts = $.extend(defaults, options);
$(# + opts.triggerID).bind(click, function () {
alert(opts.triggerID);
})
}
});
$(#loginShow).modalshow();//这里是调用的地方,这里需要先在HTML中加入元素
})

本人在那边写了一个相比较完整的插件是有关选项卡的 //这几个是html文件
小编写的插件时引入的Tab.js

*{
padding:0px;
margin: 0px;
}
.clear{
clear: both;
}
.menu li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
border:1px solid #ccc;
border-bottom: 5px solid #ccc;;

}
.main{
margin-top: 0px;
width: 406px;
height: 206px;
overflow: hidden;
}
.main div{
width: 403px;
height: 200px;
line-height: 200px;
text-align: center;
border:1px solid #000;
}
.menu .on{
border-bottom: 6px solid red;
}

<script type=text/javascript src=Jquery.js></script>
<script type=text/javascript src=Tab.js></script>

 

  • 111
  • 222
  • 333

AAA

BBB

CCC

<script type=text/javascript>
$(document).ready(function() {
$(‘.tabs’).myTab({
operate:’mouseover’,
auto:false,
time:1000,
delay:true,
delaytime:0
})
//利用闭包的原理,对于myTab函数中的一些因素举行初阶化
});
</script>

//上面包车型客车是Tab.js文件注释小编写的比前清楚了

/***
* 标题:选项卡插件
* 编写时间:2014年七月14号
* 作者:Helios
*
邮箱:[email protected]
***/

;(function($){
$.fn.myTab=function(options){
return this.each(function(){
var defaults={
operate: ‘click’,
auto: true,
time: 4000,
delay: true,
delayTime: 500
}

var opts = $.extend(defaults, options),
//这里面七个参数的顺序无法改变,因为背后的丰盛时不会被遮住掉的
//$.extend(defaults,
options);表示的是只要options中的参数总是有值的话,那么options中的值将会顶替defaults中的值
//假使options参数字传送入的值为空,那么就可以运用暗中同意设置的值。
self = $(this), //获取当前的tabs
items = self.children(‘ul.menu’).children(‘li’), //获取上边包车型客车是这多个
tabBox = self.children(‘div.main’), //获取到了main那一个节点
tabBoxItems = tabBox.children(‘div’), // 获取mian下面的div
timer; //设置了一个定时器

var tabHandle = function(index){
//那是举办函数对中选的li和对应的div进行转移
items.siblings(‘li’).removeClass(‘on’).end().eq(index).addClass(‘on’);
tabBoxItems.siblings().hide().end().eq(index).show();
//end()函数的用法,正是停止对近来节点的操作继续对原先的丰裕节点继续操作
},

delay = function(elem){ //这一个延时函数
opts.delay ? setTimeout(function(){tabHandle(elem);},opts.delaytime)
:tabHandle(elem);
},
start = function(){ //开头函数 假设参数设置了自行
就推行上边包车型地铁第1行代码,假诺没有安装的话就翻开了定时器
if(!opts.auto) return ;
setInterval(autoRun,opts.time);

},
autoRun =function(){ //自动播放函数
var on = self.find(‘li.on’), //获取当前on所在的li
firstItem = items.eq(0),//设置私下认可第三个li
len = items.length, //
index = on.index()+1,
item = index ===len ? firstItem : on.next(‘li’),
//当前的目录倘若等于li的总司长度就重返默许的第二个,假设不是正是下二个
i = index ===len ? 0 : index; // 假若播放到了最终贰个就跳转到第四个

on.removeClass(‘on’); //移除当前li上面包车型客车体裁
item.addClass(‘on’); //把该选中的扩大样式
tabBoxItems.siblings().hide().end().eq(index).show(); // 更换div中的内容
和tabHandle 执行同一的操作

}
//bind()
方法为被选成分添加多个或八个事件处理程序,并规定事件时有产生时运维的函数。
//第多少个参数字传送递事件,第③个参数还改事件对应的函数
items.bind(opts.operate, function () {
var index = items.index($(this));
delay(index)
});

if (opts.auto) { //假使设置了auto的话判断成功
start();
self.hover(function () {
clearInterval(timer);
timer = undefined;
}, function () {
start();
})
}
})
}
})(jQuery);

 

关于写jQuery插件是很有须求的,那是前者学习在这之中必须经过的四个历程
对于伊始写插件先想掌握原理 (function($)…

 $('#tab').tabs();

古板做法:

历史观做法:

有关参数表达:

index = 0

index = 0

起头化参数

index++

index++

参数 私下认可值 参数表明
active null 设置被选中的选项卡的目录,暗许值为null,例如设置选中第3个选项卡则设置为0
event click 选项卡的切换事件,暗中认可为点击事件,能够设置mouseover

if ( index == 4 ) {

if ( index == 4 ) {

添加选项卡参数

index = 0

index = 0

参数 暗许值 参数表达
title 空 选项卡显示的文书,默许为空
href 空 选项卡链接,如若为静态数据则填入对应的字符串(#str),远程数据则为相应的url
content 空 选项卡为静态数据时的内容,动态数据则无需填写
iconCls true 选项卡关闭按钮,暗中认可为展现true,不展现则为false

}

}

Demo:

小技巧(臆想很六人都并未用过):

小技巧(估计很四个人都不曾用过):

事例1: 静态数据:

var i = ( index + 1 ) %  4

var i = ( index + 1 ) %  4

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="#tabs-2">tab-2</a></li>
        <li><a href="#tabs-3">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
      <div id="tabs-2">tabs-2-panel</div>
      <div id="tabs-3">tabs-3-panel</div>
 </div>

index为近年来当选的选项卡 索引

index为当下相中的选项卡 索引

js调用:

当index = 0,他下一张正是1,  通过地点的取余操作,i = 1

当index = 0,他下一张正是1,  通过上边的取余操作,i = 1

 $('#tabs').tabs();

当index = 3,他下一张正是0, 通过上边的取余操作,i = 0

当index = 3,他下一张就是0, 通过地方的取余操作,i = 0

事例2: 通过远程数据加载页面,则动态创造panel,

那种艺术不要求看清边界,只须要一句代码。在其实支付中,把越发4替换到选项卡的尺寸

那种艺术不必要看清边界,只须要一句代码。在其实支付中,把格外4交替成选项卡的尺寸

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

好了,关键的思路和技能有了,大家发轫拼接框架了:

好了,关键的思绪和技能有了,大家初叶拼接框架了:

js调用:

 1         var defaults = {
 2             contentClass : 'tab-content',
 3             navClass : 'tab-nav',
 4             activeClass : 'active',
 5             triggerElements : '*',
 6             activeIndex : 0,
 7             evType : 'click',
 8             effect : 'none',
 9             auto : false,
10             delay : 3000,
11             duration : 1000
12         };
 1         var defaults = {
 2             contentClass : 'tab-content',
 3             navClass : 'tab-nav',
 4             activeClass : 'active',
 5             triggerElements : '*',
 6             activeIndex : 0,
 7             evType : 'click',
 8             effect : 'none',
 9             auto : false,
10             delay : 3000,
11             duration : 1000
12         };
 $('#tabs').tabs();

defaults参数,扩展多少个布局:

defaults参数,增添几个布局:

事例3: 传入参数,设置选项卡切换事件为mouseover

effect: none(没有特效) / fade( 光滑度切换 )

effect: none(没有特效) / fade( 反射率切换 )

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

auto: false(不会活动切换) / true ( 开启自动切换 )

auto: false(不会活动切换) / true ( 开启自动切换 )

js调用:

delay : 多少时间 切换三个选项卡

delay : 多少时间 切换二个选项卡

 $('#tabs').tabs({event:'mouseover'});

duration: 光滑度开启,这几个才会用到,表示,多久内 实现发光度的切换

duration: 折射率开启,那几个才会用到,表示,多久内 完毕光滑度的切换

事例4: 添加选项卡:

1 if ( options.effect == 'fade' ) {
2             tabContent.style.position = 'relative';
3             for( var i = 0; i < tabContentEle.length; i++ ) {
4                 tabContentEle[i].style.position = 'absolute';
5             }
6             tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
7             opt.delay += opt.duration;
8         }
1 if ( options.effect == 'fade' ) {
2             tabContent.style.position = 'relative';
3             for( var i = 0; i < tabContentEle.length; i++ ) {
4                 tabContentEle[i].style.position = 'absolute';
5             }
6             tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
7             opt.delay += opt.duration;
8         }
<input type="button" value="添加选项卡" onclick="addTab()">

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

当打开光滑度变化的时候,把选项卡成分设置成定位情势,当前当选的选项卡,层级为最高!!!
( 假诺不是参天层级,那么默许是最终一个选项卡在最上边,所以 “内容4”
就会在最上层,显著不是我们想要的结果)层级+定位
这一招也很常用,平日用来做展现隐藏,和反射率变化.

当打开折射率变化的时候,把选项卡成分设置成定位形式,当前相中的选项卡,层级为最高!!!
( 借使不是参天层级,那么私下认可是终极八个选项卡在最上面,所以 “内容4”
就会在最上层,明显不是大家想要的结果)层级+定位
这一招也很常用,日常用来做显示隐藏,和反射率变化.

js调用:

据说opt配置,判断是或不是打开了auto自动切换作用

基于opt配置,判断是还是不是打开了auto自动切换功效

 $('#tabs').tabs();
 var tabCount =4;
 function addTab(){
   tab.tabs('add',{
     title:'tab-'+tabCount+'',
     href:'#tab-'+tabCount+'',
     content:'Tab----'+tabCount+'',
     iconCls:true
   });
   tabCount++;
 }
 1  //是否自动播放
 2         if ( opt.auto ) {
 3             for( var i = 0 ; i < tabNavEle.length; i++ ){
 4                 tabNavEle[i].index = i;
 5                 tabNavEle[i].onmouseover = function(){
 6                     _api.stop();
 7                     _api.setIndex( this.index );
 8                 };
 9                 tabNavEle[i].onmouseout = function(){
10                     _api.start();
11                     _api.setIndex( this.index );
12                 };
13             }
14             _api.start();
15         }
 1  //是否自动播放
 2         if ( opt.auto ) {
 3             for( var i = 0 ; i < tabNavEle.length; i++ ){
 4                 tabNavEle[i].index = i;
 5                 tabNavEle[i].onmouseover = function(){
 6                     _api.stop();
 7                     _api.setIndex( this.index );
 8                 };
 9                 tabNavEle[i].onmouseout = function(){
10                     _api.start();
11                     _api.setIndex( this.index );
12                 };
13             }
14             _api.start();
15         }

总结:

万一打开了,做两件工作:

若果翻开了,做两件事情:

经过不一样的Id调用,就能够创造区别的tab结构,样式则通过id来自定义差异的样式即可。

1,调用start()函数,让索引+1

1,调用start()函数,让索引+1

表哥不才.欢迎各位大神指教….

4858美高梅 ,2,选项卡导航部分,添加事件控制 自动播放的刹车和起头

2,选项卡导航部分,添加事件控制 自动播放的中止和起来

德姆o下载地址: MyUI-tabs

start与stop方法?

start与stop方法?

如上所述正是本文的全体内容了,希望大家能够喜欢。

 1 _api.stop = function(){
 2             timer && clearInterval( timer );
 3         };
 4 
 5         _api.start = function(){
 6             _api.stop();
 7             timer = setInterval( function(){
 8                 _api.next();
 9             }, opt.delay );
10         };
 1 _api.stop = function(){
 2             timer && clearInterval( timer );
 3         };
 4 
 5         _api.start = function(){
 6             _api.stop();
 7             timer = setInterval( function(){
 8                 _api.next();
 9             }, opt.delay );
10         };

你或然感兴趣的稿子:

  • 基于JQuery的四个Tab选项卡插件
  • JQuery
    Tab选项卡效果代码立异版
  • jQuery完毕Tab选项卡切换效果简单演示
  • 热气腾腾效果的TAB选项卡jquery
    插件
  • jQuery达成tab选项卡效果的法门
  • jQuery简单完结tab选项卡切换效果
  • jQuery完成滚动切换的tab选项卡效果代码
  • jQuery完毕TAB选项卡切换特效简单演示
  • jquery编写Tab选项卡滚动导航切换特效
  • jQuery达成活动端Tab选项卡效果

调用next方法,你应有猜拿到next方法做的事务就是索引+1 吧

调用next方法,你应有猜得到next方法做的工作就是索引+1 吧

1  _api.next = function(){
2             var i = ( _index + 1 ) % _contentLen;
3             _api.setIndex( i );
4         };
1  _api.next = function(){
2             var i = ( _index + 1 ) % _contentLen;
3             _api.setIndex( i );
4         };

索引+1之后,再切换选项卡

索引+1之后,再切换选项卡

说到底在setIndex方法:扩充反射率变化

最终在setIndex方法:扩大反射率变化

 1 if ( _index != index ) {
 2                         tabContentEle[_index].style.zIndex = _contentLen + 1;
 3                         for (var i = 0; i < tabContentEle.length; i++) {
 4                             if (i != _index) {
 5                                 tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
 6                                 tabContentEle[i].style.opacity = 1;
 7                             }
 8                         }
 9                         animate(tabContentEle[_index], {'opacity': 0}, function () {
10                             tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
11                             _index = index;
12                         });
13                     }
 1 if ( _index != index ) {
 2                         tabContentEle[_index].style.zIndex = _contentLen + 1;
 3                         for (var i = 0; i < tabContentEle.length; i++) {
 4                             if (i != _index) {
 5                                 tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
 6                                 tabContentEle[i].style.opacity = 1;
 7                             }
 8                         }
 9                         animate(tabContentEle[_index], {'opacity': 0}, function () {
10                             tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
11                             _index = index;
12                         });
13                     }

完整的js代码有220行:

完整的js代码有220行:

4858美高梅 34858美高梅 4

4858美高梅 54858美高梅 6

  1 /**
  2  * Created by ghostwu(吴华).
  3  */
  4 (function(){
  5     var G = function( selectors, context ){
  6         return new G.fn.init( selectors, context );
  7     }
  8     G.fn = G.prototype = {
  9         length : 0,
 10         constructor : G,
 11         size : function(){
 12             return this.length;
 13         },
 14         init : function( selector, context ){
 15             this.length = 0;
 16             context = context || document;
 17             if ( selector.indexOf( '#' ) == 0 ){
 18                 this[0] = document.getElementById( selector.substring( 1 ) );
 19                 this.length = 1;
 20             }else {
 21                 var aNode = context.querySelectorAll( selector );
 22                 for( var i = 0, len = aNode.length; i < len; i++ ) {
 23                     this[i] = aNode[i];
 24                 }
 25                 this.length = len;
 26             }
 27             this.selector = selector;
 28             this.context = context;
 29             return this;
 30         }
 31     }
 32 
 33     G.fn.init.prototype = G.fn;
 34     G.extend = G.fn.extend = function () {
 35         var i = 1,
 36             len = arguments.length,
 37             dst = arguments[0],
 38             j;
 39         if (dst.length === undefined) {
 40             dst.length = 0;
 41         }
 42         if (i == len) {
 43             dst = this;
 44             i--;
 45         }
 46         for (; i < len; i++) {
 47             for (j in arguments[i]) {
 48                 dst[j] = arguments[i][j];
 49                 dst.length++;
 50             }
 51         }
 52         return dst;
 53     };
 54 
 55     function css(obj, attr, value) {
 56         if (arguments.length == 3) {
 57             obj.style[attr] = value;
 58         } else {
 59             if (obj.currentStyle) {
 60                 return obj.currentStyle[attr];
 61             } else {
 62                 return getComputedStyle(obj, false)[attr];
 63             }
 64         }
 65     }
 66 
 67     function animate(obj, attr, fn) {
 68         clearInterval(obj.timer);
 69         var cur = 0;
 70         var target = 0;
 71         var speed = 0;
 72         var start = new Date().getTime();//起始时间
 73         obj.timer = setInterval(function () {
 74             var bFlag = true;
 75             for (var key in attr) {
 76                 if (key == 'opacity') {
 77                     cur = css(obj, 'opacity') * 100;
 78                 } else {
 79                     cur = parseInt(css(obj, key));
 80                 }
 81                 target = attr[key];
 82                 speed = ( target - cur ) / 8;
 83                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 84                 if (cur != target) {
 85                     bFlag = false;
 86                     if (key == 'opacity') {
 87                         obj.style.opacity = ( cur + speed ) / 100;
 88                         obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
 89                     } else {
 90                         obj.style[key] = cur + speed + "px";
 91                     }
 92                 }
 93             }
 94             if (bFlag) {
 95                 var end = new Date().getTime();//结束时间
 96                 console.log( '总计:',  ( end - start ) );
 97                 clearInterval(obj.timer);
 98                 fn && fn.call(obj);
 99             }
100         }, 30 );
101     }
102 
103     G.fn.tabs = function( options ){
104         options = options || {};
105         var defaults = {
106             contentClass : 'tab-content',
107             navClass : 'tab-nav',
108             activeClass : 'active',
109             triggerElements : '*',
110             activeIndex : 0,
111             evType : 'click',
112             effect : 'none',
113             auto : false,
114             delay : 3000,
115             duration : 1000
116         };
117 
118         var opt = G.extend( {}, defaults, options );
119 
120         var tabContent = this[0].querySelector( "." + opt.contentClass );
121         var tabContentEle = tabContent.children;
122         var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );
123 
124         var _contentLen = tabContentEle.length; //选项卡个数
125         var _index = opt.activeIndex;
126         var timer = null;
127 
128         if ( options.effect == 'fade' ) {
129             tabContent.style.position = 'relative';
130             for( var i = 0; i < tabContentEle.length; i++ ) {
131                 tabContentEle[i].style.position = 'absolute';
132             }
133             tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
134             opt.delay += opt.duration;
135         }
136 
137         var _api = {};
138 
139         _api.next = function(){
140             var i = ( _index + 1 ) % _contentLen;
141             _api.setIndex( i );
142         };
143 
144         _api.stop = function(){
145             timer && clearInterval( timer );
146         };
147 
148         _api.start = function(){
149             _api.stop();
150             timer = setInterval( function(){
151                 _api.next();
152             }, opt.delay );
153         };
154 
155         _api.setIndex = function( index ){
156             //当前标签加上active样式,其余标签删除active样式
157             for ( var i = 0; i < _contentLen; i++ ) {
158                 if ( tabNavEle[i].classList.contains( 'active' ) ) {
159                     tabNavEle[i].classList.remove('active');
160                 }
161             }
162             tabNavEle[index].classList.add( 'active' );
163             switch ( opt.effect ){
164                 case 'fade':
165                     if ( _index != index ) {
166                         tabContentEle[_index].style.zIndex = _contentLen + 1;
167                         for (var i = 0; i < tabContentEle.length; i++) {
168                             if (i != _index) {
169                                 tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
170                                 tabContentEle[i].style.opacity = 1;
171                             }
172                         }
173                         animate(tabContentEle[_index], {'opacity': 0}, function () {
174                             tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
175                             _index = index;
176                         });
177                     }
178                     break;
179                 default:
180                     for ( var i = 0; i < _contentLen; i++ ) {
181                         tabContentEle[i].style.display = 'none';
182                     }
183                     tabContentEle[index].style.display = 'block';
184                     _index = index;
185             }
186         }
187 
188         _api.setIndex( _index ); //默认的选项卡
189 
190         //所有的标签绑定事件
191         for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
192             tabNavEle[i].index = i;
193             tabNavEle[i].addEventListener( opt.evType, function(){
194                 var i = this.index;
195                 _api.setIndex( i );
196             }, false );
197         }
198 
199         //是否自动播放
200         if ( opt.auto ) {
201             for( var i = 0 ; i < tabNavEle.length; i++ ){
202                 tabNavEle[i].index = i;
203                 tabNavEle[i].onmouseover = function(){
204                     _api.stop();
205                     _api.setIndex( this.index );
206                 };
207                 tabNavEle[i].onmouseout = function(){
208                     _api.start();
209                     _api.setIndex( this.index );
210                 };
211             }
212             _api.start();
213         }
214 
215         return this;
216     }
217 
218     var $ = function( selectors, context ){
219         return G( selectors, context );
220     }
221     window.$ = $;
222 })();
  1 /**
  2  * Created by ghostwu(吴华).
  3  */
  4 (function(){
  5     var G = function( selectors, context ){
  6         return new G.fn.init( selectors, context );
  7     }
  8     G.fn = G.prototype = {
  9         length : 0,
 10         constructor : G,
 11         size : function(){
 12             return this.length;
 13         },
 14         init : function( selector, context ){
 15             this.length = 0;
 16             context = context || document;
 17             if ( selector.indexOf( '#' ) == 0 ){
 18                 this[0] = document.getElementById( selector.substring( 1 ) );
 19                 this.length = 1;
 20             }else {
 21                 var aNode = context.querySelectorAll( selector );
 22                 for( var i = 0, len = aNode.length; i < len; i++ ) {
 23                     this[i] = aNode[i];
 24                 }
 25                 this.length = len;
 26             }
 27             this.selector = selector;
 28             this.context = context;
 29             return this;
 30         }
 31     }
 32 
 33     G.fn.init.prototype = G.fn;
 34     G.extend = G.fn.extend = function () {
 35         var i = 1,
 36             len = arguments.length,
 37             dst = arguments[0],
 38             j;
 39         if (dst.length === undefined) {
 40             dst.length = 0;
 41         }
 42         if (i == len) {
 43             dst = this;
 44             i--;
 45         }
 46         for (; i < len; i++) {
 47             for (j in arguments[i]) {
 48                 dst[j] = arguments[i][j];
 49                 dst.length++;
 50             }
 51         }
 52         return dst;
 53     };
 54 
 55     function css(obj, attr, value) {
 56         if (arguments.length == 3) {
 57             obj.style[attr] = value;
 58         } else {
 59             if (obj.currentStyle) {
 60                 return obj.currentStyle[attr];
 61             } else {
 62                 return getComputedStyle(obj, false)[attr];
 63             }
 64         }
 65     }
 66 
 67     function animate(obj, attr, fn) {
 68         clearInterval(obj.timer);
 69         var cur = 0;
 70         var target = 0;
 71         var speed = 0;
 72         var start = new Date().getTime();//起始时间
 73         obj.timer = setInterval(function () {
 74             var bFlag = true;
 75             for (var key in attr) {
 76                 if (key == 'opacity') {
 77                     cur = css(obj, 'opacity') * 100;
 78                 } else {
 79                     cur = parseInt(css(obj, key));
 80                 }
 81                 target = attr[key];
 82                 speed = ( target - cur ) / 8;
 83                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 84                 if (cur != target) {
 85                     bFlag = false;
 86                     if (key == 'opacity') {
 87                         obj.style.opacity = ( cur + speed ) / 100;
 88                         obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
 89                     } else {
 90                         obj.style[key] = cur + speed + "px";
 91                     }
 92                 }
 93             }
 94             if (bFlag) {
 95                 var end = new Date().getTime();//结束时间
 96                 console.log( '总计:',  ( end - start ) );
 97                 clearInterval(obj.timer);
 98                 fn && fn.call(obj);
 99             }
100         }, 30 );
101     }
102 
103     G.fn.tabs = function( options ){
104         options = options || {};
105         var defaults = {
106             contentClass : 'tab-content',
107             navClass : 'tab-nav',
108             activeClass : 'active',
109             triggerElements : '*',
110             activeIndex : 0,
111             evType : 'click',
112             effect : 'none',
113             auto : false,
114             delay : 3000,
115             duration : 1000
116         };
117 
118         var opt = G.extend( {}, defaults, options );
119 
120         var tabContent = this[0].querySelector( "." + opt.contentClass );
121         var tabContentEle = tabContent.children;
122         var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );
123 
124         var _contentLen = tabContentEle.length; //选项卡个数
125         var _index = opt.activeIndex;
126         var timer = null;
127 
128         if ( options.effect == 'fade' ) {
129             tabContent.style.position = 'relative';
130             for( var i = 0; i < tabContentEle.length; i++ ) {
131                 tabContentEle[i].style.position = 'absolute';
132             }
133             tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
134             opt.delay += opt.duration;
135         }
136 
137         var _api = {};
138 
139         _api.next = function(){
140             var i = ( _index + 1 ) % _contentLen;
141             _api.setIndex( i );
142         };
143 
144         _api.stop = function(){
145             timer && clearInterval( timer );
146         };
147 
148         _api.start = function(){
149             _api.stop();
150             timer = setInterval( function(){
151                 _api.next();
152             }, opt.delay );
153         };
154 
155         _api.setIndex = function( index ){
156             //当前标签加上active样式,其余标签删除active样式
157             for ( var i = 0; i < _contentLen; i++ ) {
158                 if ( tabNavEle[i].classList.contains( 'active' ) ) {
159                     tabNavEle[i].classList.remove('active');
160                 }
161             }
162             tabNavEle[index].classList.add( 'active' );
163             switch ( opt.effect ){
164                 case 'fade':
165                     if ( _index != index ) {
166                         tabContentEle[_index].style.zIndex = _contentLen + 1;
167                         for (var i = 0; i < tabContentEle.length; i++) {
168                             if (i != _index) {
169                                 tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
170                                 tabContentEle[i].style.opacity = 1;
171                             }
172                         }
173                         animate(tabContentEle[_index], {'opacity': 0}, function () {
174                             tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
175                             _index = index;
176                         });
177                     }
178                     break;
179                 default:
180                     for ( var i = 0; i < _contentLen; i++ ) {
181                         tabContentEle[i].style.display = 'none';
182                     }
183                     tabContentEle[index].style.display = 'block';
184                     _index = index;
185             }
186         }
187 
188         _api.setIndex( _index ); //默认的选项卡
189 
190         //所有的标签绑定事件
191         for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
192             tabNavEle[i].index = i;
193             tabNavEle[i].addEventListener( opt.evType, function(){
194                 var i = this.index;
195                 _api.setIndex( i );
196             }, false );
197         }
198 
199         //是否自动播放
200         if ( opt.auto ) {
201             for( var i = 0 ; i < tabNavEle.length; i++ ){
202                 tabNavEle[i].index = i;
203                 tabNavEle[i].onmouseover = function(){
204                     _api.stop();
205                     _api.setIndex( this.index );
206                 };
207                 tabNavEle[i].onmouseout = function(){
208                     _api.start();
209                     _api.setIndex( this.index );
210                 };
211             }
212             _api.start();
213         }
214 
215         return this;
216     }
217 
218     var $ = function( selectors, context ){
219         return G( selectors, context );
220     }
221     window.$ = $;
222 })();

View Code

View Code

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有