Блог 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 });

}

);

Tweet This Post

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

jQuery SELECT (jquery-asmselect)

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

jQuery png Fix

jQuery ajax в IE7

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

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

jQuery watermark input field

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

jQuery ajax рейтинг

jQuery table sort сортировка таблиц

jQuery выбираем цвет

jQuery селекторы (небольшая справка)

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