Maison >interface Web >js tutoriel >Explication détaillée de l'effet de la page à onglet JQuery examples_jquery
Explication détaillée de l'effet de la page à onglet JQuery examples_jquery
- WBOYoriginal
- 2016-05-16 15:23:411471parcourir
L'exemple de cet article décrit comment implémenter l'effet de page à onglet JQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Dans le premier onglet, la souris glisse pour afficher différents onglets. Dans le deuxième onglet, cliquez sur différents onglets pour charger le contenu dans d'autres pages. Les images en attente de chargement sont lentement masquées.
/WebRoot/4.Tab.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例4：标签页效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div class="contentin contentfirst">我是内容1</div> <div class="contentfirst">我是内容2</div> <div class="contentfirst">我是内容3</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">装入完整页面</li> <li>装入部分页面</li> <li>从远程获取数据</li> </ul> <div id="contentsecond"> <img alt="Explication détaillée de leffet de la page à onglet JQuery examples_jquery" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
/WebRoot/js/tab.js：
var timoutid;
$(document).ready(function(){
//找到所有的标签
/*
$("li").mouseover(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").hide();
//当前标签所对应的内容区域显示出来
});
*/
$("#tabfirst li").each(function(index){
//每一个包装li的jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
$(this).mouseover(function(){
var liNode = $(this);
timoutid = setTimeout(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timoutid);
});
});
//在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
$("#realcontent").load("TabLoad.html");
//找到标签2效果对应的三个标签，注册鼠标点击事件
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入静态完成页面
$("#realcontent").load("TabLoad.html");
} else if (index == 1) {
//装入动态部分页面
$("#realcontent").load("TabLoad.jsph2");
} else if (index == 2) {
//装入远程数据（这里也是一个动态页面输出的数据）
//$("#realcontent").load("TabData.jsp");
$("#realcontent").load("TabLoad.jsp");
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前，function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
//整个页面中任意ajax交互结束后，function中的内容会被执行
$(this).slideUp(5000);
});
});
/WebRoot/css/tab.css :
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
#tabsecond li {
float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
z-index: 100;
position: relative;
}
#contentsecond {
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
position: relative;
top: -1px;
}
img {
display: none;
}
/WebRoot/TabLoad.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>这是一个静态页面</title> </head> <body> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> </body> </html>
/WebRoot/TabLoad.jsp :
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动态页面</title> </head> <body> <h2> <%=new Date() %><br> 1.这是一个动态页面的一部分<br> 2.这是一个动态页面的一部分<br> 3.这是一个动态页面的一部分<br> </h2> 这部分不显示<br> </body> </html>
JQuery et autres connaissances en développement apprises dans cette section :
1. Un groupe de balises est géré par un ul, et chaque balise est un li dans le ul ; le contenu sous la balise est géré par un div
2. Les éléments suivant l'élément flottant (float) entoureront l'élément flottant. Si vous ne souhaitez pas cet environnement, vous pouvez définir l'attribut clear sur l'élément après l'élément flottant pour effacer cet effet.
3. Pour réaliser l'intégration de l'étiquette actuelle et de la zone de contenu, cela peut être réalisé en utilisant la même couleur d'arrière-plan et en utilisant la même bordure de couleur pour l'étiquette actuelle.
4. Les méthodes mouseover et mouseout dans JQuery correspondent aux événements onmouseover et onmouseout du javascript standard et peuvent gérer les événements d'entrée et de sortie de la souris.
5. Exécutez la méthode each sur un objet JQuery contenant plusieurs éléments. Le contenu de la fonction qui peut être enregistré dans la méthode each est exécuté par chaque élément. Parallèlement, cette fonction peut également recevoir un paramètre indiquant la valeur d'index de cet élément. De nombreuses méthodes dans JQuery utilisent également chacune
6. La méthode eq ne peut obtenir qu'un des multiples éléments contenus dans l'objet JQuery en fonction de la valeur d'index, et toujours renvoyer le nouvel objet JQuery correspondant à l'élément.
7. Utilisez eq dans le sélecteur, tel que $("div:eq(1)")
8. Les méthodes addClass et removeClass sont utilisées pour ajouter et supprimer la définition de classe des éléments.
9. La méthode setTimeout en Javascript peut retarder l'exécution de certains codes, et le clearTimeout correspondant peut effacer l'opération de retard défini.
10. Lorsque vous créez une application AJAX, vous pouvez envisager de la déboguer sur FireFox maintenant, puis de la vérifier dans d'autres navigateurs et de corriger d'éventuels problèmes de compatibilité.
11. L'attribut curseur peut contrôler le style de la souris sur l'élément. La valeur de l'attribut pointeur représente le style de la main, qui est notre style de souris de lien commun
12. L'attribut position peut contrôler la façon dont l'élément est positionné. Lorsque la valeur est relative, cela signifie un positionnement par rapport à la position d'origine. Vous pouvez définir les valeursde haut, gauche, bas et droite
Contrôler le mouvement des éléments par rapport à leurs positions d'origine
13.z-index peut contrôler la hauteur de couche des éléments sur la page. Plus la valeur est grande, plus elle sera haute dans la couche de la page, et elle couvrira également certains éléments avec des valeurs d'index z inférieures. Uniquement pour les éléments dont la valeur de position est relative ou absolue, le z-index prendra effet.
14. La méthode de chargement dans JQuery est très puissante. Elle peut charger les données de sortie d'une page statique ou dynamique spécifiée ou d'un programme côté serveur dans l'élément enveloppé par l'objet JQuery qui exécute la méthode de chargement.
15. La méthode de chargement prend également en charge le chargement partiel. Ajoutez un espace après l'adresse de la page chargée, puis utilisez le sélecteur pour charger la partie de la page qui correspond au sélecteur.
16. La page chargée doit être encodée en UTF-8, sinon les caractères chinois seront tronqués après le chargement.
17.bind peut être utilisé pour lier des événements Javascript ou définis dans JQuery au nœud spécifié. Pour les événements qui ne fournissent pas directement de méthodes d'inscription dans JQuery, vous pouvez les enregistrer de cette manière. Le deuxième paramètre de la méthode peut être la définition de la méthode d'exécution de l'événement.
18.ajaxStart et ajaxStop correspondent aux événements avant et après le début et la fin de l'interaction ajax. Après avoir enregistré ces deux événements pour un nœud, la méthode spécifiée sera exécutée avant et après le début et la fin de l'interaction ajax sur la page actuelle.
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript