Блог saintista

Меню сайта зачастую содержит довольно много категорий, и многое из них содержат в себе дополнительные категории. Получается довольно громоздкая конструкция.

Но можно отлично скомпоновать все это в виде древовидного меню .

В этом поможет jQuery Treeview плагин

Что и как?

Для использования понадобиться подключить несколько файлов

<link rel=»stylesheet» href=»/js/plugins/treeview/jquery.treeview.css» type=»text/css» />

<script type=»text/javascript» src=»/js/plugins/treeview/jquery.treeview.js»></script>

и оформить наше меню в виде

<ul id="menu" class="filetree">
         <li><span class="folder">Категория1</span>
	     <ul>
		 <li><span class="file">Линк1.1</span></li>
	      </ul>
	 </li>
	 <li><span class="folder">Категория2</span>
	      <ul>
		 <li><span class="folder">Подкатегория2.1</span>
	      <ul>
		 <li><span class="file">Линк2.1.1</span></li>
		 <li><span class="file"> Линк2.1.2</span></li>
	       </ul>
	 </li>
</ul>

и применить плагин к нашей конструкции

<script>
  $(document).ready(function(){
    $("#menu").treeview();
  });
  </script>

Дополнительный функционал.

Добавления дополнительных веток в меню осуществляется через опцию add: branches

Добавим ниже меню элемент по клику на который будет добавляться новая категория с линками, ID ему зададим «add» и повесим код

$(«#add»).click(

function() {

var branches = $(«<li><span class=’folder’>Новая категория</span><ul>» +

«<li><span class=’file’>новый линк 1</span></li>» +

«<li><span class=’file’>новый линк 2</span></li>» +

«</ul></li>»).appendTo(«#browser»);

$(«#menu»).treeview({ add: branches });

}

);

Тэги: jQuery, jquery-treeview, plugin, древовидное меню

jQuery SELECT (jquery-asmselect)

jQuery отслеживаем ввод символа в input (Enter, tab)

WordPress подключение JQuery

jQuery png Fix

Печать картинки на странице через js

jQuery ajax в IE7

jQuery live hover

Prototype и jQuery используем одновременно

jQuery cookie проще некуда

jQuery watermark input field

jQuery округлые углы

jQuery ajax рейтинг

Запись была опубликована Вторник, августа 18, 2009 в 10:15 в рубрике jQuery, js, Ultimate jQuery. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.