Penjelasan terperinci tentang kesan halaman tab JQuery examples

Contoh dalam artikel ini menerangkan cara melaksanakan kesan halaman tab JQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Dalam tab pertama, tetikus meluncur ke atas untuk memaparkan tab yang berbeza Dalam tab kedua, klik pada tab yang berbeza untuk memuatkan kandungan dalam halaman lain. Kesannya adalah seperti berikut.

/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="Penjelasan terperinci tentang kesan halaman tab JQuery examples_jquery" src="images/img-loading.gif" />
 <div id="realcontent"></div>
 </div>
 </body>
</html>

Salin selepas log masuk

/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);
 });
});

Salin selepas log masuk

/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;
}

Salin selepas log masuk

/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>

Salin selepas log masuk

/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>

Salin selepas log masuk

JQuery dan pengetahuan pembangunan lain yang dipelajari dalam bahagian ini:

1. Sekumpulan teg diuruskan oleh ul, dan setiap teg adalah li dalam ul;

2. Elemen yang mengikuti elemen terapung (float) akan mengelilingi elemen terapung Jika anda tidak mahu mengelilingi ini, anda boleh menentukan atribut jelas pada elemen selepas elemen terapung untuk mengosongkan kesan ini.

3. Untuk mencapai penyepaduan label semasa dan kawasan kandungan, ini boleh dicapai dengan menggunakan warna latar belakang yang sama dan menggunakan sempadan warna yang sama untuk label semasa.

4. Kaedah alih tetikus dan keluar tetikus dalam JQuery sepadan dengan peristiwa onmouseover dan onmouseout javascript standard dan boleh mengendalikan acara masuk dan keluar tetikus.

5. Laksanakan setiap kaedah pada objek JQuery yang mengandungi berbilang elemen Kandungan fungsi yang boleh didaftarkan pada setiap kaedah dilaksanakan oleh setiap elemen. Pada masa yang sama, fungsi ini juga boleh menerima parameter yang menunjukkan nilai indeks elemen ini. Banyak kaedah dalam JQuery juga menggunakan setiap

6. Kaedah eq hanya boleh mendapatkan satu daripada berbilang elemen yang terkandung dalam objek JQuery berdasarkan nilai indeks, dan masih mengembalikan objek JQuery baharu yang sepadan dengan elemen.

7 Gunakan eq dalam pemilih, seperti $(“div:eq(1)”)

8 Kaedah addClass dan removeClass digunakan untuk menambah dan mengalih keluar definisi kelas bagi elemen.

9. Kaedah setTimeout dalam Javascript boleh menangguhkan pelaksanaan kod tertentu dan clearTimeout yang sepadan boleh mengosongkan operasi kelewatan yang ditetapkan.

10 Apabila membuat aplikasi AJAX, anda boleh mempertimbangkan untuk menyahpepijatnya pada FireFox sekarang, dan kemudian menyemaknya dalam penyemak imbas lain dan membetulkan kemungkinan masalah keserasian.

11. Atribut kursor boleh mengawal gaya tetikus pada elemen Nilai atribut penunjuk mewakili gaya tangan, iaitu gaya tetikus pautan kami

12. Atribut kedudukan boleh mengawal cara elemen diletakkan Apabila nilai adalah relatif, ia bermakna kedudukan relatif kepada kedudukan asal. Anda boleh menetapkan nilai atas, kiri, bawah dan kanan

Kawal pergerakan elemen berbanding dengan kedudukan asalnya

13.z-index boleh mengawal ketinggian lapisan elemen pada halaman Semakin besar nilai, semakin tinggi ia berada dalam lapisan halaman dan ia juga akan meliputi beberapa elemen dengan nilai indeks z yang lebih rendah. Hanya untuk elemen yang nilai kedudukannya adalah relatif atau mutlak, indeks-z akan berkuat kuasa.

14. Kaedah pemuatan dalam JQuery sangat berkuasa Ia boleh memuatkan output data daripada halaman statik atau dinamik atau program sebelah pelayan ke dalam elemen yang dibalut oleh objek JQuery yang melaksanakan kaedah pemuatan.

15. Kaedah pemuatan juga menyokong pemuatan separa Tambahkan ruang selepas alamat halaman yang dimuatkan, dan kemudian gunakan pemilih untuk memuatkan bahagian halaman yang sepadan dengan pemilih.

16 Halaman yang dimuatkan mestilah dikodkan UTF-8, jika tidak, aksara Cina akan bercelaru selepas dimuatkan.

17.bind boleh digunakan untuk mengikat peristiwa Javascript atau peristiwa yang ditakrifkan dalam JQuery ke nod yang ditentukan. Untuk acara yang tidak menyediakan kaedah pendaftaran secara langsung dalam JQuery, anda boleh mendaftarkannya dengan cara ini. Parameter kedua kaedah boleh menjadi definisi kaedah pelaksanaan acara.

18.ajaxStart dan ajaxStop sepadan dengan peristiwa sebelum dan selepas interaksi ajax bermula dan tamat Selepas mendaftarkan kedua-dua acara ini untuk nod, kaedah yang ditentukan akan dilaksanakan sebelum dan selepas interaksi ajax pada halaman semasa bermula dan berakhir.

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.