Rumah >hujung hadapan web >tutorial js >contoh pemalam tab JavaScript kemahiran code_javascript
contoh pemalam tab JavaScript kemahiran code_javascript
- WBOYasal
- 2016-05-16 15:14:221381semak 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!
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional