Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Создаем Windows-подобный интерфейс при помощи jQuery UI

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Вы когда-либо хотели создать интерактивный пользовательский интерфейс (* определяет способ взаимодействия пользователя с конкретной компьютерной системой, программой или иным сложным оборудованием; термин обозначает также устройства, программы, действия и объекты, предназначенные для этой цели. Интерфейс пользователя может быть текстовым (например, на основе командной строки, command line ), графическим, сенсорным, речевым и т. д. По своей сути он состоит из двух частей - средств ввода и средств вывода. Средства ввода дают пользователю возможность сообщить компьютеру своё требование (указание); чаще всего для этого служат клавиатура, мышь, трекбол, палец или стилус (при работе с сенсорными экранами) и голос (для речевых команд). При помощи средств вывода компьютер представляет пользователю результаты вычислений, меню и приглашения-требования; сегодня самое распространённое устройство вывода - это дисплей, за которым следуют механизмы, использующие слуховые возможности человека, а именно возможности восприятия речи (голоса) и звука. Здесь и далее примеч. пер.) для вашего приложения, но не знали как? В этом пособии мы быстро и легко создадим Windows-подобный интерфейс, воспользовавшись jQuery UI, библиотекой готовых компонентов для пользовательского интерфейса, разработанной на основе jQuery.


Что именно из себя представляет jQuery UI?

jQuery UI

jQuery UI предоставляет абстракции (* широко используемый в моделировании принцип выделения только главных свойств и характеристик проблемы и игнорирования аспектов, не оказывающих существенного влияния на её решение) для низкоуровневого (* используется для описания языков или операций, которые по синтаксису относительно близки к машинному коду) взаимодействия и анимации, продвинутые эффекты и высокоуровневые (* используется для описания языка программирования, который по синтаксису относительно напоминает естественный язык (например, английский)) виджеты с поддержкой возможности настраивания их темы.

jQuery UI всегда была отличным инструментом в наборе фронтенд-разработчика. Она предлагает множество виджетов и эффектов, которые были прекрасно спланированы так, чтобы работать в большинстве браузеров. Вам необходим быстрый способ создания снабженного закладками интерфейса? jQuery UI имеет для этого готовое решение! Хотите создать модальное окно (* в графическом интерфейсе пользователя (GUI) - дочернее окно (child window) для взаимодействия пользователя с приложением: оно служит для получения информации от приложения или для ввода запрашиваемых данных и выбора опций; поэтому модальное окно часто называется диалоговым (dialog box , modal dialog ). Если открывается модальное окно, то возврат управления приложению может произойти только после реакции пользователя. B Windows могут открываться только модальные окна, относящиеся к одному и тому же приложению)? И для этого имеется готовое решение!

В данном руководстве мы будем учиться использовать jQuery UI для создания пользовательского интерфейса с широкими функциональными возможностями без привлечения каких-либо дополнительных инструментов. К концу руководства вы должны будете получить представление о jQuery UI, некоторых ее компонентах и базовых принципах ее настройки. В конечном счете мы получим пользовательский интерфейс, подобный таковому в Windows, состоящий из диалоговых окон с поддержкой перетаскивания, изменения размера, сворачивания и разворачивания.

Примечание: если вы действительно хотите настроить все возможные свойства темы jQuery UI, то вам стоит ознакомится с этим руководством под названием «A Massive Guide to Custom Theming jQuery UI Widgets» (* "Исчерпывающее руководство по настройке темы виджетов jQuery UI"). Оно доступно только для членов уровня Premium, но я ручаюсь, что оно того стоит!


Наша цель: создать Windows-подобные диалоговые окна с поддержкой перетаскивания, изменения размера, сворачивания и разворачивания, которые мы можем применить для различных видов приложений.

windows-like interface example from Aralista!
Windows-подобный интерфейс на примере Aralista!

Изображение предоставлено с любезного разрешения http://aralista.com


Шаг 1: Установка

Для начала скачайте библиотеку jQuery UI с ее сайта  http://jqueryui.com. Как посетите сайт, то увидите множество опций для «настройки» вашей загрузки jQuery UI.

The jQuery UI Download Page
Страница загрузки jQuery UI

Для достижения целей нашего руководства необходимо, чтобы были выбраны все компоненты. Что касается темы, выберите Flick. Перепроверьте также, что вы выбираете версию 1.8.16, поскольку на странице загрузки jQuery UI предлагается и  устаревшая версия (* устаревший стабильный выпуск, доступный до сих пор (и, вероятно, поддерживаемый); может быть необходим кому-то (например, зависимости плагина могут не работать с новым выпуском)) для более ранних выпусков jQuery.

Также в архиве должна будет содержаться библиотека jQuery версии 1.6.2. Если вы используете более современную версию jQuery, то вам следует использовать ее. Упомянутая версия – просто минимальная версия jQuery, необходимая для jQuery UI.

Извлеките содержимое в публичную папку (* папка, созданная для обмена информацией с другими пользователями) вашего проекта. После извлечения ресурсы для вашего сайта будут определенным образом структурированы:

Suggested file-structure for your site resources
Предлагаемая файловая структура для ресурсов вашего сайта
  • папка js предназначена для размещения ваших файлов JavaScript (jQuery UI и jQuery)
  • папка css предназначена для размещения ваших файлов CSS (CSS для темы jQuery UI )

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

После извлечения файлов создайте файл index.html, в котором будет содержаться код HTML нашей страницы. Ниже приведено его содержимое:


Шаг 2: Пишем код HTML для наших окон Dialog.

Итак, давайте начнем с написания HTML для наших окон Dialog. Согласно странице документации про Dialog на сайте jQuery UI HTML окна Dialog – это – это просто <div>.. Любой другой код HTML внутри <div> становится контентом диалогового окна. Зная это, создайте простое окно Dialog и откройте его при помощи jQuery UI.

Скопируйте следующий код в <body> файла с HTML:

Затем инициализируйте окно Dialog, выполнив следующий код JavaScript.  Скопируйте следующий код в <head> файла с HTML:

Сразу после обновления страницы вы должны увидеть нечто подобное:

Hello World!

«Hello World!» (* первая простейшая программа, которую создают новички в области компьютерных наук)

Инициализация (*  этап задания начального состояния) окна Dialog может быть выполнена просто путем вызова функции $(element_id).dialog()! И как вы понимаете, наш контент внутри <div> будет служить содержимым диалогового окна.

Теперь добавьте простую форму для создания новых окон Dialog в имеющемся у нас окне Dialog. Замените код «Hello World!» внутри нашего изначального окна Dialog следующим:

После обновления страницы вы должны увидеть нечто подобное:

