Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Под Windows-подобностью интерфейса предполагаются такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного пользовательского Windows-подобного интерфейса и возможности использовать для этой цели 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>
* This source code was highlighted with Source Code Highlighter.
Этап 2. – HTML и JavaScript код для создания диалогового окна.
Пришло время создать код для первого диалогового окна. Согласно документации, окна в jQuery UI — это обычные “дивы” (div), к которым применен соответствующий класс и метод инициализации. Внутрь такого блока помещается содержимое окна.
В тэг body добавим следующий код:
- <div id="dialog_window_1" class="dialog_window" title="Это наше первое диалоговое окно">
- <p>Привет, мир!</p>
- </div>
* This source code was highlighted with Source Code Highlighter.
Для инициализации окна, требуется исполнить JavaScript код. Его можно вынести в отдельный файл и подключить в теге , а можно там же указать следующую конструкцию:
- <script>
- $(document).ready(function() {
- $('#dialog_window_1').dialog();
- });
- </script>
* This source code was highlighted with Source Code Highlighter.
Теперь, если открыть в браузере файл index.html, то мы получим следующее:
Обратите внимание, это окно уже обладает такими свойствами drug-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>
* This source code was highlighted with Source Code Highlighter.
Этот шаблон пригодится нам на следующих этапах.
Этап 3. – Кастомизация диалога посредством стилей и диалоговых опций.
Заменим инициализирующий окно код таким:
- $(document).ready(function() {
- $('#dialog_window_1').dialog({
- width: 'auto',
- height: 'auto'
- });
- });
* This source code was highlighted with Source Code Highlighter.
Пропишем новые новые стили в тег head:
- <style>
- .dialog_form th {
- text-align: left;
- }
- .dialog_form textarea, .dialog_form input[type=text] {
- width: 320px;
- }
- </style>
* This source code was highlighted with Source Code Highlighter.
Теперь окно с формой внутри смотрится чуть симпатичнее:
В свойствах диалога, записями width: 'auto’ и height: 'auto' мы указали окну подгонять свой размер под размер содержимого.
Этап 4 – Добавление кнопки для открытия диалогового окна.
Кнопки (компонент Buttons) в jQuery UI, позволяют “навешивать” на свои события (например на нажатие) различные функции, чем сейчас и надо заняться.
Для начала создадим кнопку, добавив HTML код:
- <button id="create_button">Создать новое окно</button>
* This source code was highlighted with Source Code Highlighter.
в тэг body.
Затем проинициализируем её, добавив строчку:
- $('#create_button').button();
* This source code was highlighted with Source Code Highlighter.
в функцию $(document).ready().
Раз уж начали экспериментировать с кнопками, то переопределим наши чекбоксы в форме в некое подобие кнопок, для более презентабельного вида.
- $('#buttonlist').buttonset();
* This source code was highlighted with Source Code Highlighter.
Сейчас, когда всё выглядит более-менее нормально, сделаем так, чтобы по нажатию на кнопку создания окна выполнялось соответствующее действие, а при следующем нажатие окно убиралось. Перепишем 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();
- });
* This source code was highlighted with Source Code Highlighter.
Единственное, что стоило бы добавить для более правильного отображения этой части,– смену надписи на кнопке еще и при закрытии окна встроенным методом (нажатие на крестик).
Возможно, знающие люди подскажут в комментариях как это сделать оптимальным путем.
Во второй части статьи будут рассмотрены более сложные этапы по добавлению оставшегося функционала интерфейса.
Код с небольшими изменениями, основной мотив статьи, порядок следования этапов создания Windows-подобного интерфейса при помощи jQuery UI взяты отсюда – англоязычный источник.
Автор: denldv
