Создаем древовидное меню с помощью jQuery.

20.08.2008 17:14

Хочу предложить Вашему вниманию простенький плагин, сделанный на основе Javascript-библиотеки jQuery, для создания древовидного меню.

Итак, для начала необходимо создать структуру нашего меню.

<ul id="example" 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>

 <li><span class="file">Файл 2.2</span></li>

 </ul>

 </li>

 <li class="closed"><span class="folder">Папка 3 (свернутая в начале)</span>

 <ul>

 <li><span class="file">Файл 3.1</span></li>

 </ul>

 </li>

 <li><span class="file">Файл 4</span></li>

 </ul>

Как видим все очень просто. Это обычный маркированный список с соответствующими классами. Пункт меню с классом "Folder" будет представлен у нас с иконкой в виде папки, а с классом "File" - с иконкой в виде документа.
Иконки Вы, конечно, можете заменить на свои.

Теперь чтобы все это заработало необходимо подключить библиотеку к файлу, а также вызвать функцию treeview().
Код javascript:

<script src="http://code.jquery.com/jquery-latest.js"></script>

 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>

 <script>

 $(document).ready(function(){

 $("#example").treeview();

 });

 </script>