Плагин Treeview для jQuery позволяет создать многоуровневое динамическое меню навигации из простых неупорядоченных HTML-списков. Как обычно, подключаем необходимые файлы в разделе head HTML-документа:
<link rel="stylesheet" href="/css/jquery.treeview.css" />
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/js/jquery.treeview.js" type="text/javascript"></script>
HTML:
<ul id="menu">
<li>Элемент 1
<ul>
<li>Элемент 1.1</li>
<li>Элемент 1.2</li>
<li>Элемент 1.3</li>
</ul>
</li>
<li>Элемент 2
<ul>
<li>Элемент 2.1</li>
<li>Элемент 2.2</li>
<li>Элемент 2.3</li>
</ul>
</li>
<li>Элемент 3
<ul>
<li>Элемент 3.1</li>
<li>Элемент 3.2</li>
<li>Элемент 3.3</li>
</ul>
</li>
</ul>
JavaScript:
$(document).ready(function(){
$("#menu").treeview();
});
Если элементу <ul> присвоить класс с именем filetree, а внутри элементов списка <li> разместить элементы <span class=”folder”> и <span class=”file”>, то получим меню с иконками папок и файлов. Если элементу <li> присвоить класс с именем closed, то при первоначальной загрузке этот элемент будет скрыт.
Можно передать функции treeview() множество опций, которые позволят гибко настраивать плагин:
animated — добавляет эффект анимации при открытии/закрытии пунктов меню. Это может быть строка (”slow”, “normal”, “fast”) или число миллисекунд, определяющее скорость анимационного эффекта.
collapsed — позволяет скрывать все ветви дерева при загрузке страницы, если установлена в true. По умолчанию false.
unique — разрешает открытие одновременно только одной ветки дерева на соответствующем уровне. Т.е. при открытии одной ветки — скрывает другие ветки того же уровня. По умолчанию false.
toggle — функция, которая будет вызвана в момент переключения веток. Аргумент this ссылается на набор элементов <li>, принадлежащих переключаемому элементу <ul>.
$("#menu").treeview({
toggle: function() {
alert(this + " переключено!");
}
});
control — определяет элемент который позволит пользователю разворачивать, сворачивать или переключать все меню одним кликом.
persist — принимает строку “location” или “cookie”. Если установлено в “location” — выбирает активный элемент меню в location.href. Если установлено в “cookie” — сохраняет и восстанавливает состояние выбранного элемента меню в cookie с именем treeview.
cookieId — по умолчанию “treeview”. Определяет имя cookie, используемое в опции persist.
