recherche

Maison  >  Article  >  interface Web  >  Analyse étape par étape de JavaScript pour implémenter le changement automatique d'onglet function_javascript skills

Analyse étape par étape de JavaScript pour implémenter le changement automatique d'onglet function_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:18:261237parcourir

Cet article partage une fonction d'onglet qui permet la commutation automatique et donne son processus de mise en œuvre spécifique.

Tout le monde doit être familier avec les onglets. Ils sont utilisés très fréquemment. Habituellement, il faut cliquer ou glisser les onglets pour basculer.
L'exemple de code est le suivant :

<html>
<head>
<meta charset=" utf-8">
<title>tab切换</title>
<style type="text/css">
body,h2,p{
 margin:0px;
 padding:0px;
}ul,li{
 margin:0px;
 padding:0px;
 float:left;
 list-style-type:none;
 }
body{font-size:12px;}
.box{
 width:722px;
 height:99px;
 margin:10px auto;
 border:1px solid #dedede;
}
.list{
 width:711px;
 height:22px;
 float:left;
 padding:4px 0 0 9px;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
}
.list li{
 width:74px;
 height:22px;
 float:left;
 cursor:pointer;
 color:#656565;
 line-height:22px;
 text-align:center;
}
.list li.hove{
 width:72px;
 height:20px;
 color:#fc6703;
 line-height:20px;
 border-top:1px solid #dedede;
 border-left:1px solid #dedede;
 border-right:1px solid #dedede;
 border-bottom:1px solid #fff;
 background:#fff;
}
.content{
 width:722px;
 height:72px;
 float:left;
 display:none;
}
</style>
<script>
function $(id){
 return typeof id === "string" &#63; document.getElementById(id) : id;
}
 
function $$(oParent, elem){
 return (oParent || document).getElementsByTagName(elem);
}
 
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
 if(aElem[index].className == sClass){
  aClass.push(aElem[index]);
 }
 }
 return aClass;
}
 
function addEvent(oElm, strEvent, fuc) {
 addEventListener&#63;oElm.addEventListener(strEvent,fuc,false):oElm.attachEvent('on'+strEvent,fuc);
};
function Tab(){
 this.initialize.apply(this, arguments);
}
 
 
Object.extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
};
 
Tab.prototype = {
 initialize : function(obj, dis, content, onEnd, eq){
 this.obj = $(obj);
 this.oList = $$$(this.obj, 'list')[0];
 this.aCont = $$$(this.obj, content);
 this.oUl = $$(this.oList, 'ul')[0];
 this.aLi = this.oUl.children;
 this.timer = null;
 eq &#63; (this.aLi.length < eq &#63; eq = 0 : eq) : eq = 0;
 this.oEve(onEnd);
 this.onEnd.method == 'mouseover' &#63; this.method = "mouseover" : this.method = "click";
 this.onEnd.autoplay == 'stop' &#63; this.autoplay = "stop" : this.autoplay = "play";
 this.aCont[eq].style.display = 'block';
 this.aLi[eq].className = 'hove';
 this.display(dis);
 this.autoPlayTab(eq, dis);
 },
 oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
 },
 display : function(dis){
 var _this = this;
 var index = iNow = 0;
 for(index=0;index<_this.aLi.length;index++){
  (function(){
  var j = index;
  addEvent(_this.aLi[j], _this.method,
  function() {
   _this.fnClick(j,dis);
   _this.autoPlayTab(j, dis);
  })
  })()
 }
 },
 autoPlayTab : function(iNow, dis){
 if(this.autoplay == 'play'){
  var _this = this;
  this.iNow = iNow;
  this.obj.onmouseover = function(){
  clearInterval(_this.timer);
  };
  this.obj.onmouseout = function(){
  _this.timer = setInterval(playTab,5000);
  };
  clearInterval(_this.timer);
  _this.timer = setInterval(playTab,5000);
  function playTab(){
  if(_this.iNow == _this.aLi.length)_this.iNow = 0;
  _this.fnClick(_this.iNow, dis)
  _this.iNow++
  }
 }
 },
 fnClick : function(oBtn, dis){
 var index = 0;
 for(index=0;index<this.aLi.length;index++){
  this.aLi[index].className = '';
  this.aCont[index].style.display = 'none';
 }
 this.aLi[oBtn].className = dis;
 this.aCont[oBtn].style.display = 'block';
 }
};
window.onload = function(){
 new Tab("box", 'hove', 'content', {
 method : 'mouseover',
 autoplay : 'play'
 },0);
};
</script>
</head>
<body>
<div id="box" class="box">
 <div class="list">
 <ul>
  <li>div教程</li>
  <li>jquery教程</li>
  <li>css教程</li>
 </ul>
 </div>
 <div class="content">蚂蚁部落欢迎您</div>
 <div class="content">本站url地址是softwhy.com</div>
 <div class="content">只有努力才会有美好的未来</div>
