1 Membuat Tab Dinamis Dengan JQuery

Do you want to share?

Do you like this story?

Kali ini saya akan memberi Trik Bagaimana Cara Membuat Tab Dinamis Dengan JQuery...?

Tab telah menjadi fitur umum dalam antarmuka pengguna web, dalam posting ini saya membuat contoh membuat tab dinamis dengan JQuery. Di UI JQuery sudah ada siap untuk menggunakan plugin untuk membuat konten tab, tapi aku tidak menemukan cara untuk menambahkan fungsi tab dinamis.

Contoh menggunakan tag li sebagai elemen tab, teknik yang benar-benar sederhana, ketika tab baru dibuat, sebuah id yang dihasilkan dengan variabel counter, juga elemen konten yang dibuat juga, dengan meja cocok.

D E M O

HTML
Kode ini hanya wadah, hanya ada satu li tag yang berisi tombol tab menambah baru.

<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent"></div>

JQuery

Jika kita berbicara tentang elemen dinamis, kita harus membuat sebuah elemen on the fly, dalam hal ini kita membuat tab baru dan elemen konten baru. Dalam fungsi addtab kita harus mengikat "klik" acara karena elemen yang dibuat on the fly tidak akan bekerja, jika kita menerapkan acara pada fungsi siap.

$(function() {
var total_tabs = 0;

// initialize first tab
total_tabs++;
addtab(total_tabs);

$("#addtab, #litab").click(function() {
total_tabs++;
$("#tabcontent p").hide();
addtab(total_tabs);
return false;
});

function addtab(count) {
var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');
$("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");

$("#t"+count).bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
});

$("#close"+count).bind("click", function() {
// activate the previous tab
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+count).prev().fadeIn('slow');

$(this).parent().remove();
$("#c"+count).remove();
return false;
});
}
});

CSS

#tabul {
padding: 0;
margin: 0;
padding: 5px 0;
}
#tabul li {
display: inline;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
cursor: pointer;
}
.ntabs {
background: #BDC7D5;
margin-right: 1px;
font-size: 11px;
font-weight: bold;
color: #333;
border: 1px solid #BDC7D5;
padding: 5px 3px 5px 8px;
}
.add {
padding: 5px 8px;
}
#addtab {
font-size: 16px;
text-decoration: none;
position: relative;
top: 2px;
color: #333;
}
#addtab:hover {
color: #999;
}
.ctab {
background: #E7EDF6;
position: relative;
top: 2px;
border-bottom-width: 0;
}
.close {
text-decoration: none;
color: #999;
font-weight: bold;
font-size: 14px;
padding: 0 4px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
.close:hover {
background: #999;
color: #333;
}
#tabcontent {
border: 1px solid #BDC7D5;
background: #E7EDF6;
padding: 10px;
text-align: center;
font-weight: bold;
color: #666;
font-size: 24px;
}

Beberapa saran yang Anda dapat menempatkan tab dalam elemen div dan menunjukkan sebagai konten tersembunyi, memperluas tag ul dinamis sehingga Anda dapat memiliki tab terbatas horizontal, dan menambahkan tombol navigasi untuk menelusuri tab dengan bermain kiri css properti.

"Selamat Mencoba"

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blog Trends di inbox anda: