- PVSM.RU - https://www.pvsm.ru -

Создание Windows-подобного интерфейса при помощи jQuery UI. Часть 1

Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Под Windows-подобностью интерфейса предполагаются такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге [1].
Итак, имеем желание создать пример интерактивного пользовательского Windows-подобного интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.

Краткое вступление

Кто еще не знает, что такое jQuery UI, может подробнее почитать об этом на русском языке, пройдя по следующей ссылке [2]. О появлении русского перевода документации рассматриваемой библиотеки уже упоминалось на Хабре [3].

1 Этап. – Подготовительный.

Для начала скачиваем библиотеку с официального сайта http://jqueryui.com [4]. Интерфейс имеет множество опций для кастомизации, для нашего примера понадобятся все компоненты и тема Flick.
После закачки и извлечения загруженных компонентов на компьютер получится следующая файловая структура:
Создание Windows подобного интерфейса при помощи jQuery UI. Часть 1
С папками сss и js всё понятно, а шаблон для index.html напишем такой:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
  5.      <title> Создание Windows-подобного интерфейса при помощи jQuery UI </title>
  6.      <!-- Подключаем jQuery UI CSS -->
  7.      <link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />
  8.      <!--Подключаем сначала jQuery затем уже jQuery UI! -->
  9.      <script src="js/jquery-1.6.2.min.js"></script>
  10.      <script src="js/jquery-ui-1.8.16.custom.min.js"></script>
  11.   </head>
  12.   <body>
  13.   </body>
  14. </html>

* This source code was highlighted with Source Code Highlighter [5].

Этап 2. – HTML и JavaScript код для создания диалогового окна.

Пришло время создать код для первого диалогового окна. Согласно документации, окна в jQuery UI — это обычные “дивы” (div), к которым применен соответствующий класс и метод инициализации. Внутрь такого блока помещается содержимое окна.
В тэг body добавим следующий код:

  1. <div id="dialog_window_1" class="dialog_window" title="Это наше первое диалоговое окно">
  2.   <p>Привет, мир!</p>
  3. </div>

* This source code was highlighted with Source Code Highlighter [5].

Для инициализации окна, требуется исполнить JavaScript код. Его можно вынести в отдельный файл и подключить в теге , а можно там же указать следующую конструкцию:

  1. <script>
  2.   $(document).ready(function() {
  3.      $('#dialog_window_1').dialog();
  4.   });
  5. </script>

* This source code was highlighted with Source Code Highlighter [5].

Теперь, если открыть в браузере файл index.html, то мы получим следующее:
Создание Windows подобного интерфейса при помощи jQuery UI. Часть 1

Обратите внимание, это окно уже обладает такими свойствами drug-n-drop, изменение размера, и возможностью закрытия.
Теперь создадим простую форму для возможности вызова диалоговых окон из другого диалогового окна. Вставим код ниже в содержимое нашего первого окна, т.е. внутрь дива вместо строки «Привет, мир!»:

  1. <h3>Создание нового окна </h3>
  2. <table class="dialog_form">
  3.   <tr>
  4.      <th>Заголовок окна </th>
  5.   </tr>
  6.   <tr>
  7.      <td><input type="text" id="new_window_title" /></td>
  8.   </tr>
  9.   <tr>
  10.      <th>
  11. Содержимое окна
  12.      </th>
  13.   </tr>
  14.   <tr>
  15.      <td>
  16.          <textarea id="new_window_content"></textarea>
  17.      </td>
  18.   </tr>
  19.   <tr>
  20.      <th>
  21.          Кнопки окна
  22.      </th>
  23.   </tr>
  24.   <tr>
  25.      <td id="buttonlist">
  26.          <input type="checkbox" id="alertbutton" /><label for="alertbutton">Предупреждение </label>
  27.          <input type="checkbox" id="closebutton" /><label for="closebutton">Закрыть </label>
  28.              </td>
  29.   </tr>
  30. </table>

* This source code was highlighted with Source Code Highlighter [5].

Этот шаблон пригодится нам на следующих этапах.

Этап 3. – Кастомизация диалога посредством стилей и диалоговых опций.

Заменим инициализирующий окно код таким:

  1. $(document).ready(function() {
  2.      $('#dialog_window_1').dialog({
  3.      width: 'auto',
  4.      height: 'auto'
  5.      });
  6.   });

* This source code was highlighted with Source Code Highlighter [5].

Пропишем новые новые стили в тег head:

  1. <style>
  2. .dialog_form th {
  3.   text-align: left;
  4. }
  5. .dialog_form textarea, .dialog_form input[type=text] {
  6.   width: 320px;
  7. }
  8. </style>

* This source code was highlighted with Source Code Highlighter [5].

Теперь окно с формой внутри смотрится чуть симпатичнее:
Создание Windows подобного интерфейса при помощи jQuery UI. Часть 1
В свойствах диалога, записями width: 'auto’ и height: 'auto' мы указали окну подгонять свой размер под размер содержимого.

Этап 4 – Добавление кнопки для открытия диалогового окна.

Кнопки (компонент Buttons) в jQuery UI, позволяют “навешивать” на свои события (например на нажатие) различные функции, чем сейчас и надо заняться.
Для начала создадим кнопку, добавив HTML код:

  1. <button id="create_button">Создать новое окно</button>

* This source code was highlighted with Source Code Highlighter [5].

в тэг body.
Затем проинициализируем её, добавив строчку:

  1. $('#create_button').button();

* This source code was highlighted with Source Code Highlighter [5].

в функцию $(document).ready().
Раз уж начали экспериментировать с кнопками, то переопределим наши чекбоксы в форме в некое подобие кнопок, для более презентабельного вида.

  1. $('#buttonlist').buttonset();

* This source code was highlighted with Source Code Highlighter [5].

Создание Windows подобного интерфейса при помощи jQuery UI. Часть 1
Сейчас, когда всё выглядит более-менее нормально, сделаем так, чтобы по нажатию на кнопку создания окна выполнялось соответствующее действие, а при следующем нажатие окно убиралось. Перепишем JavaScript код:

  1. $(document).ready(function() {
  2.   // инициализация кнопок и добавление функций на событие нажатия
  3.   $("#create_button").button().click(function() {
  4.      var create_dialog = $("#dialog_window_1");
  5.      var create_button = $(this);
  6.      // если окно уже открыто, то закрыть его и сменить надпись кнопки
  7.      if( create_dialog.dialog("isOpen") ) {
  8.          create_button.button("option", "label", "Создать новое окно");
  9.          create_dialog.dialog("close");
  10.      } else {
  11.          create_button.button("option", "label", "Закрыть окно");
  12.          create_dialog.dialog("open");
  13.      }
  14.   });
  15.   // autoOpen : false – означает, что окно проинициализируется но автоматически открыто не будет
  16.   $("#dialog_window_1").dialog({
  17.      width: "auto",
  18.      height: "auto",
  19.      autoOpen : false
  20.   });
  21.  $("#buttonlist").buttonset();
  22. });

* This source code was highlighted with Source Code Highlighter [5].

Единственное, что стоило бы добавить для более правильного отображения этой части,– смену надписи на кнопке еще и при закрытии окна встроенным методом (нажатие на крестик).
Возможно, знающие люди подскажут в комментариях как это сделать оптимальным путем.

Во второй части статьи будут рассмотрены более сложные этапы по добавлению оставшегося функционала интерфейса.

Код с небольшими изменениями, основной мотив статьи, порядок следования этапов создания Windows-подобного интерфейса при помощи jQuery UI взяты отсюда – англоязычный источник [6].

Автор: denldv

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/4070

Ссылки в тексте:

[1] итоге: http://jsfiddle.net/JhtHn/

[2] ссылке: http://jquery.page2page.ru/index.php5/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_jqueryui

[3] Хабре: http://habrahabr.ru/post/139776/

[4] http://jqueryui.com: http://jqueryui.com

[5] Source Code Highlighter: http://virtser.net/blog/post/source-code-highlighter.aspx

[6] англоязычный источник: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-windows-like-interface-with-jquery-ui/