Looks ugly :(

Пока что оно выглядит страшновато, но не волнуйтесь, мы будем вносить некоторые изменения для окна Dialog, чтобы сделать его более привлекательным.


Шаг 3: Настраиваем наши окна Dialog при помощи опций Dialog и CSS

В данный момент наше окно Dialog выглядит не очень, однако у нас будет возможность настроить его за счет добавления некоторых опций к коду для инициализации нашего окна Dialog, и, конечно же, некоторых правил  CSS.

Давайте заменим наш код для инициализации следующим:

Также давайте добавим некоторые правила CSS в <head> нашего HTML:

Much better!

Так гораздо лучше!

Давайте проанализируем некоторые опции, которые мы используем в нашем коде для инициализации:

  • width – благодаря этой опции вы можете задать определенное значение ширины для вашего окна Dialog. Также вы можете установить ее значением 'auto', чтобы позволить jQuery UI устанавливать значение ширины динамически.
  • height – в сущности делает то же самое, что и опция width, но для высоты окна Dialog, а не ширины.

Имеется еще множество опций для окна Dialog, однако большинство из них используется для управления поведением окна Dialog. Мы рассмотрим некоторые из них в последующих шагах этого руководства.

Теперь, когда у нас имеется миловидное окно Dialog с элементами формы внутри, давайте добавим некоторые кнопки к нашему окну Dialog для выполнения каких-либо действий!


Шаг 4: Добавляем Button для открытия нашего окна Dialog

Одна из замечательных особенностей jQuery UI – то, что она разработана согласно принципу модульности (* организация программы в виде написанных по определённым правилам взаимодействующих частей - модулей, которые могут разрабатываться независимо друг от друга, возможно, в разных местах и разными исполнителями, а потом объединяются в единую систему. Модульное программирование уменьшает сложность программы, ускоряет время поставки системы (delivery time) в больших проектах и способствует повторному использованию ранее написанного кода (code reuse)). Например, окно Dialog также использует другие компоненты jQuery UI, как то: Draggable, Resizable и, что наиболее важно, Button.

Button example from jQuery UI's documentation

Пример кнопок из документации по jQuery UI

Компонент Button позволяет нам создавать кнопки, при клике которых выполняются пользовательские функции. И в то же время он соответствует теме, которую мы установили вместе с jQuery UI, так что при изменении темы также будет меняться и вид кнопок, благодаря чему в рамках всего сайта будет поддерживаться единообразный дизайн.

Для начала давайте создадим Button для открытия и закрытия нашего окна Dialog. Добавьте следующий код в <body> HTML:

И инициализируем его, добавив в функцию $(document).ready() следующий код:

Cool button bro

Наш крутой приятель, кнопка

Поскольку мы занимаемся кнопками, давайте также преобразуем и наши флажки в кнопки, чтобы они лучше выглядели. Компонент Button jQuery UI также позволяет вам преобразовать набор флажков или переключателей в Buttonset. Для этого просто скопируйте следующий код в ваш блок с кодом JavaScript:

Теперь обновите страницу, чтобы увидеть новые  улучшенные флажки:

Cool checkboxes bro

Теперь, когда окно Dialog и Button выглядят хорошо, мы можем изменить их поведение таким образом, что при их нажатии будет открываться и закрываться Dialog. Для этого обновите блок кода с JavaScript, чтобы он выглядел следующим образом:

Давайте пройдемся по коду строчка за строчкой:

  • Мы добавили обработчик события click для нашей кнопки, за счет которого при ее нажатии открывается окно Dialog.
  • Также мы используем метод $(dialog_id).dialog('isOpen'), который возвращает true, если Dialog уже открыт, и false, если нет.
  • Если окно Dialog закрыто, то мы его открываем при помощи вызова метода $(dialog_id).dialog('open') и изменяем метку Button на “Close window” за счет метода $(button_id).button('option').
  • Если оно уже открыто, то мы делаем наоборот, используя тот же самый метод option для Button и метод $(dialog_id).dialog('close') для закрытия окна Dialog.
  • Также мы воспользовались другой опцией Dialog под названием autoOpen. Если ее значение – true, то появляется возможность открытия окна Dialog автоматически после его инициализации. В ином случае окно Dialog может быть открыто только при помощи вызова метода $(dialog_id).dialog('open'), что и происходит при клике кнопки.
Functional buttons and checkboxes bro

Наши приятели, функциональные кнопки и флажки


Шаг 5: Добавляем функциональные возможности для нашего окна Dialog

Теперь, когда окно Dialog готово к работе, давайте добавим для него функциональную возможность создания новых окон Dialog.  Сначала добавим некоторые кнопки к нашему окну Dialog. К счастью, в jQuery UI имеется функциональная возможность добавления кнопок к любому окну Dialog и настройки выполняемых при клике по ним функций. Для этого добавьте в код для инициализации параметр buttons:

Как вы видите из примера выше, мы добавили кнопку “Create” просто за счет добавления опции buttons к коду для инициализации. Опция buttons – это массив объектов JSON следующего формата:

Для того, чтобы добавить больше кнопок, вы можете просто добавить больше объектов JSON в том же формате к массиву buttons. После обновления страницы вы должны увидеть нечто подобное:

Yay, clicked the button!

Да, кнопка нажата!

Теперь мы добавим некоторые функциональные возможности для нашей кнопки. Удалите строку alert('Yay, clicked the button!'); и замените ее следующим кодом:

Ниже приводится последовательное объяснение только что добавленного нами кода:

  • Сначала получаем общее количество окон Dialog на сайте.
  • На основании него генерируем новый уникальный id, который будет использоваться для нового окна Dialog.
  • Получаем значения полей window Title и window Content из формы “Create a new Dialog window”.
  • Проверяем, отмечены ли флажки ALERT и CLOSE. Если отмечены, то создаем объект JSON в соответствии с форматом для кнопок, представленным выше, и добавляем его к массиву buttons.
  • Создаем и добавляем код HTML окна Dialog внутрь тэга <body> страницы.
  • Наконец, инициализируем новое окно Dialog при помощи кода для инициализации, подобного тому, что использовали для оригинального окна Dialog .

Поэкспериментируйте с ним и попробуйте задать различные комбинации кнопок. Ниже приводится скриншот со всеми возможными комбинациями:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet (* название временного текста, который дизайнер вводит вместо основного в макет страницы, чтобы сосредоточить внимание на графических элементах свёрстанного листа)

Теперь, когда у нас имеется возможность создавать множество окон, давайте добавим некоторую поддержку сворачивания/разворачивания!


Шаг 6: Добавляем для окон Dialog возможность сворачивания и разворачивания

К сожалению, в jQuery UI нет встроенных методов minimize и maximize, но мы можем запросто добавить их, переписав некоторый код для инициализации прототипа Dialog jQuery UI. По сути, мы добавим кое-какой код для выполнения после инициализации, благодаря которому автоматически будет создано окно в минимизированном состоянии, добавлена пиктограмма для выполнения минимизации окон Dialog, а также добавлена функция, за счет которой будет выполняться разворачивание минимизированного окна при нажатии окна в минимизированном состоянии.

Давайте начнем с добавления CSS для задания стилевого оформления кнопок и окон в минимизированном состоянии:

Также нам необходимо добавить контейнер для окон в минимизированном состоянии, в который будем добавлять все минимизированные окна. Добавьте этот код в тэг <body>:

Теперь добавьте этот блок кода JavaScript после того места, где загружается библиотека jQuery UI. Это важно, поскольку этот код не сработает, если будет расположен до загрузки библиотеки.

Ниже объясняется, что происходит в этом коде:

  • позволяем выполниться оригинальному коду инициализации Dialog jQuery при помощи _init.apply(this, arguments);
  • добавляем иконку для выполнения минимизации к строке заголовка окна Dialog;
  • добавляем код HTML для окна в минимизированном состоянии внутрь <div> с id #dialog_window_minimized_container;
  • добавляем обработчик hover к пиктограмме для выполнения минимизации, благодаря чему для нее будет применен класс ui-state-hover, когда курсор будет находиться поверх нее, за счет чего будет добавлен наблюдаемый нами эффект «изменения цвета фона»;
  • создаем обработчик click для нее, за счет которого окно Dialog закрывается и показывается окно в минимизированном состоянии;
  • наконец, создаем другой обработчик click для окна в минимизированном состоянии, благодаря которому само это окно закрывается и повторно открывается окно Dialog;

И теперь наш Windows-подобный интерфейс готов!

windows-like interface, hurrah!

Windows-подобный интерфейс, ура-а-а!


Заключение

В этом руководстве мы продемонстрировали, как просто создать прекрасный пользовательский интерфейс с широкими функциональными возможностями, используя лишь jQuery и jQuery UI. К этому моменту вы уже должны понимать, как:

  • скачать и установить библиотеку jQuery UI для вашего проекта
  • воспользоваться компонентами jQuery UI: Dialog, Button и Buttonset
  • создать диалоговые окна как статически, так и динамически при помощи информации из какого угодно источника
  • динамически создать различные кнопки для каждого нового диалогового окна
  • добавить пользовательские функциональные возможности к Dialog jQuery UI, например, сворачивания и разворачивания окна
  • настроить процесс инициализации jQuery UI

Стоит отметить, что имеется уйма других компонентов, которыми вы можете воспользоваться благодаря jQuery UI. С ее помощью действительно можно быстро и легко создавать потрясающие пользовательские интерфейсы. Надеюсь, что это руководство доказало вам, что jQuery UI – это необходимый инструмент в наборе любого веб-разработчика.

Использовали ли вы jQuery UI в прошлом или планируете использовать в будущем проекте? Дайте нам знать в комментариях ниже, и огромное спасибо вам за проявленный интерес!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.