Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Данный оконный интерфейс предполагает такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного оконного веб-интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
Кто еще не знает, что такое jQuery UI, может подробнее почитать об этом на русском языке, пройдя по следующей ссылке. О появлении русского перевода документации рассматриваемой библиотеки уже упоминалось на Хабре.
Для начала скачиваем библиотеку с официального сайта http://jqueryui.com. Интерфейс имеет множество опций для кастомизации, для нашего примера понадобятся все компоненты и тема Flick.
После закачки и извлечения загруженных компонентов на компьютер получится следующая файловая структура:
С папками сss и js всё понятно, а шаблон для index.html напишем такой:
Пришло время создать код для первого диалогового окна. Согласно документации, окна в jQuery UI — это обычные “дивы” (div), к которым применен соответствующий класс и метод инициализации. Внутрь такого блока помещается содержимое окна.
В тэг body добавим следующий код:
Для инициализации окна, требуется исполнить JavaScript код. Его можно вынести в отдельный файл и подключить в теге , а можно там же указать следующую конструкцию:
Теперь, если открыть в браузере файл index.html, то мы получим следующее:
Обратите внимание, это окно уже обладает такими свойствами drag-n-drop, изменение размера, и возможностью закрытия.
Теперь создадим простую форму для возможности вызова диалоговых окон из другого диалогового окна. Вставим код ниже в содержимое нашего первого окна, т.е. внутрь дива вместо строки «Привет, мир!»:
Этот шаблон пригодится нам на следующих этапах.
Заменим инициализирующий окно код таким:
Пропишем новые новые стили в тег head:
Теперь окно с формой внутри смотрится чуть симпатичнее:
В свойствах диалога, записями width: 'auto’ и height: 'auto' мы указали окну подгонять свой размер под размер содержимого.
Кнопки (компонент Buttons) в jQuery UI, позволяют “навешивать” на свои события (например на нажатие) различные функции, чем сейчас и надо заняться.
Для начала создадим кнопку, добавив HTML код:
в тэг body.
Затем проинициализируем её, добавив строчку:
в функцию $(document).ready().
Раз уж начали экспериментировать с кнопками, то переопределим наши чекбоксы в форме в некое подобие кнопок, для более презентабельного вида.
Сейчас, когда всё выглядит более-менее нормально, сделаем так, чтобы по нажатию на кнопку создания окна выполнялось соответствующее действие, а при следующем нажатие окно убиралось. Перепишем JavaScript код:
Единственное, что стоило бы добавить для более правильного отображения этой части,– смену надписи на кнопке еще и при закрытии окна встроенным методом (нажатие на крестик).
Возможно, знающие люди подскажут в комментариях как это сделать оптимальным путем.
Во второй части статьи будут рассмотрены более сложные этапы по добавлению оставшегося функционала интерфейса.
Код с небольшими изменениями, основной мотив статьи, порядок следования этапов создания оконного интерфейса при помощи jQuery UI взяты отсюда – англоязычный источник.
Демо.
Часть 2.
Данный оконный интерфейс предполагает такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного оконного веб-интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
Краткое вступление
Кто еще не знает, что такое jQuery UI, может подробнее почитать об этом на русском языке, пройдя по следующей ссылке. О появлении русского перевода документации рассматриваемой библиотеки уже упоминалось на Хабре.
1 Этап. – Подготовительный.
Для начала скачиваем библиотеку с официального сайта http://jqueryui.com. Интерфейс имеет множество опций для кастомизации, для нашего примера понадобятся все компоненты и тема Flick.
После закачки и извлечения загруженных компонентов на компьютер получится следующая файловая структура:
С папками сss и js всё понятно, а шаблон для index.html напишем такой:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title> Создание Windows-подобного интерфейса при помощи jQuery UI </title>
<!-- Подключаем jQuery UI CSS -->
<link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />
<!--Подключаем сначала jQuery затем уже jQuery UI! -->
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
</body>
</html>
Этап 2. – HTML и JavaScript код для создания диалогового окна.
Пришло время создать код для первого диалогового окна. Согласно документации, окна в jQuery UI — это обычные “дивы” (div), к которым применен соответствующий класс и метод инициализации. Внутрь такого блока помещается содержимое окна.
В тэг body добавим следующий код:
<div id="dialog_window_1" class="dialog_window" title="Это наше первое диалоговое окно">
<p>Привет, мир!</p>
</div>
Для инициализации окна, требуется исполнить JavaScript код. Его можно вынести в отдельный файл и подключить в теге , а можно там же указать следующую конструкцию:
<script>
$(document).ready(function() {
$('#dialog_window_1').dialog();
});
</script>
Теперь, если открыть в браузере файл index.html, то мы получим следующее:
Обратите внимание, это окно уже обладает такими свойствами drag-n-drop, изменение размера, и возможностью закрытия.
Теперь создадим простую форму для возможности вызова диалоговых окон из другого диалогового окна. Вставим код ниже в содержимое нашего первого окна, т.е. внутрь дива вместо строки «Привет, мир!»:
<h3>Создание нового окна </h3>
<table class="dialog_form">
<tr>
<th>Заголовок окна </th>
</tr>
<tr>
<td><input type="text" id="new_window_title" /></td>
</tr>
<tr>
<th>
Содержимое окна
</th>
</tr>
<tr>
<td>
<textarea id="new_window_content"></textarea>
</td>
</tr>
<tr>
<th>
Кнопки окна
</th>
</tr>
<tr>
<td id="buttonlist">
<input type="checkbox" id="alertbutton" /><label for="alertbutton">Предупреждение </label>
<input type="checkbox" id="closebutton" /><label for="closebutton">Закрыть </label>
</td>
</tr>
</table>
Этот шаблон пригодится нам на следующих этапах.
Этап 3. – Кастомизация диалога посредством стилей и диалоговых опций.
Заменим инициализирующий окно код таким:
$(document).ready(function() {
$('#dialog_window_1').dialog({
width: 'auto',
height: 'auto'
});
});
Пропишем новые новые стили в тег head:
<style>
.dialog_form th {
text-align: left;
}
.dialog_form textarea, .dialog_form input[type=text] {
width: 320px;
}
</style>
Теперь окно с формой внутри смотрится чуть симпатичнее:
В свойствах диалога, записями width: 'auto’ и height: 'auto' мы указали окну подгонять свой размер под размер содержимого.
Этап 4 – Добавление кнопки для открытия диалогового окна.
Кнопки (компонент Buttons) в jQuery UI, позволяют “навешивать” на свои события (например на нажатие) различные функции, чем сейчас и надо заняться.
Для начала создадим кнопку, добавив HTML код:
<button id="create_button">Создать новое окно</button>
в тэг body.
Затем проинициализируем её, добавив строчку:
$('#create_button').button();
в функцию $(document).ready().
Раз уж начали экспериментировать с кнопками, то переопределим наши чекбоксы в форме в некое подобие кнопок, для более презентабельного вида.
$('#buttonlist').buttonset();
Сейчас, когда всё выглядит более-менее нормально, сделаем так, чтобы по нажатию на кнопку создания окна выполнялось соответствующее действие, а при следующем нажатие окно убиралось. Перепишем JavaScript код:
$(document).ready(function() {
// инициализация кнопок и добавление функций на событие нажатия
$("#create_button").button().click(function() {
var create_dialog = $("#dialog_window_1");
var create_button = $(this);
// если окно уже открыто, то закрыть его и сменить надпись кнопки
if( create_dialog.dialog("isOpen") ) {
create_button.button("option", "label", "Создать новое окно");
create_dialog.dialog("close");
} else {
create_button.button("option", "label", "Закрыть окно");
create_dialog.dialog("open");
}
});
// autoOpen : false – означает, что окно проинициализируется но автоматически открыто не будет
$("#dialog_window_1").dialog({
width: "auto",
height: "auto",
autoOpen : false
});
$("#buttonlist").buttonset();
});
Единственное, что стоило бы добавить для более правильного отображения этой части,– смену надписи на кнопке еще и при закрытии окна встроенным методом (нажатие на крестик).
Возможно, знающие люди подскажут в комментариях как это сделать оптимальным путем.
Во второй части статьи будут рассмотрены более сложные этапы по добавлению оставшегося функционала интерфейса.
Код с небольшими изменениями, основной мотив статьи, порядок следования этапов создания оконного интерфейса при помощи jQuery UI взяты отсюда – англоязычный источник.
Демо.
Часть 2.
