Plugin Daftar Konten Otomatis Sederhana (1 Level)
Tabel Konten
(function($) {
$.fn.toc = function(o, p) {
p = $.extend({title: "Table of Content"}, p);
this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) {
i = i + 1;
$(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Top ⇑</a>');
$('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol');
});
};
})(jQuery);
Penggunaan
$('#parent').toc('h3', {title: "Tabel Konten:"});
Demo
Menambahkan Efek Animasi
Kode ini berada di luar plugin, dan memiliki cara kerja yang tidak jauh berbeda dengan animasi tombol back to top:
$('#toc-list a, a[href="#toc-list"]').on("click", function() {
var hash = this.hash;
$('html, body').animate({scrollTop:$(hash).offset().top}, 600, function() {
window.location.hash = hash;
});
return false;
});
11 Komentar
Surga Kenari
ohh saya paham, di atas adalah rangkuman,
dan di bawah content nya..
jadi ketika kita klik.. langsung di arahkan ke konten terkait
thanks for share
uki
Wah ^_^ , tutor ini lah yang saya cari cari,uyeh cocok lagi buat positingan blogazine :D
Rosyd Aqbar
wah .
ini bisa di beri Efek Even jQuery gk Kang ?
Kalo bisa, bisa di modifikasi biar lebih Astaganaga nih :D
Sekalian Request nih Kang yaitu Cara Mengaktifkan Google Code Subversion (SVN) , biar bisa bikin Demo Page :D
Taufik Nurrohman
@Buka(n) Master ? Sudah pernah Saya jawab di sini: #c6165409733265579259
Bayu Handono
mantap kang, eh mas. haha :D
Beben Koben
hihihihi :P
http://jsfiddle.net/tovic/exsxD/embedded/result,css,html/
Taufik Nurrohman
@Beben Koben Aslinya pakai iframe, tapi Saya buat preloader-nya supaya iframe dimuat setelah halaman sudah sampai ke bawah. Intinya "menunda", bukan "mempercepat" :)
Adi Nugraha Y
bisa diterapkan penggunaannya pake jquery juga ya mas?
Unknown
Bro, ane mau make table of content seperti di link ini :
http://www.saaraan.com/2013/02/neat-table-of-content-with-jquery-and-css3
Tapi saya pengennya TOC nya otomatis tercreate berdasarkan H3 ato H2 seperti tips di atas. apa yang harus di rubah ya?
Taufik Nurrohman
Diganti saja ID dan kelas elemen di dalam plugin ini.
Alam Perwira Putra
Yg versi javascript ada ndak ya mas? Hoho