</div>
</body>
</html>

Le code ci-dessus répond à nos exigences. Voici une introduction à son processus de mise en œuvre.
(1) Simulez le sélecteur d'identifiant dans jQuery, le paramètre est la valeur de l'attribut id de l'élément

fonction $(id){
return typeof id === "string" ? document.getElementById(id) : id;
>

(2).function $$(oParent, elem){
Retour (oParent || document).getElementsByTagName(elem);
}, cette fonction implémente la collection d'objets de tous les éléments spécifiques sous l'élément spécifié.
(3). La fonction de cette fonction est de stocker tous les éléments avec la valeur d'attribut de classe sClass sous l'élément oParent dans le tableau

. 
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
  if(aElem[index].className == sClass){
   aClass.push(aElem[index]);
  }
 }
 return aClass;
}

(4) Encapsulation de liaison des fonctions de traitement d'événements pour assurer la compatibilité du navigateur. 

.function addEvent(oElm, strEvent, fuc) {
 addEventListener&#63;oElm.addEventListener(strEvent,fuc,false) : oElm.attachEvent('on'+strEvent,fuc);
}

(5).Cette méthode implémente les opérations d'initialisation de base

function Tab(){ this.initialize.apply(this, arguments);
}

(6). Implémentation de la fonction de fusion d'objets, par exemple, vous pouvez fusionner les attributs de l'objet a dans l'objet b 

Object.extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}

(7).Tab.prototype = {}, définit l'objet prototype du constructeur Tab.
(8).initialize: function(obj, dis, content, onEnd, eq){}, cette méthode peut effectuer certaines opérations d'initialisation. Le premier paramètre est la valeur de l'attribut id de l'élément, le deuxième paramètre est la classe de style de classe, le troisième paramètre est le nom de classe de style de classe du div de contenu, le quatrième paramètre est un littéral d'objet, qui stocke certains paramètres associés. spécifiez quel onglet est sélectionné par défaut, qui est un nombre.
(9).this.obj = $(obj), récupère l'objet élément spécifié.
(10).this.oList = $$$(this.obj, 'list')[0], récupère l'élément div externe du titre dont la valeur de l'attribut de classe est list.
(11).this.aCont = $$$(this.obj, content), obtient la collection d'éléments de contenu d'onglet.
(12).this.oUl = $$(this.oList, 'ul')[0], récupère l'élément titre ul.
(13).this.aLi = this.oUl.children, récupère tous les éléments enfants sous l'élément ul.
(14).this.timer = null, utilisé comme identifiant de la fonction timer.
(15).eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0, si eq est 0, utilisez 0, sinon la valeur transmise par eq sera utilisée, et la valeur eq doit être inférieur à la longueur du tableau, sinon la valeur eq est définie sur 0.
(16).this.oEve(onEnd), remplace les paramètres par défaut.
(17).this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click", détermine s'il s'agit d'un événement de survol de la souris ou d'un événement de clic.
(18).this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play", la lecture par défaut est automatique, sinon ce ne sera pas une lecture automatique.
(19).this.aCont[eq].style.display = 'block', l'élément de contenu par défaut est affiché.
(20).this.aLi[eq].className = 'hove', définissez le style d'onglet de titre correspondant.
(21).this.display(dis), enregistrez la fonction de gestionnaire d'événements, le paramètre est un nom de classe de style.
(22).this.autoPlayTab(eq, dis), exécutez cette fonction pour vous assurer que l'onglet peut être automatiquement commuté lorsque la commutation automatique est autorisée.
(23).

