suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung des JQuery-Registerkarteneffekts examples_jquery

Ausführliche Erläuterung des JQuery-Registerkarteneffekts examples_jquery

WBOY
WBOYOriginal
2016-05-16 15:23:411385Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie der JQuery-Registerkarteneffekt implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In der ersten Registerkarte wird die Maus bewegt, um verschiedene Registerkarten anzuzeigen. Klicken Sie auf verschiedene Registerkarten, um den Inhalt auf anderen Seiten zu laden. Der Effekt ist wie folgt:

/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="Ausführliche Erläuterung des JQuery-Registerkarteneffekts 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 und andere in diesem Abschnitt erlernte Entwicklungskenntnisse:

1. Eine Gruppe von Tags wird von einer UL verwaltet, und jedes Tag ist ein Li in der UL. Der Inhalt unter dem Tag wird von einem Div verwaltet

2. Die Elemente, die dem schwebenden Element folgen (float), umgeben das schwebende Element. Wenn Sie diese Umgebung nicht wünschen, können Sie das Clear-Attribut für das Element nach dem schwebenden Element definieren, um diesen Effekt zu löschen.

3. Um die Integration des aktuellen Etiketts und des Inhaltsbereichs zu erreichen, kann dies erreicht werden, indem die gleiche Hintergrundfarbe und der gleiche Farbrand für das aktuelle Etikett verwendet werden.

4. Die Mouseover- und Mouseout-Methoden in JQuery entsprechen den Onmouseover- und Onmouseout-Ereignissen von Standard-Javascript und können Mauseintritts- und -austrittsereignisse verarbeiten.

5. Führen Sie die Each-Methode für ein JQuery-Objekt aus, das mehrere Elemente enthält. Der Inhalt der Funktion, die für die Each-Methode registriert werden kann, wird von jedem Element ausgeführt. Gleichzeitig kann diese Funktion auch einen Parameter empfangen, der den Indexwert dieses Elements angibt. Viele Methoden in JQuery verwenden auch jede

6. Die eq-Methode kann nur eines der mehreren im JQuery-Objekt enthaltenen Elemente basierend auf dem Indexwert abrufen und dennoch das neue JQuery-Objekt zurückgeben, das dem Element entspricht.

7. Verwenden Sie eq im Selektor, z. B. $(“div:eq(1)”)

8. Die Methoden „addClass“ und „removeClass“ werden zum Hinzufügen und Entfernen der Klassendefinition von Elementen verwendet.

9. Die setTimeout-Methode in Javascript kann die Ausführung bestimmter Codes verzögern, und das entsprechende clearTimeout kann den eingestellten Verzögerungsvorgang löschen.

10. Wenn Sie eine AJAX-Anwendung erstellen, können Sie sie jetzt in FireFox debuggen und sie dann in anderen Browsern überprüfen und mögliche Kompatibilitätsprobleme beheben.

11. Das Cursor-Attribut kann den Mausstil auf dem Element steuern. Der Zeiger-Attributwert stellt den Handstil dar, der unser allgemeiner Link-Mausstil ist

12. Das Positionsattribut kann die Art und Weise steuern, wie das Element positioniert wird. Wenn der Wert relativ ist, bedeutet dies, dass er relativ zur ursprünglichen Position positioniert wird. Sie können die Werte für oben, links, unten und rechts

festlegen Steuern Sie die Bewegung von Elementen relativ zu ihren ursprünglichen Positionen


13.z-index kann die Ebenenhöhe von Elementen auf der Seite steuern. Je größer der Wert, desto höher liegt er in der Ebene der Seite und deckt auch einige Elemente mit niedrigeren Z-Indexwerten ab. Nur für Elemente, deren Positionswert relativ oder absolut ist, wird der Z-Index wirksam.

14. Die Lademethode in JQuery ist sehr leistungsfähig. Sie kann die Datenausgabe einer bestimmten statischen oder dynamischen Seite oder eines serverseitigen Programms in das vom JQuery-Objekt umschlossene Element laden, das die Lademethode ausführt.

15. Die Lademethode unterstützt auch das teilweise Laden. Fügen Sie nach der geladenen Seitenadresse ein Leerzeichen hinzu und verwenden Sie dann den Selektor, um den Teil der Seite zu laden, der dem Selektor entspricht.

16. Die geladene Seite muss UTF-8-kodiert sein, sonst werden die chinesischen Schriftzeichen nach dem Laden verstümmelt.

17.bind kann verwendet werden, um Javascript-Ereignisse oder in JQuery definierte Ereignisse an den angegebenen Knoten zu binden. Für Ereignisse, die keine direkte Registrierungsmethode in JQuery bereitstellen, können Sie sie auf diese Weise registrieren. Der zweite Parameter der Methode kann die Methodendefinition der Ereignisausführung sein.

18.ajaxStart und ajaxStop entsprechen Ereignissen vor und nach Beginn und Ende der Ajax-Interaktion. Nach der Registrierung dieser beiden Ereignisse für einen Knoten wird die angegebene Methode vor und nach Beginn und Ende der Ajax-Interaktion auf der aktuellen Seite ausgeführt.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung von Weihnachtsbaumcode basierend auf JS2Image_javascript-FähigkeitenNächster Artikel：Implementierung von Weihnachtsbaumcode basierend auf JS2Image_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen