JQuery EasyUI Layout - создать XP стиль левой панели
При нормальных обстоятельствах, папка Windows XP Проводник, панель (панель) на левой стороне содержит некоторые общие задачи. Этот учебник покажет вам, как easyui панель (панель) плагин для создания XP левой панели.
Определите панель (панель)
Определим некоторую панель (панель), эти панели (панели), чтобы отобразить количество задач. Каждая панель (панель) должны иметь кнопку, по крайней мере сворачивания / разворачивания инструмента.
Код выглядит следующим образом:
<Div стиль = "ширина: 200px; высота: авто; фон: # 7190E0; обивка: 5px;"> <Div класс = "easyui панели" название = "Picture Задачи" разборные = "истинный" стиль = "ширина: 200px; высота: авто; обивка: 10px;"> Просмотр в виде слайд-шоу <br/> Заказать печать онлайн <br/> Печать фотографий </ Div> <br/> <Класс Div = "easyui панели" название = "файлов и папок Задачи" разборные = "истинный" стиль = "ширина: 200px; высота: авто; обивка: 10px;"> Создайте новую папку <br/> Опубликовать эту папку в Web <br/> Установить ссылку на эту папку </ Div> <br/> <Div класс = "easyui-панели" название = "Другие места" разборные = "истина" разрушилась = "истинный" стиль = "ширина: 200px; высота: авто; обивка: 10px;"> Нью-Йорк <br/> Мои Фотографии <br/> Мой компьютер <br/> Сетевое окружение </ Div> <br/> <Div класс = "easyui-панели" название = "Подробности" разборные = "истинный" стиль = "ширина: 200px; высота: авто; обивка: 10px;"> Мои документы <BR/> Файл Папка <br/> <br/> Дата изменения: Oct.3rd 2010 </ Div> </ Div>
Пользовательские панели (панель) появления
Обратите внимание, что эта точка зрения внешний вид не то, что мы хотим, мы должны изменить панель (панель) фонового изображения и свернуть / развернуть значок кнопки.
Это не трудно сделать, нам нужно сделать, это переопределить некоторые из CSS.
.panel тела { фон: # f0f0f0; } .panel-заголовок { фон: #fff URL ( 'изображения / panel_header_bg.gif') не повторять в правом верхнем углу; } .panel-инструмент коллапса { фон: URL ( 'изображения / arrow_up.gif') не повторять 0px -3px; } .panel-инструмента расширения { фон: URL ( 'изображения / arrow_down.gif') не повторять 0px -3px; }
Таким образом, использование easyui пользовательский интерфейс очень прост.