РедактироватьСоздать страницу
Интерактивный навигатор по заголовкам для jquery
Долго искал скрипт позволяющий сделать оглавление для статьи по html тегам как на Википедии. Нашел пару очень тяжелых скриптов на тысячу строк кода, где оглавление генерировалось вместе с зашитыми стилями, короче очень неудобно, поэтому выкладываю скрипт который написал сам для WikiClick.

jquery-content-tree

Скрипт позволяет создать интерактивную карту страницы по заголовкам.
Другими словами скрипт генерирует структурированное дерево оглавления по тегам h1-h6 со ссылками.

JavaScript-код

function cords(selector_tree, selector_content) {
	if ($(selector_tree).length) {
		$h = 'h1, h2, h3, h4, h5, h6';
		$ah = $(selector_content).find($h)
		if ($ah.length >=3) {
			$(selector_tree).html('<div>Справка</div><ul class="level0" data-level="0"><ul>')
			$ol = $('.level0');
			$str = ''
			$.each($ah, function(i, elm) {
				if (i < $ah.length-1) {			
					a = $ah.eq(i).prop('tagName'); b = $ah.eq(i+1).prop('tagName');
				}
				$(this).html('<selection id="H'+i+'">'+$(this).html()+'</selection>')
				$str += '<li><a href="#H'+i+'">'+$(this).text()+'</li>'
				if (i < $ah.length-1 && a>b) {
					for (i = parseInt(a.substring(1)); i>parseInt(b.substring(1)); i--) {
						$str += '</ul>'
					}
				}
				if (a<b)
				for (i = parseInt(a.substring(1)); i<parseInt(b.substring(1)); i++) {
						$str += '<ul>';
				}
				if (i == $ah.length-1) {
					for (i = parseInt($(this).prop('tagName').substring(1)); i>=3; i--) {
						$str += '</ul>'
					}
					console.log($str);
					$ol.html($str)
					$(selector_tree+' a').click(function() {
						$($(this).attr('href')).parent().next().slideDown();
					})
				}
			})
		}
	}
}

Использование

cords('div.navigator', 'article'); // Выводит в <div class="navigator"> оглавление взятое из <article>
#javascript#jquery#скрипты#навигация

Последние правки


Комментарии (0)