Home » , , , » Plugin Daftar Konten Otomatis Sederhana (1 Level)

Plugin Daftar Konten Otomatis Sederhana (1 Level)

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

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

0 komentar:

Posting Komentar