est utilisé pour fusionner des objets 

oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
}

C'est le paramètre par défaut

this.onEnd = {
 method: 'mouseover',
 autoplay: 'stop',
}

Si l'objet onend est passé, fusionnez-le dans l'objet par défaut, sinon fusionnez-le dans un objet vide

Object.extend(this.onEnd, onEnd || {})

(24).display : function(dis){}, fonction de traitement d'événements d'enregistrement, le paramètre est un nom de classe de style.
(25).var _this = this, attribuez ceci à la variable _this, la raison pour laquelle cela est fait sera présentée plus tard. (26).var index = iNow = 0, effectuez quelques opérations d'initialisation.
(27).for(index=0;index<_this.aLi.length;index){}, enregistrez la fonction de traitement d'événements via le parcours de boucle for.
(28)

.(function(){ var j = index;
 addEvent(_this.aLi[j], _this.method,
 function() {
  _this.fnClick(j,dis);
  _this.autoPlayTab(j, dis);
 })
})()

使用匿名自执行函数，其实就是形成了一个闭包。
之所以用闭包，是为了隔离匿名函数内部的index值和外部的index值。
之所以将this赋值给_this是因为，事件处理函数中的this是指向元素li的，而不是指向Tab()构造函数的对象实例。
（29）.autoPlayTab : function(iNow, dis){}，此函数实现了自动切换功能，第一个参数规定当前选项卡切换所处的索引位置，第二个参数一个样式类名称，就是设置处于当前状态的样式。
（30）.if(this.autoplay == 'play'){}，判断是否允许自动切换。
（31）.var _this = this,将this赋值给变量_this，原理和上面是一样的。
（32）.this.iNow = iNow，进行赋值操作。
（33）.this.obj.onmouseover = function(){
  clearInterval(_this.timer);
}，当鼠标悬浮的时候的时候停止定时器函数的执行，其实也就是停止自动切换。

（34）.当鼠标离开的时候，开始自动切换动作

this.obj.onmouseout = function(){
 _this.timer = setInterval(playTab,5000);
}

（35）.clearInterval(_this.timer)，停止以前的定时器函数执行。
（36）._this.timer = setInterval(playTab,5000)，开始自动切换。
（37）.

function playTab(){
 if(_this.iNow == _this.aLi.length)_this.iNow = 0;
 _this.fnClick(_this.iNow, dis)
  _this.iNow++

}

不断调用此函数就实现了自动切换功能。
如果当前的索引等于li元素的个数，那么就将其设置为0，也就是从头进行新一轮切换。
然后调用对应的方法，并且让索引值自增。

（38）实现了选项卡的切换显示隐藏和样式设置效果

.fnClick : function(oBtn, dis){
  var index = 0;
  for(index=0;index<this.aLi.length;index++){
   this.aLi[index].className = '';
   this.aCont[index].style.display = 'none';
  }
  this.aLi[oBtn].className = dis;
  this.aCont[oBtn].style.display = 'block';
 }

以上就是本文的全部内容，希望对大家的学习有所帮助。

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript natif implémente les compétences effect_javascript de la barre de défilementArticle suivant：JavaScript natif implémente les compétences effect_javascript de la barre de défilement

Articles Liés

Voir plus