Mecha versi 2.6.3 sudah dirilis!

Plugin Daftar Konten Otomatis Sederhana (1 Level)

Tabel Konten
  1. Penggunaan 
  2. Demo 
  3. Menambahkan Efek Animasi 
Simple Auto Table of Content Plugin (1 Level)
(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 &uArr;</a>');
            $('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol');
        });
    };
})(jQuery);

Penggunaan 

$('#parent').toc('h3', {title: "Tabel Konten:"});

Demo 

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

Lihat Demo Edit di Sini

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

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.

Komentar telah ditutup.