cari

Rumah  >  Artikel  >  hujung hadapan web  >  contoh pemalam tab JavaScript kemahiran code_javascript

contoh pemalam tab JavaScript kemahiran code_javascript

WBOY
WBOYasal
2016-05-16 15:14:221350semak imbas

Hari ini, mari kita mulakan dengan yang paling mudah, menulis semula fungsi penukaran tab sedia ada kepada pemalam javascript.

Cara menulis fungsi asli

Cara paling mudah untuk menulis semula kaedah javascript sebagai pemalam js ialah dengan memasang kaedah ini di bawah objek global tetingkap

Mari kita lihat kod paling asli yang ditulis menggunakan fungsi:

tab.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;}

Dua kod di atas ialah kod asas dan kami akan memperbaikinya langkah demi langkah berdasarkan kod ini.

Kaedah penulisan pemalam asli

Baiklah, sekarang, mari tulis semula kaedah ini ke dalam pemalam yang dipasang di bawah objek tetingkap:

tab.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";
}
}
};

Walau bagaimanapun, kami mendapati bahawa walaupun cara penulisan ini sangat mudah, ia juga mempunyai masalah: tetingkap ialah objek global Jika kami memasang semua kaedah kami di bawahnya dan menggunakannya sebagai pemalam, apabila terdapat terlalu banyak pemalam, ia adalah mudah untuk mencipta ruang nama, sebaliknya, walaupun menggunakan js asli boleh mengurangkan pergantungan luaran, jumlah kod masih agak besar dan kaedah penulisan agak rumit.

kaedah penulisan jquery

Kami cuba memperkenalkan perpustakaan jquery dan menulis semula pemalam ini ke dalam pemalam jquery.

Pemalam jquery mempunyai tiga bentuk: bentuk peringkat kelas, bentuk peringkat objek dan bentuk komponen UI jquery

Cara menulis pemalam peringkat kelas jquery – kaedah tunggal

Mari kita lihat dahulu bentuk pemalam peringkat kelas.

Dalam bentuk pemalam peringkat kategori pertama, kaedah ini dipasang terus ke ruang akar jquery sebagai kaedah alat:

tab.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";
}
}
};

Cara menulis pemalam peringkat kelas jquery - pelbagai kaedah

Jika anda ingin mengikat berbilang kaedah ke ruang akar jquery, kemudian tulis seperti ini:

tab.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);
}
});

Walaupun mudah dan bebas masalah untuk menggunakan kaedah alat $.extend() untuk memasang fungsi anda sendiri terus ke ruang nama akar jquery, malangnya, kaedah ini tidak dapat memanfaatkan enjin sizzle berkuasa jquery, iaitu, Ini kaedah tidak boleh digunakan pada elemen DOM yang anda pilih.

Jadi kita perlu menggunakan kaedah pembangunan pemalam peringkat objek.

Cara menulis pemalam tahap objek jquery

Kaedah pembangunan pemalam peringkat objek ialah menggunakan kaedah $.fn.extend() untuk mengikat kaedahnya sendiri pada prototaip jquery, supaya semua pasukan objek jquery boleh menggunakan kaedah ini untuk melaksanakan operasi yang sepadan

Kod adalah seperti berikut:

tab.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);

Di sini, kami menggunakan penutupan untuk merangkum pemalam untuk mengelakkan pencemaran ruang nama

Di sini, masih terdapat beberapa masalah, iaitu kaedah kita mesti lulus parameter sebelum ia boleh dijalankan Ini menyebabkan kita menggunakan $('#tab') untuk memilih div dengan id tab semasa memanggil, dan kemudian dalam pemalam kita Elemen diperoleh semula berdasarkan ID yang diluluskan.

Sekarang kami telah menggunakan pemilih jquery, kami boleh memperkenalkan ini untuk menyelesaikan masalah berlebihan mendapatkan elemen berulang kali.

kaedah penulisan pemalam peringkat objek jquery - perkenalkan ini

tab.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);

Apa yang perlu diperhatikan di sini ialah objek elemen yang kita panggil pemalam ialah ('tab'), jadi menggunakan this.find() secara langsung pada masa ini adalah bersamaan dengan ('tab').find() , bukan $ (this).find(), perhatikan menggunakan kaedah penggantian untuk membezakan perbezaan antara dua kaedah penulisan.

Sebagai pemalam, ia harus boleh dikawal oleh pembangun, jadi ia juga harus menyediakan pengguna dengan beberapa antara muka konfigurasi.

kaedah penulisan pemalam peringkat objek jquery - menambah item konfigurasi

tab.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>

Kami menukar "nama kelas gaya label tab semasa" awal daripada "semasa" kepada "semasa" dan menghantarnya ke dalam pemalam sebagai item konfigurasi

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

Kami telah membuat perubahan yang sepadan dalam lembaran gaya.

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

Di sini kami menggunakan fungsi objek gabungan kaedah $.extend() jquery untuk menulis ganti item konfigurasi lalai dengan item konfigurasi yang dihantar oleh pengguna dan akhirnya menggabungkannya menjadi item konfigurasi baharu untuk digunakan oleh atur cara seterusnya.

Di atas ialah kod contoh pemalam tab JavaScript yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Mengendalikan isu data dalam permintaan AJAX JQUERY cache_jqueryArtikel seterusnya：Mengendalikan isu data dalam permintaan AJAX JQUERY cache_jquery

Artikel berkaitan

Lihat lagi