recherche

Maison  >  Article  >  interface Web  >  Exemple de plug-in d'onglet JavaScript, compétences code_javascript

Exemple de plug-in d'onglet JavaScript, compétences code_javascript

WBOY
WBOYoriginal
2016-05-16 15:14:221351parcourir

Aujourd'hui, commençons par le plus simple, réécrire une fonction de changement d'onglet existante dans un plug-in javascript.

Comment écrire des fonctions natives

Le moyen le plus simple de réécrire une méthode javascript en tant que plug-in js est de monter cette méthode sous l'objet global de la fenêtre

Jetons d'abord un coup d'œil au code le plus original écrit à l'aide de fonctions :

onglet.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>jquery_hjb_tab插件demo</title>
<link rel="stylesheet" href="h.css"/>
</head>
<body>
<div id="tab">
<div class="tabs">
<ul>
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<div class="tabCons">
<section>内容一</section>
<section>内容二</section>
<section>内容三</section>
<section>内容四</section>
</div>
</div>
<script>
window.onload = h_tab('tab');
function h_tab(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}

}
}
</script>

h.css

@charset "utf-8";
/*
//author:hjb2722404
//description:
//date:2016/2/18
*/
.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}

Les deux codes ci-dessus sont des codes de base, et nous les améliorerons étape par étape en fonction de ce code.

Méthode d'écriture native du plug-in

Bien, maintenant, réécrivons cette méthode dans un plug-in monté sous l'objet window :

onglet.html

……
// 下面是第一次改动
<script type="text/javascript" src="h_tabs.js"></script>
<script>
H_tab("tab");
</script>
</body>
</html>

h_tabs.js

window.H_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};

Cependant, nous avons constaté que même si cette façon d'écrire est très simple, elle pose également des problèmes : window est un objet global si nous montons toutes nos méthodes dessus et l'utilisons comme plug-in, lorsqu'il y en a trop. plug-ins, il est facile de créer un espace de noms, en revanche, bien que l'utilisation de js natif puisse réduire la dépendance externe, la quantité de code est encore relativement importante et la méthode d'écriture est relativement lourde.

Méthode d'écriture jquery

Nous essayons d'introduire la bibliothèque jquery et de réécrire ce plug-in en un plug-in jquery.

Le plug-in jquery se présente sous trois formes : formulaire au niveau de la classe, formulaire au niveau de l'objet et formulaire de composant jquery UI

Comment écrire des plug-ins au niveau de la classe jquery – méthode unique

Regardons d'abord la forme des plug-ins au niveau de la classe.

Sous la forme du premier plug-in de niveau catégorie, cette méthode est directement montée sur l'espace racine de jquery en tant que méthode outil :

onglet.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
</script>
</body>
</html>

h_tabs.js

$.h_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};

Comment écrire des plug-ins au niveau de la classe jquery - plusieurs méthodes

Si vous souhaitez lier plusieurs méthodes à l'espace racine jquery, écrivez comme ceci :

onglet.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
$.h_hello('hjb');
</script>
</body>
</html>

h_tabs.js

$.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
},
h_hello :function(name){
console.log("hello,",name);
}
});

Bien qu'il soit simple et sans problème d'utiliser la méthode outil $.extend() pour monter vos propres fonctions directement dans l'espace de noms racine jquery, malheureusement, cette méthode ne peut pas tirer parti du puissant moteur sizzle de jquery, c'est-à-dire ceci La méthode ne peut pas être appliquée à l’élément DOM que vous avez sélectionné.

Nous devons donc utiliser la méthode de développement de plug-in au niveau objet.

Comment écrire un plug-in au niveau objet jquery

La méthode de développement de plug-in au niveau objet consiste à utiliser la méthode $.fn.extend() pour lier sa propre méthode au prototype jquery, afin que toutes les équipes d'objets jquery puissent appliquer cette méthode pour effectuer les opérations correspondantes

Le code est le suivant :

onglet.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
//对象级别的插件引用方法，注意和上面类级别插件的写法上的区分
$('#tab').h_tab('tab');
</script>
</body>
</html>

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName('a');
var oCons = document.getElementById(tabId).getElementsByTagName('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Ici, nous utilisons une fermeture pour encapsuler le plug-in afin d'éviter la pollution de l'espace de noms

Ici, il y a encore quelques problèmes, c'est-à-dire que notre méthode doit passer des paramètres avant de pouvoir être exécutée. Cela nous amène à utiliser $('#tab') pour sélectionner le div avec l'identifiant de tab lors de l'appel, et puis dans le plug-in, nous obtenons à nouveau l'élément en fonction de l'ID transmis.

Maintenant que nous avons utilisé le sélecteur de jquery, nous pouvons l'introduire pour résoudre le problème redondant de l'obtention répétée d'éléments.

Méthode d'écriture du plug-in au niveau objet jquery - présentez ceci

onglet.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab();
</script>
</body>
</html>

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(){
//在这里引入this
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Ce qui doit être noté ici, c'est que l'objet élément que nous appelons le plug-in est ('tab'), donc utiliser this.find() directement à ce moment est équivalent à ('tab').find() , pas $ (this).find(), faites attention à l'utilisation de la méthode de substitution pour distinguer la différence entre les deux méthodes d'écriture.

En tant que plug-in, il doit être contrôlable par les développeurs, il doit donc également fournir aux utilisateurs certaines interfaces de configuration.

Méthode d'écriture du plug-in au niveau objet jquery - ajout d'éléments de configuration

onglet.html

……
<ul>
<!--对照文章开始的代码， 注意这里的改动 -->
<li><a href="#" class="current">tab1</a></li>
<li><a href="#">tab2</a></li>
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab({
//使得当前选项卡标签的样式名称可自定义的配置
curName:'current'
});
</script>
</body>
</html>

Nous avons modifié le "nom de classe de style d'étiquette d'onglet actuel" initial de "cur" à "current" et l'avons transmis au plug-in en tant qu'élément de configuration

h.css

.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
/*注意下面一行与之前的样式代码的对比变化之处*/
.tabs ul li a.current { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}

Nous avons apporté les modifications correspondantes dans la feuille de style.

h_tabs.js

(function($){
$.fn.extend({
//给方法传入一个对象作为参数
h_tab:function(opts){
//定义默认的配置
var defaults ={
curName : 'cur'
};
//将传入的参数覆盖默认参数中的默认项，最终合并到一个新的参数对象上
var Opt = $.extend({},defaults,opts);
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
//在这里使用配置项的值
this.className = Opt['curName'];
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Ici, nous utilisons la fonction de fusion d'objets de la méthode $.extend() de jquery pour écraser les éléments de configuration par défaut avec les éléments de configuration transmis par l'utilisateur et enfin les fusionner dans un nouvel élément de configuration destiné aux programmes suivants.

Ce qui précède est l'exemple de code du plug-in de l'onglet JavaScript introduit par l'éditeur. J'espère qu'il sera utile à tout le monde !

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：Gestion des problèmes de données dans la requête AJAX de JQUERY cache_jqueryArticle suivant：Gestion des problèmes de données dans la requête AJAX de JQUERY cache_jquery

Articles Liés

Voir plus