В левой части админки будет находиться основное меню, с помощью которого мы будем осуществлять навигацию по страницам системы управления контентом. Меню реализуем с помощью jQuery плагина раскрывающееся дерево - jQuery SimpleTree Drag&Drop.
Плагин для создания раскрывающегося дерева jQuery Simple Tree Drag&Drop прост в применении и имеет достаточный функционал для реализации меню нашей CMS. Посмотреть основные свойства плагина и скачать сам плагин можно здесь: SimpleTree Plugin.
Библиотека JQUERY была подключена в статье Подключаем JQUERY. Для работы с Simple Tree необходимо подключить сам плагин, его стили и в папку с изображениями добавить изображения самого плагина.
В разделе HEAD подключаем плагин и стили:
<link rel="stylesheet" type="text/css" href="tree.css" /> <sсript type="text/javascript" src="js/jquery.simple.tree.js"></sсript>
Само меню представляет из себя ul список определенной структуры:
<ul class="simpleTree">
<li class="root">
<span><a id="id_main_menu" href="#/main_menu" class="admin_menu_on first_a">Главная страница</a></span>
<ul class="first_ul">
<li class="open"><span> Страницы сайта</span>
<ul>
<li><span> <a href="#" class="admin_menu_off">Каталог страниц</a></span></li>
<li><span> <a href="#" class="admin_menu_off">Новости</a></span></li>
</ul>
</li>
<li><span> Настройки</span>
<ul>
<li><span> <a href="#" class="admin_menu_off">Пользователи</a></span></li>
<li><span> <a href="#" class="admin_menu_off">Группы пользователей</a></span></li>
<li><span> <a href="#" class="admin_menu_off">Настройки</a></span></li>
<li><span> <a href="#" class="admin_menu_off">Изменение пароля</a></span></li>
</ul>
</li>
</ul>
</li>
</ul>
Где:
- ul class="simpleTree" - основной список
- li class="root" - корневой элемент дерева
- ul class="first_ul" - элементы этого списка будут составлять основу дерева
- li элементы не содержащие внутреннего списка ul - обычные элементы списка
- li элементы, содержащие внутренний список ul - имеют вид директории с вложенными элементами списка
Стили, которые отвечают за отображение нашего меню:
.simpleTree {
margin:0;
padding:0 0 9px 0px;
border:none;
}
.simpleTree li {
list-style: none;
margin:0;
padding:0 0 1px 34px;
line-height: 14px;
border:none;
}
.simpleTree li span {
display:inline;
clear: left;
white-space: nowrap;
border:none;
}
.simpleTree ul {
margin:0;
padding:0 0 3px 0px;
border:none;
}
.simpleTree .root {
margin-left:-10px;
background: url(img/tree/root.gif) no-repeat 16px 0;
border:none;
}
.simpleTree .first_ul{
margin:6px 0 0 0;
border:none;
}
.simpleTree .first_a{
font-weight:bold;
font-size:12px;
border:none;
}
.simpleTree .line {
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(img/tree/line_bg.gif) 0 0 no-repeat transparent;
border:none;
}
.simpleTree .line-last {
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(img/tree/spacer.gif) 0 0 no-repeat transparent;
border:none;
}
.simpleTree .line-over {
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(img/tree/line_bg_over.gif) 0 0 no-repeat transparent;
border:none;
}
.simpleTree .line-over-last {
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(img/tree/line_bg_over_last.gif) 0 0 no-repeat transparent;
border:none;
}
.simpleTree .folder-open {
margin-left:-16px;
background: url(img/tree/collapsable.gif) 0 -2px no-repeat;
border:none;
}
.simpleTree .folder-open ul {
padding:4px 0 0 0;
border:none;
}
.simpleTree .folder-open-last {
margin-left:-16px;
background: url(img/tree/collapsable-last.gif) 0 -2px no-repeat;
border:none;
}
.simpleTree .folder-close {
margin-left:-16px;
background: url(img/tree/expandable.gif) 0 -2px no-repeat;
border:none;
}
.simpleTree .folder-close-last {
margin-left:-16px;
background: url(img/tree/expandable-last.gif) 0 -2px no-repeat;
border:none;
}
.simpleTree .doc {
margin-left:-16px;
background: url(img/tree/leaf.gif) 0 -1px no-repeat;
border:none;
}
.simpleTree .doc-last {
margin-left:-16px;
background: url(img/tree/leaf-last.gif) 0 -1px no-repeat;
border:none;
}
.simpleTree .ajax {
background: url(img/tree/spinner.gif) no-repeat 0 0;
height: 16px;
display:none;
border:none;
}
.simpleTree .ajax li {
display:none;
margin:0;
padding:0;
border:none;
}
.simpleTree .trigger {
display:inline;
margin-left:-32px;
width: 28px;
height: 11px;
cursor:pointer;
border:none;
}
.simpleTree .text {
cursor: default;
border:none;
}
.simpleTree .active {
font-weight:inherit;
color: inherit;
cursor: default;
padding:0px 0px;
border:none;
}
.contextMenu {
display:none;
border:none;
} И небольшой javascript-код, подключающий сам плагин:
$(function(){
vаr simpleTreeCollection;
simpleTreeCollection = $(".simpleTree").simpleTree({
autoclose: true,
drag: false,
speed: "fast",
animate:true
});
});
Где определяются свойства плагина:
- autoclose: true - автоматическое закрытие соседних веток при клике на элемент списка
- drag: false - отмена перемещения элементов
- speed: 'fast' - скорость открытия папки
- animate:true - используем анимацию
Собственно и все. Единственное, что еще можно сказать: меню, как и шапка будет загружаться один раз, центральная часть нашей CMS будет подгружаться с помощью AJAX по клику на элементы главного меню. Об этом подробнее в следующих статьях.
