Хорошее древовидное меню пригодится в любом хозяйстве и поэтому сегодня я предлагаю познакомиться с прекрасным плагином для библиотеки jQuery – jQuery Treeview, который позволяет превратить ненумерованный список в древовидное меню.
Для начала, как всегда продемонстрирую пример работы…

Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.
* – в архиве не содержатся js-файлы, их можно скачать отдельно в разделе Download.

Нам потребуется подключить в раздел HEAD страницы несколько файлов: само собой разумеется библиотеку jQuery jquery-1.2.3.js, файл плагина jquery.treeview.js и если подразумевается работа с cookies – файл jquery.cookie.js

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>

Для того, чтобы сделать из ненумерованного списка древовидное меню в самом простом случае, с настройками по умолчанию, достаточно будет написать только это:

<script type="text/javascript">
$(document).ready(function(){
  $("#selector").treeview();
});
</script>

где #selector – это идентификатор ненумерованного списка, ну а $(document).ready(function(){}); упоминается в каждой статье про jQuery – отслеживается момент готовности объектной модели документа (DOM).

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

HTML-rод тоже не содержит ничего необычного. Пожалуй обращу Ваше внимание на такие моменты:
- если элементу li ненумерованного списка присвоить класс с именем closed, то при первоначальной загрузке этот элемент будет скрыт.
- элементы span с именем класса folder, находящиеся внутри li это папка, внутри которой могут находиться другие папки или пункты меню.
- элементы span с именем класса file, находящиеся внутри li это пункты меню.

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

<script type="text/javascript">
$(document).ready(function(){
  $("#navigation").treeview({
    persist: "location",
    collapsed: true,
    unique: true
  });
});
</script>

Приведу пояснения к этим, и некоторым другим опциям:
animated – принимает строку (slow, normal, fast) или число (миллисекунды), определяющие скорость анимационного
эффекта. Если опция неопределена – эффект отсутствует.

$(".selector").treeview({
   animated: "fast"
});

collapsed – по умолчанию false. Позволяет скрывать все ветви дерева при загрузке страницы, если установлена в true.

$(".selector").treeview({
   collapsed: true
});

unique – по умолчанию false. Если установить в true – устанавливает разрешение на открытие одновременно только одной ветки дерева на соответствующем уровне. Т.е. при открытии одной ветки – скрывает «сестринские» ветки уровня. При начальной загрузке все ветки скрыты.

$(".selector").treeview({
   unique: true
});

toggle – функция, которая будет вызвана в момент переключения веток. Аргумент this ссылается на переключаемый UL элемент (точнее на набор элементов LI, принадлежащих этому UL).

$(".selector").treeview({
   toggle: function() {
   	console.log(this + " переключено!");
   }
});

control – определяет элемент который будет служить управляющим элементов древовидного меню, чтобы позволить пользователю разворачивать, сворачивать или переключать все меню одним кликом.

$(".selector").treeview({
   control: "#container"
});

в примере им служит элемент с идентификатором container.
persist – принимает строку. Варианты: «location» или «cookie». Если установлено в «location» – выбирает активный элемент древовидного меню в location.href.

$(".selector").treeview({
   persist: "location"
});

Если установлено в «cookie» – сохраняет и восстанавливает состояние выбранного элемента древовидного меню в cookie с именем treeview.

$(".selector").treeview({
   persist: "cookie"
});

cookieId – по умолчанию «treeview». Определяет имя cookie, используемое в опции persist.

$(".selector").treeview({
   persist: "cookie",
   cookieId: "navigationtree"
});

Я рассказал далеко не все и привел не все примеры. Для того, кто хочет узнать про этот плагин побольше приведу ссылки. Материалы естественно на английском языке.
http://jquery.bassistance.de/treeview/demo/ – демонстрационная страница плагина.
http://docs.jquery.com/Plugins/Treeview – страница плагина на сайте jQuery.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru