Урок 10. Библиотека JQuery UI (User Interface). Виджеты Selectmenu и Spinner

Содержание материала:

Установка библиотеки jQuery UI

Загрузить и установить библиотеку jQuery UI в некотором смысле сложнее, чем другие библиотеки JavaScript. Этот процесс не то чтобы трудоемок, но нуждается в пояснениях, чему и посвящена данная статья. Для работы с примерами вам достаточно будет установить версию библиотеки, предназначенную для разработки, но ниже также описывается, как установить минимизированные файлы, ориентированные на развертывание в производственной среде, и как использовать jQuery UI через сети распространения содержимого (CDN).

Получение библиотеки jQuery UI

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

Выбор темы оформления

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

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

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) — это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

Чтобы получить одну из готовых тем, следует перейти на вкладку Gallery. На момент написания этих строк галерея включала 24 темы, охватывающие широкий спектр вариантов цветового оформления — от приглушенных и нежных тонов до ярких и вызывающих. При выполнении щелчков на темах галереи внешний вид виджетов, отображаемых на остальной части страницы, будет соответствующим образом обновляться, позволяя вам оценить, как может выглядеть приложение:

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется — это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

Для выполнения примеров вам понадобятся все компоненты, поэтому проследите за тем, чтобы были установлены все флажки.

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

Следующий шаг заключается в выборе темы. Это делается с помощью раскрывающегося списка, который располагается снизу на странице, как показано на рисунке:

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

После выделения всех компонентов и выбора темы и стабильной версии загрузите созданный вами пользовательский вариант загрузочного архива библиотеки jQuery UI, щелкнув на кнопке Download.

Установка версии библиотеки jQuery UI, предназначенной для разработки

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

Вы должны скопировать в папку с файлами примеров следующие файлы и папки:

Содержащиеся в папках ui и themes файлы JavaScript и CSS используются отдельными компонентами и средствами, входящих в состав библиотеки. У вас не будет необходимости обращаться к ним, но они могут пригодиться в том случае, если вы захотите работать с ограниченным набором средств библиотеки jQuery UI.

Имена JavaScript- и CSS-файлов включают номер версии загруженного выпуска библиотеки. В моем случае это версия 1.10.3. Библиотека jQuery UI активно разрабатывается, и вы можете загрузить более позднюю версию, чем 1.10.3.

Подключение библиотеки jQuery UI к HTML-документу

Все, что вам теперь остается сделать — это включить библиотеку jQuery UI в свой HTML-документ. Это можно сделать, добавив в документ элементы script и link, содержащие ссылки на файлы JavaScript и CSS, которые вы загрузили, как показано в примере ниже:

Ссылаться непосредственно на папку images необязательно. Коль скоро папка images и CSS-файл находятся на своих местах, jQuery UI сможет самостоятельно найти все необходимые ресурсы.

Библиотека jQuery UI зависит от библиотеки jQuery. Для того чтобы использовать jQuery UI в документе, ее следует предварительно подключить к нему. Библиотека jQuery UI не относится к числу автономно используемых библиотек.

Показанный в примере выше документ содержит простой тест, позволяющий проверить правильность подключения библиотеки jQuery UI. В случае нормального открытия страницы вы должны увидеть кнопку, похожую на ту, которая показана на рисунке. Не обращайте пока внимания на вызов метода button() в элементе script. О том, для чего он предназначен и как работает, вы узнаете в следующей статье.

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

Установка библиотеки jQuery UI для производственной среды

Завершив разработку своего веб-приложения и подготовившись к его развертыванию, можете использовать минимизированные версии файлов, включенных в загрузочный архив. Эти файлы имеют меньшие размеры, однако прочитать их содержимое, если это потребуется в интересах отладки, будет нелегко. Чтобы использовать версии файлов, предназначенные для развертывания, скопируйте в каталог своего веб-сервера следующие файлы и папки:

Папка images и файл CSS здесь те же, что и в версии для разработки; изменения могут касаться лишь файла JavaScript. Чтобы выполнить чистую установку, достаточно скопировать эти файлы в каталог сервера.

Использование библиотеки jQuery UI через сеть распространения содержимого

Вопрос об использовании CDN для загрузки библиотеки jQuery уже затрагивался ранее. Если вы приверженец такого подхода, то вас порадует тот факт, что точно так же можно поступить и в случае библиотеки jQuery UI. Как Google, так и Microsoft обеспечивают хостинг файлов jQuery UI в своих сетях CDN. Для нашего базового примера я использую службу Microsoft, поскольку она предоставляет как JavaScript-файлы jQuery UI, так и стандартные темы оформления.

Чтобы использовать CDN, необходимо располагать URL-адресами нужных файлов. Если речь идет о службе Microsoft, то перейдите на страницу Microsoft Ajax Content Delivery Network. Прокрутив страницу вниз, вы увидите список ссылок, соответствующих различным версиям jQuery UI. Щелкните на ссылке той версии, которую вы используете (в моем случае это версия 1.10.3). Вы увидите URL-адреса для обычной и минимизированной версий файла библиотеки jQuery UI.

На оставшейся части страницы отображаются готовые темы, под каждой из которых указывается URL-адрес файла CSS.

Чтобы подключить эти файлы к документу через CDN, достаточно поместить в элементы script и link не ссылки на локальные файлы jQuery UI, а соответствующие URL-адреса, как показано в примере ниже:

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

JQuery UI пример — ротатор (Spinner)

Вверх / вниз кнопки со стрелками и обработки ключей, входных значений функций ввода текста усиливается.

Для получения более подробной информации о элементе вращателя см API документации ротатора элемент (Spinner виджетов) .

По умолчанию функция

по умолчанию ротатор.

валюта

Этот пример является формой пожертвования, с количеством валютных опционов и ротатора.

десятичный

Этот пример является десятичным ротатора. Надбавки 0,01. Код дело с культурными изменениями, будет читать текущее значение селектора при изменении культуры, она сбросит значение, основанное на стиле новой культуры.

Фабрика виджетов UI

Материал из JQuery

jQuery.widget()

Все jQuery UI плагины (плагины поведения и виджеты) реализованы с помощью одного удобного инструмента — фабрики виджетов jQuery UI. Она позволяет создавать гибкие, настраиваемые плагины, с едиными, интуитивно понятными api, включающими свойства, методы и события, связанные с работой плагина.

Что же это такое?

Фабрика виджетов представляет из себя метод глобального объекта jQuery — jQuery.widget(). Он принимает 2 или 3 аргумента:

pluginname — задается строкой в формате "namespace.pluginname". Часть namespace (пространство имен) обязательна. Если не указать пространство имен, фабрика виджетов сделает это за вас. Часть pluginname станет непосредственным именем плагина и прототипа. Например, jQuery.widget("demo.multi", <. >) приведет к созданию следующих полей jQuery.demo, jQuery.demo.multi и jQuery.demo.multi.prototype, а так же jQuery.fn.multi (то есть, появится возможность вызывать метод multi для выбранных элементов)
parent — необязательный аргумент, в котором можно указать другой плагин. В этом случае, создаваемый плагин будет от него наследоваться.
implementation — реализация работы плагина. Задается с помощью js-объекта. Именно этот объект, становится прототипом для экземпляров создоваемого плагина (конечно, если задан параметр parent, объект будет предварительно подвергнут некоторым изменениям, связанным с наследованием). Подробности реализации этого параметра смотрите ниже.

Библиотека jQuery, как вы уже возможно знаете, тоже предоставляет средства для создания плагинов. Однако, по сути, они дают только одно готовое решение — работу с выбранными элементами, с возможностью продолжать цепочку вызовов. Если создавать плагины с помощью $.widget(), то в руках разработчика окажется гораздо большее число готовых решений. Например возможность наследования, стандартизированный подход работы со свойствами, методами и событиями плагина, и это далеко не все.

Работа с готовыми плагинами

Прототип плагина

Когда вы делаете плагин с помощью $.widget(), jQuery UI создает javascript-объект, содержащий все настройки по умолчанию и методы плагина. Этот объект называют прототипом плагина. При установке плагина на определенный элемент, делатся отдельная копия этого прототипа, которая будет хранить состояние плагина именно на этом элементе. Такую отдельно взятую копию прототипа называют экземпляром плагина.

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

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

  • Задать настройки при инициализации плагина: $("#something").plaginName();
  • Узнать/изменить настройки после инициализации: $("#something").plaginName("option", optionName, [value]); (чтобы изменить настройку optionName нужно указать value, чтобы узнать ее текущее значение — параметр value следует пропустить).

Методы плагина

Плагины, организованные с помощью $.widget() могут обладать как открытыми, так и защищенными методами, предназначенными исключительно для внутренних потребностей плагина. Пользовательский доступ (то есть только к открытым методам) осуществляется следующим образом: $("#something").plaginName("plaginMethod", methodParams . ). Его использование гарантирует, что вы не вызовете лишних методов, которые могут привести к неправильной работе плагина.

Если вам по какой то причине нужно получить доступ ко всем методам плагина, то это можно сделать так: $("#something").data("plaginName").plaginMethod(methodParams) (то есть непосредственно на экземпляре плагина).

События

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

Прочее

  • На основе указанных имени плагина и пространства имен, организуется селектор вида :namespace-pluginname, с помощью которого можно находить элементы, на которых активирован плагин.
  • Работа плагина на элементе может быть приостановлена и возобновлена. Еще, можно уничтожить экземпляр плагина и возвратить элемент в его прежнее состояние.
  • Плагины защищены от многократной активации на одном и том же элементе.

Создание плагина

В последнем параметре функции $.widget() нужно задавать реализацию создаваемого плагина (методы и свойства). Задается она с помощью js-объекта, который должен содержать минимум четыре поля: список свойств со значениями по умолчанию (поле с имененем options), конструктор (поле _create), деструктор (поле destroy), а так же поле для функции изменяющей параметры плагина (_setOption). Таким образом, минимальная реализация плагина имеет следующий вид:

Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин, в качестве примера. В jQuery UI есть плагин, превращающий выбранные элементы в диалоговые окна. Сделаем похожий плагин, но с одним отличием — наши диалоговые окна будут сворачиваемыми. Назовем его cDialog (collapsed dialog).

Наследование

Плагины, создаваемые с помощью $.widget() обладают очень полезным свойством — наследованием. Это позволяет делать плагины, на основе других, уже существующих плагинов. Для этого необходимо указать объект с родительским плагином во втором параметре метода $.widget().

Создаваемый нами плагин cDialog унаследуем от стандартного dialog. Это будет выглядеть следующим образом:

Как видите, наш плагин уже умеет делать тоже, что и его родитель — dialog.

Свойства (настройки)

Как уже было сказано, свойства плагина и их значения по умолчанию задаются в поле option в объекте с реализацией плагина:

Если создаваемый плагин наследуется от другого плагина, то он автоматически будет обладать всеми настройками родителя. Однако, значения по умолчанию унаследованных свойств могут быть изменены.

Для нашего плагина cDialog, уберем возможность быть растягиваемым с помощью ползунка, которая включена в dialog по умолчанию. Кроме этого, внесем одно новое свойство isCollapsed, которое будет хранить текущее состояние окна — развернутое/свернутое:

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

Предопределенные свойства

Все экземпляры плагина, созданного с помощью $.widget(), содержат предопределенные свойства с базовой информацией. Эти свойства создаются и заполняются автоматически.

Создание собственных методов плагина

Чтобы задать новый метод плагина, нужно задать его отдельным полем объекта с реализацией плагина (последний параметр функции $.widget()):

В итоге, созданный метод myMethodName можно будет вызывать внутри других методов плагина так: this.myMethodName(params), а вне плагина: $("#something").plaginName("myMethodName", params).

Как можно было уже заметить, некоторые методы начинаются с символа нижнего подчеркивания. Такие методы являются скрытыми от внешних вызовов, то есть метод _myMethodName нельзя будет вызвать так: $("#something").plaginName("_myMethodName"). Скрытие методов очень удобно, когда некоторые из них не должны вызываться пользователями плагина, а нужны лишь для организации его внутренней функциональности. Например это может быть метод, проводящий подготовительные работы в DOM (добавление вспомогательных элементов, классов, атрибутов), при активации плагина на элементе странице. Однако, технически, закрытые методы все же могут быть вызваны из вне — обращением непосредственно к экземпляру плагина: $("#something").data( "plaginName" )._myMethodName().

В конструктор и деструктор создаваемого нами cDialog добавим реализацию с требуемыми изменениями в DOM (добавление кнопки сворачивания/разворачивания диалогового окна в конструктор и ее удаление в деструктор). Элемент с кнопкой, сворачивающей/разворачивающей окно, сделаем по принципу кнопки закрывающей диалоговое окно (чтобы посмотреть как устроена последняя, можно, например, использовать "просмотр кода элемента" в браузере chrome). Чтобы новую кнопку можно было легко находить на странице, а так же указывать css-правила для нее, присвоим элементу, который ее представляет класс ui-dialog-titlebar-hideshow (остальные используемые классы относятся к работе jQuery UI).

Кроме этого, организуем методы collapse и uncollapse, для сворачивания и разворачивания диалогового окна соответственно. Свернутому элементу диалогового окна будем присваивать класс ui-dialog-hideshow-close:

Добавим реализацию метода _setOption, в котором обработаем изменение добавленного нами ранее свойства isCollapsed и получим следующий результат:

Предопределенные методы

Все экземпляры плагина, созданного с помощью $.widget(), содержат предопределенные методы (их список представлен ниже). Методы _create, _init, destroy и _setOption можно переписывать ("перекрывать") реализуя требуемую функциональность (например _create переписывают для обработки активации плагинов, _setOption для обработки изменения свойств). Реализацию остальных методов переписывать не следует, их следует только использовать.

Как видно в данном примере, в _setOption удобно прописывать необходимые реакции, на изменения определенных свойств, после чего вызывать базовый _setOption, который произведет непосредственное изменения требуемого свойства. Если внутри _setOption будет необходимо узнать текущее значение какого-либо свойства, можно будет узнать его с помощью this.options[key].

События

Используя метод _trigger() (см. его описание выше), можно генерировать собственные события плагина. Например, организуем для нашего плагина cDialog события collapse и uncollapse, чтобы пользователи нашего плагина могли обрабатывать сворачивание и разворачивание диалоговых окон. Для этого, в методах collapse и uncollapse нужно будет вызывать соответствующие события:

После этого, можно будет привязывать обработчики этих событий, обращаясь к самому плагину или средствами обработки событий jQuery:

Обзор библиотеки jQuery UI с примером

Библиотека jQuery UI (User Interface) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки jQuery. Под пользовательским интерфейсом подразумевают - взаимодействие пользователя и веб-страницы.

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

Используемые на сайтах календари, слайдеры, всплывающие окна, уже стали обязательным атрибутом. Так зачем каждый раз разработчику писать код с нуля? Когда он может готовый шаблон подстроить под себя и использовать на своем сайте.

Подключение jQuery UI

Официальный сайт: https://jqueryui.com/

Библиотеку jQuery UI можно скачать на компьютер или подключить через CDN ссылку.

Подключение через CDN

Между тегами head прописать ссылку на jquery-ui.css и библиотеки jQuery и jQuery UI.

У вас есть два варианта, как скачивать библиотеку.

Выборочное скачивание - Custom Download

Вам точно не надо скачивать всю библиотеку, если вы собираетесь использовать только какие-то отдельные компоненты. На странице Download Builder вы снимаете все галочки, кроме нужных компонентов. Например, если вам нужен только виджет accordion, то напротив него ставите в чекбокс галочку и сайт подскажет вам, какие элементы будут нужны ещё для работы. Галочки будут расставлены автоматически, там где надо и вы не будете скачивать ненужные файлы, что положительно скажется на скорости загрузки сайта.

Прежде чем нажать кнопку download, выбираете подходящую тему для красивого оформления компонентов. Посмотреть на визуальное оформление готовых тем, можно в разделе Theme/Gallery.

Для встраивания компонентов уже в стилизованный сайт, вам больше подойдет конструктор тем - ThemeRoller, перейдите в раздел Theme. При изменениях в панели управления внешнего вида, вы сразу будете видеть, как выглядят все виджеты. После того как вы закончите формирование внешнего вида элемента, нажимаете на кнопочку download и скачиваете только выбранные элементы и тему, что очень удобно.

Полное скачивание - Quick Download

Ситуация, когда вам нужна вся библиотека маловероятна, разве что посмотреть исходный код. Для скачивания полной последней версии надо нажать на кнопку: Stable.

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

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

Рассмотрим на примере виджета - Tooltip. Предназначение этого виджета: для красивого открывания подсказки, указанной в атрибуте title.

Как обычно делаем HTML структуру. В параграфе p размещаем поле ввода для вашего возраста - input. В текстовом поле мы указываем атрибут title с текстом "Укажите, пожалуйста, Ваш возраст". К этому элементу мы и применим виджет tooltip.

Создаем плагин jQuery UI

jQuery содержит метод fn.extend(), который облегчает авторизацию плагинов jQuery, давая возможность писать код, используемый точно так же, как и другие методы jQuery. jQuery UI также содержит структуры, которые облегчают авторизацию пользовательских плагинов. Данный урок будет посвящен именно этому вопросу. Используемые методы jQuery UI отличаются от стандартного плагина jQuery, также сущетсвует ряд определенных требований, которые должны быть удовлетворены для организации плагина.

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

Начнем

Нужно скопировать jQuery, также пару файлов из jQuery UI (нужна версия jQuery UI 1.8 ). Создайте рабочую директорию где-нибудь на Вашем компьютере и назовите ее jqueryui-plugin, затем создайте в ней папки css, js и img (изображения, которые используются в уроке можно найти в архиве с исходниками).

Загрузите бибилиотеку и распакуйте ее. Нам нужно только несколько файлов из архива, и именноо jquery-1.4.1.js, jquery.ui.core.js и jquery.ui.widget.js. Поместите данные файлы в папку js в Вашей рабочей директории. Также понадобится какая-нибудь тема текущей стабильной версии jQuery UI (в уроке используется ui-lightness).

Мы будем делать виджет названий, поэтому нам понадобится страница с набором изображений для разработки и теститрования плагина. Код тестовой страницы:

Все достаточно просто. На странице размещены только три изображения. За ними следуют четыре файла со скриптами. Три ссылаются на исходные файлы jQuery и jQuery UI, а четвертый на наш плагин. Файл jquery.ui.core.js требуется для виджетов/плагинов jQuery UI. Файл jquery.ui.widget.js позволяет создавать полноценные виджеты, которые обладают общей функциональностью API. Большинство библиотечных компонентов требуют исользования этого файла, мы будет также использовать его для создания нашего плагина.

Создаем файл плагина

Создаем новый файл JavaScript и сохраняем его как jquery.ui.captionator.js в папке js. Следует использовать соглашение о наименованиях для jQuery UI, которое было обновлено в версии 1.8, и называть файлы по схеме jquery.ui.plugin_name.js. Добавляем в файл следующий код:

Весь код, который выполняется нашим плагином должен быть инкапсулирован в анонимную фуункцию. Объект jQuery передается в эту функцию и используется внутри нее через псевдоним $. Таким образом обеспечивается совместимость с методом jQuery noConflict(). Это специфицированное требование и его необходимо выполнять.

Затем нужно определить плагин. Добавляем следующий код в нашу анонимную функцию:

Шаблон использования фабрики виджета очень простой. Мы вызываем метод widget(), указывая имя плагина как первый аргумент. Объект содержит свойства и методы, которые выполняют функции плагина. Такой подход позволяет нам вызывать плагин (и создавать), используя общий синтаксис jQuery $(“элемент_к_ которому_применяется_плагин”).captionator(), также как и другие методы jQuery или jQuery UI.

Фабрика виджета имеет набор методов и свойств. Например, мы можем установить определенные опции для плагина, используя свойство options. Или добавить функцию инициализации, которая будет выполняться автоматически фабрикой виджета, как только экземпляр плагина будет вызван. В объекте, который является вторым аргументом в предыдущем коде, вставим строки:

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

$(“элемент_к_ которому_применяется_плагин”).captionator(< location: “top” >);

Затем мы создаем функцию инициализации:

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

Основная часть нашего метода инициализации - это набор переменных. В нашей функции this ссылается на объект, который передается в метод экземпляра плагина. Первая переменная содержит ссылку на текущий экземпляр плагина. Метод _create вызывается для каждого элемента (одного или нескольких), для которого вызывается метод плагина.

Мы можем получить доступ к опциям плагина по умолчанию (которые изменяются автоматически, если пользователь устанавливает какую-нибудь из них) используя свойство объекта options. Мы сохраняем ее во второй переменной. К элементу, для которого вызван метод плагина (captionator()) можно получить доступ, используя свойство объекта element. Мы сохраняем его в третьей переменной.

Мы используем четвертую переменную для хранения ссылки на новый элемент названия, который строится из простого . innerText, принадлежащий , использует имеет атрибут alt текущего изображения, и к нему добавлено несколько классов. Мы используем имя класса ui-widget, таким образом он может использовать стили по умолчанию из текущей темы jQuery UI. Также мы даем ему имя класса пользователя, и можен делать установки нашего собственного стиля.

Затем нужно установить некоторые свойства . Мы используем отдельную таблицу стилей, но некоторые установки, такие как color и background-color контролируются через конфигурируемые опции, поэтому нам надо установить их при использовании плагина. Ширина названия должна соответствовать ширине изображения, которое его перекрывает. Таким образом ее надо определить и использовать в программе. В завершении новый вставляется в страницу непосредственно за целевым изображением..

Как только изображение вставлено, нужно изменить размер и позиционировать его. Сделать данное действие аккуратно можно в том случае, если изображение уже сущесвует в DOM, и к нему применены правила CSS, такие как font-size. Поэтому мы добавляем название к странице, и затем определяем его размеры, которые сохранием в переменных capWidth и capHeight.

Как только название добавлено к странице (и только тогда) мы можем устанавливать корректные ширину, высоту и положение для каждого названия, используя для этого метод css() снова. Название в действительности полностью отделено от изображения. Оно вставлется сразу после каждого изображения и затем позиционируется.

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

Другой метод нашего плагина - это метод destroy(), который является общим для всех плагинов jQuery UI. Мы должны реализовать данный метод для очистки после использования нашего плагина. В нашем примере метод может быть очень простым:

Все что нужно - удалить название и отвязать обработчик события изменения размера окна. Данный метод может быть вызван разработчиком при использовании плагина, поэтому имя метода не имеет предшествующего подчеркивания. Для вызова данного метода разработчик использует запись $(“элемент_к_ которому_применяется_плагин”).captionator(“destroy”).

Нам нужно обеспечить другой метод, который контролируется/ выполняется фабрикой виджета. Опции плагина можно устанавливать во время его вызова $(“элемент_к_ которому_применяется_плагин”).captionator(“option”, “location”, “top”). А для применения опций нужно написать метод _setOption:

Название данного метода снабжено подчеркиванием, так как разработчик использует option, а не _setOption для действительного изменения опций. Нам не нужно беспопкоится о том, как это обрабытывается, мы только обеспечиваем данный метод тем, что нужно для нашего плагина. Так этот метод уже существует в фабрике виджета, то нужно вызвать оригинальный метод, который выполниться перед нашим кодом, с использованием прототипа объекта Widget , указания имени метода ( в нашем случае это _setOption, но можно также использовать любой другой встроенный метод) и указываем apply для его вызова. Затем можно выполнять код для нашего плагина.

Функция автоматически получает два аргумента, которые является изменяемой опцией и новым значением. Мы сохраняем общие элементы, такие как изображение и название, текущую высоту каждого названия. Затем используется простое выражение switch-case для выделения каждой из трех опций для изменения.

Добавляем события

Очень важно добавить события, которые разработчик, использующий ваш плагин, может обрабатывать в момент, когда конечный пользователь воздействует на плагин каким-либо образом. Фабрика виджета обрабатывает большинство таких задач для нас. Все что нужно - это запустить событие. Наш плагин имеет немного функций, но мы можем запускать событие каждый раз, когда название добавляется на страницу. Добавим следующий код непосредственно перед обработчиком события изменния размера:

Это все, что нужно сделать. Одна строчка кода и мы имеем ползовательское событие, на которое можно реагировать. Мы вызваем метод _trigger() экземпляра плагина (который сохранен в перменной self) и передаем методу три аргумента. Первый - имя события, второй - объект события (в нашем плагине в нем нет необхоимости, поэтому значние равно null), и третий - ссылка на элемент названия. Фабрика виджета автоматически передаст объект события (если он есть) и данные в третий параметр для вызова функции, которая использует добавленное событие. Разработчик может подключиться к событию используя следующий синтаксис: $(“элемент_к_ которому_применяется_плагин”).captionator(< added: function(e, ui)< . . .>);

Стилизация плагина

Для нашего плагина нужна маленькая таблица стилей. Буквально нам нужно установить три стиля. Мы создадим новый файл с названием ui.captionator.css, сохраним его в папке css. Он содержит следующий код:

Теперь наши названия должны выглядеть так:

Заключение

Как и метод создания плагинов jQuery fn.extend(), jQuery UI также имеет свой собственный механизм, который позволяет разработчику быстро и легко создавать масштабируемые и производительные плагины, которые соответствуют высоким стандартам проектов jQuery UI. Фабрика виджета берет на себя большой объем сложной работы по созданию плагина.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com
Перевел: Сергей Фастунов
Урок создан: 30 Июля 2010
Просмотров: 34285
Правила перепечатки

5 последних уроков рубрики "jQuery"

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

♥ § Клуб Одиноких Сердец :: Элемент Спиннер (Spinner) плагина UI библиотеки jQuery ♥

Описание: Расширяет возможности текстового ввода данных для цифровых значений с помощью кнопок вверх/вниз и клавиш "стрелки" на клавиатуре.
Description: Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

Пример странички Спиннер Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.

Пример странички Спиннер Десятичный (Decimal):
можно посмотреть здесь.

Пример странички Спиннер Валютный (Currency):
можно посмотреть здесь.

Пример странички Спиннер Карта (Map):
можно посмотреть здесь.

Пример странички Спиннер Время (Time):
можно посмотреть здесь.

Пример странички Спиннер Перегруженный (Overflow):
можно посмотреть здесь.

Тесты по теории можно посмотреть здесь.

culture
Type: String
Default: null

Sets the culture to use for parsing and formatting the value. If null, the currently set culture in Globalize is used, see Globalize docs for available cultures. Only relevant if the numberFormat option is set. Requires Globalize to be included.
Устанавливает региональную настройку для использования в парсинге и форматировании значения. Если null (пусто) используется текущая региональная настройка, установленная в Глобализаторе (Globalize), см документацию по Глобализатору (Globalize) со списком доступных региональных настроек. Доступна при условии, если опция numberFormat (формат числа) установлена. Требует, чтобы Глобализатор (Globalize) был подключен.

Code examples: (Примеры кода: )
Initialize the spinner with the culture option specified:
Инициализация Сортируемого с определенной опцией cursor:

Get or set the culture option, after initialization:
Можно получить или установить опцию cursor после инициализации:

disabled
Type: Boolean
Default: false

Disables the spinner if set to true.
Выключает Спиннер, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the sortable with the disabled option specified:
Инициализация Спиннера с определенной опцией disabled:

Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

Icons to use for buttons, matching an icon defined by the jQuery UI CSS Framework.
Иконки для показа на кнопках, в соответствии с иконками, определенными в Фрейворке jQuery UI CSS Framework.

• up (string, default: "ui-icon-triangle-1-n")
• down (string, default: "ui-icon-triangle-1-s")

Code examples: (Примеры кода: )
Initialize the spinner with the icons option specified:
Инициализация Кнопки с определенной опцией icons:

Get or set the icons option, after initialization:
Можно получить или установить опцию icons после инициализации:

incremental
Type: Boolean or Function()
Default: true

Controls the number of steps taken when holding down a spin button.
Контролирует количество совершаемых шагов при нажатии спиновой кнопки.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to true, the stepping delta will increase when spun incessantly. When set to false, all steps are equal (as defined by the step option). Когда установлена на значение true (истина), пошаговая дельта будет всегда увеличиваться при нажатии спиновой кнопки. Когда установлена на значение false (ложь), все шаги будут одинаковые (как определено в опции step(шаг)).
• Function (Функция): Receives one parameter: the number of spins that have occurred. Must return the number of steps that should occur for the current spin. Получает один параметр: количество случившихся спинов. Должна вернуть количество шагов, которые произойти для текущего спина.

Code examples: (Примеры кода: )
Initialize the spinner with the incremental option specified:
Инициализация Спиннера с определенной опцией incremental:

Get or set the incremental option, after initialization:
Можно получить или установить опцию incremental после инициализации:

max
Type: Number or String
Default: null

The maximum allowed value. The element's max attribute is used if it exists and the option is not explicitly set. If null, there is no maximum enforced.
Максимально допустимое значение. Аттрибут элемента max (максимальный) используется, если таковой существует и опция точно не установлена. Если null (пусто), то нет насильственно определенного максимума. Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The maximum value. Максимальное значение.
• String (Строка): If Globalize is included, the max option can be passed as a string which will be parsed based on the numberFormat and culture options; otherwise it will fall back to the native parseFloat() method. Если Глобализатор (Globalize) подключен, опция max (максимум) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the max option specified:
Инициализация Спиннер с определенной опцией max:

Get or set the max option, after initialization:
Можно получить или установить опцию max после инициализации:

min
Type: Number or String
Default: null

The minimum allowed value. The element's min attribute is used if it exists and the option is not explicitly set. If null, there is no minimum enforced.
Минимально допустимое значение. Аттрибут элемента min (минимальный) используется, если таковой существует и опция точно не установлена. Если null (пусто), то нет насильственно определенного минимума. Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The minimum value. Минимальное значение.
• String (Строка): If Globalize is included, the min option can be passed as a string which will be parsed based on the numberFormat and culture options; otherwise it will fall back to the native parseFloat() method. Если Глобализатор (Globalize) подключен, опция min (минимум) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the min option specified:
Инициализация Спиннер с определенной опцией min:

Get or set the min option, after initialization:
Можно получить или установить опцию min после инициализации:

numberFormat
Type: String
Default: null

Format of numbers passed to Globalize, if available. Most common are "n" for a decimal number and "C" for a currency value. Also see the culture option.
Формат чисел, передаваемых Глобализатору (Globalize), если это возможно. Наиболее общие значения: "n" для десятичных чисел и "C" для валютных значений. См также опцию culture (региональные настройки).

Code examples: (Примеры кода: )
Initialize the spinner with the numberFormat option specified:
Инициализация Спиннера с определенной опцией numberFormat:

Get or set the numberFormat option, after initialization:
Можно получить или установить опцию numberFormat после инициализации:

page
Type: Number
Default: 10

The number of steps to take when paging via the pageUp/pageDown methods.
Число шагов для пейджинга через методы pageUp/pageDown.

Code examples: (Примеры кода: )
Initialize the spinner with the page option specified:
Инициализация Спиннера с определенной опцией page:

Get or set the page option, after initialization:
Можно получить или установить опцию page после инициализации:

step
Type: Number or String
Default: 1

The size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element's step attribute is used if it exists and the option is not explicitly set.
Размер шага при спиннинге через кнопки или через методы stepUp()/stepDown(). Аттрибут элемента step (шаг) используется, если таковой существует и опция точно не установлена.

Multiple types supported:
Поддерживаются множественные типы:
• Number (Число): The size of the step. Размер шага.
• String (Строка): If Globalize is included, the step option can be passed as a string which will be parsed based on the numberFormat and culture options, otherwise it will fall back to the native parseFloat. Если Глобализатор (Globalize) подключен, опция step (шаг) может быть передана как строка, которая будет парсирована на основе опции numberFormat (формат числа) и опции culture (региональная настройка). В противном случае парсинг будет проведен стандартным методом parseFloat().

Code examples: (Примеры кода: )
Initialize the spinner with the step option specified:
Инициализация Спиннера с определенной опцией step:

Get or set the step option, after initialization:
Можно получить или установить опцию step после инициализации:

destroy()
Removes the spinner functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Спиннера. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):

disable()
Disables the spinner.
• This method does not accept any arguments.

Выключает Спиннер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):

enable()
Enables the spinner.
• This method does not accept any arguments.

Включает Спиннер.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):

option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current spinner options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Спиннера.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

option( optionName, value )
Sets the value of the spinner option associated with the specified optionName.
Устанавливает значение опции Спиннера, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

option( options )
Sets one or more options for the sortable.

Устанавливает одну или более опций для Спиннера.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

pageDown( [pages ] )
Decrements the value by the specified number of pages, as defined by the page option. Without the parameter, a single page is decremented.

Уменьшает значение на определенное количество страниц, как определено в опции page (страница). Без параметра уменьшается на простую страницу.

• pages
Type: Number
Number of pages to decrement, defaults to 1.
Количество страниц для уменьшения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the pageDown method:
Запуск метода:

pageUp( [pages ] )
Increments the value by the specified number of pages, as defined by the page option. Without the parameter, a single page is incremented.

Увеличивает значение на определенное количество страниц, как определено в опции page (страница). Без параметра увеличивается на простую страницу.

• pages
Type: Number
Number of pages to increment, defaults to 1.
Количество страниц для увеличения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the pageUp method:
Запуск метода:

stepDown( [steps ] )
Decrements the value by the specified number of steps. Without the parameter, a single step is decremented.

If the resulting value is above the max, below the min, or results in a step mismatch, the value will be adjusted to the closest valid value.

Уменьшает значение на определенное количество шагов. Без параметра уменьшается на простой шаг.

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

• steps
Type: Number
Number of steps to decrement, defaults to 1.
Количество шагов для уменьшения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the stepDown method:
Запуск метода:

stepUp( [steps ] )
Increments the value by the specified number of steps. Without the parameter, a single step is incremented.

If the resulting value is above the max, below the min, or results in a step mismatch, the value will be adjusted to the closest valid value.

Увеличивает значение на определенное количество шагов. Без параметра увеличивается на простой шаг.

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

• steps
Type: Number
Number of steps to increment, defaults to 1.
Количество шагов для увеличения, по умолчанию равно 1.

Code examples: (Примеры кода: )
Invoke the stepUp method:
Запуск метода:

value()
Returns: Number
Gets the current value as a number. The value is parsed based on the numberFormat and culture options.
• This method does not accept any arguments.

Получает текущее значение, как число. Значение парсируется на основе опций numberFormat (формат числа) culture (региональная настройка).
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

value( value )
• value
Type: Number or String
The value to set. If passed as a string, the value is parsed based on the numberFormat and culture options.
Значение для установки. Если передается как строка, значение парсируется на основе опций numberFormat (формат числа) culture (региональная настройка).

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

widget()
Returns a jQuery object containing the generated wrapper.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий сформированную обертку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:

change( event, ui )
Type: spinchange

Triggered when the value of the spinner has changed and the input is no longer focused.

• event
Type: Event

Code examples: (Примеры кода: )
Initialize the spinner with the change callback specified:

Bind an event listener to the spinchange event:

create( event, ui )
Type: spincreate

Triggered when the spinner is created.

• event
Type: Event

Code examples: (Примеры кода: )
Initialize the spinner with the create callback specified:

Bind an event listener to the spincreate event:

spin( event, ui )
Type: spin

Triggered during increment/decrement (to determine direction of spin compare current value with ui.value).

Can be canceled, preventing the value from being updated.

Триггирует в течении увеличения/уменьшения (для определения направления спина сравнивается текущее значение с ui.value).

Может быть прерван, для предотвращения обновления значения.

• event
Type: Event

◦ value
Type: Number
The new value to be set, unless the event is cancelled.

Code examples: (Примеры кода: )
Initialize the spinner with the spin callback specified:

Bind an event listener to the spin event:

start( event, ui )
Type: spinstart

Triggered before a spin. Can be canceled, preventing the spin from occurring.

• event
Type: Event

Code examples: (Примеры кода: )
Initialize the spinner with the start callback specified:

Bind an event listener to the spinstart event:

stop( event, ui )
Type: spinstop

Triggered after a spin.

• event
Type: Event

Code examples: (Примеры кода: )
Initialize the spinner with the stop callback specified:

Bind an event listener to the spinstop event:

Overview (Обзор)
Spinner, or number stepper, widget is perfect for handling all kinds of numeric input. It allow users to type a value directly or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.

Spinner wraps a text input, adds two buttons to increment and decrement the current value, along with handling key events for the same purpose. It delegates to Globalize for number formatting and parsing.

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

Спиннер вращает текстовый ввод, добавляет 2 кнопки для увеличения и уменьшения текущего значения, с той же целью можно использовать клавиши управления событиями. Спиннер обращается к Глобализатору (Globalize) для проведения форматирования и парсинга числа.

Keyboard interaction (Клавиши Клавиатуры)
• UP: Increment the value by one step.
• DOWN: Decrement the value by one step.
• PAGE UP: Increment the value by one page.
• PAGE DOWN: Decrement the value by one page.

Focus stays in the text field, even after using the mouse to click one of the spin buttons. • UP: Увеличивает значение на один шаг.
• DOWN: Уменьшает значение на один шаг.
• PAGE UP: Увеличивает значение на одну страницу.
• PAGE DOWN: Уменьшает значение на одну страницу.

Фокус остается в текстовом поле, даже после использования мыши для клика одной из кнопок спина.

Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.

Example: Plain number spinner.

WebForMyself [WebForMyself] Библиотека JQuery UI (User Interface) (2020)

Arsenn32

Arsenn32

Автор: WebForMyself
Название: Библиотека JQuery UI (User Interface) (2020)

В данном видео я хотел бы представить Вашему вниманию новый премиум курс от нашей команды по изучению библиотеки JQuery UI.

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

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

Определенный набор элементов, которые наиболее часто используются и могли быть созданы вручную с использованием jQuery нам предлагает библиотека jQuery UI в уже готовом и удобном виде.

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

Добавить виджеты в существующую библиотеку jQuery-UI

Я должен расширить существующий проект, который использует версию 1.10.4, и эта версия jQuery-UI собирается без каких-либо виджетов. Теперь я хочу использовать виджеты "Spinner" и "Selectmenu".

Для "Spinner" -widget: это доступно для jQuery версии 1.10.4. "Выбор меню" -widget доступен из версии 1.11.4.

К сожалению, я не могу обновить текущую версию jQuery-UI, поэтому я хочу знать, как/если возможно улучшить текущую версию с помощью этих двух виджетов.

Используя $.widget() вы можете расширять или создавать свои собственные виджеты. Я собрал этот код с https://code.jquery.com/ui/1.11.4/jquery-ui.js и, поскольку $.ui.menu существует в 1.10.4, это в основном работает. Некоторые корректировки должны быть сделаны.

Первая проблема, 1.11.4, использует .menu('instance') который недоступен для 1.10.4. В приведенном выше коде это использовалось в строке 145 и может быть возвращено к .data("ui-menu"); компенсировать.

Во-вторых, при выборе элемента это вызвало ошибку, так как item был определен. Это также связано с вышеуказанным вопросом. Надо над этим больше работать. Работа в процессе.

jQuery UI

Введение в jQuery UI

Фреймворк jQuery позволяет не только управлять элементами DOM, отправлять запросы AJAX, но представляет неплохой инструмент для построения пользовательского интерфейса с помощью виджетов. Для работы с интерфейсом предназначена специальная библиотека jQuery UI.

Библиотека jQuery UI загружается отдельно от основной библиотеки jQuery: ее можно найти по адресу https://jqueryui.com/download/. По этому адресу внизу страницы вы можете увидеть список тем библиотеки. Темы влияют на оформление применяемых компонентов. Но в начале работы выбор темы не столь важен, поэтому можно оставить стандартную тему UI lightness. Также на странице загрузок можно детализировать загрузку - что будет входить в загружаемый пакет, но можно оставить все установки по умолчанию и внизу страницы нажать кнопку Download для загрузки.

Также можно использовать сети CDN, поскольку библиотека довольно популярная, то она есть во многих CDN.

Распакуем пакет. В нем будут несколько папок и файлов в состав которых включены все опции, что мы выбрали на странице загрузки jQueryUI.

А также файл index.html, содержащий примеры использования виджетов и логики из библиотеки jQueryUI. Если мы откроем данный файл в текстовом редакторе, то увидим, что он ссылается на выбранную нами тему, библиотеку jQuery и библиотеку jQuery UI. В начале файла будет подключен файл стилей jquery-ui:

А ближе к концу файла будет поключена библиотека jQuery и библиотека jQuery UI:

Как правило, чтобы воспользоваться возможностями jquery, нам нужно будет подключить эти три файла на нашу html-страницу. Их можно подключать как и из пакета, скачанного с официального сайта, так и из сетей CDN

Подключим библиотеку сначала из загруженного пакета. Для этого в распакованном пакете создадим следующую страницу html:

Здесь просто стандартный элемент ссылки заменяется на виджет button, и к нему добавляется обработчик нажатия. Сначала обязательно подключается основная библиотека jQuery, поскольку jQuery UI от нее зависит.

htmllab

JavaScript-библиотека jQuery UI помогает улучшать пользовательский интерфейс

jQuery UI — популярная JavaScript-библиотека для создания пользовательского интерфейса (UI — с англ. user interface) дизайнерами и разработчиками. Помогает создать на сайте дополнительные эффекты и виджеты (элементы управления — кнопки, диалоговые окошки и т.д.) Библиотека распространяется бесплатно и ее код является открытым для всех. Примеры выполненные при помощи библиотеки jQuery UI можно увидеть на странице http://jqueryui.com/demos/

jQuery UI и аналоги

Существует большое количество библиотек, помогающих вести разработку пользовательского интерфейса

jQuery UI Dialogs — Диалоговые окна

  • jQuery UI http://jqueryui.com
  • Sencha Ext JS https://www.sencha.com/products/extjs/
  • Bootstrap http://getbootstrap.com/
  • jQuery Mobile http://jquerymobile.com/
  • Zino UI Framework http://zinoui.com/
  • jQuery EasyUI http://www.jeasyui.com/index.php
  • jQWidjets http://www.jqwidgets.com/
  • Kendo UI http://www.telerik.com/kendo-ui

jQuery UI — библиотека, помогающая изменять интерфейс веб-страниц, реализовывать интерактив в веб-приложениях. Возможности библиотеки описываются четырьмя блоками: взаимодействия (Interactions), виджеты/элементы управления (Widgets), эффекты (Effects), утилиты (Utilities). Каждый из блоков содержит список возможных применений.

Взаимодействия (Interactions) jQuery UI

  • Draggable/Перемещаемость — перетаскивать HTML-элементы мышкой
  • Droppable/»Приземляемость» — назначить HTML-элемент, на который будет приземляться перетаскиваемый элемент
  • Resizable/Изменение размера — изменяет размер HTML-элемента при помощи мыши
  • Selectable/Выделяемость — использует мышь для выделения элемента или группы элементов
  • Sortable/Сортируемость — позволяет сортировать элементы на странице

Виджеты/элементы управления (W >

jQuery UI Tabs- Вкладки

  • Accordion/Аккордеон — набор схлопывающихся элементов
  • Autocomplete/Автозавершение — автодополнение ввода по первым символам
  • Button/Кнопка — кнопки на странице
  • Datepicker/Календарь — выбор даты из календаря
  • Dialog/Диалоговое окно — создание диалоговых окон
  • Menu/Меню — выпадающее меню
  • Progressbar/Индикатор загрузки — указание степени выполнения некоторого процесса
  • Selectmenu/Аналог HTML-элемента select — расширяет функциональность базового HTML-элемента
  • Sl >

Элемент управления jQuery UI Datepicker

Эффекты (Effects) jQuery UI

  • Add Class/Добавление класса — добавляет CSS-класс элементу
  • Color Animation/Анимация цвета — расширение анимации jQuery
  • Easing/Скорость анимации — изменение темпа анимации
  • Effect/Эффекты — анимационные эффекты
  • Hide/Сокрытие — сокрытие элемента с использованием анимационных эффектов
  • Remove Class/Удаление класса — Удаление CSS-класса
  • Show/Показ — появление элемента с использованием анимационных эффектов
  • Switch Class/Переключатель класса — поочередно включает один и второй классы
  • Toggle/Переключатель — поочередно отображает и прячет элемент с использованием анимационных эффектов
  • Toggle Class/Переключатель класса — поочередно добавляет и удаляет класс из элемента (в отличие от Switch Class работает с одним классом)

Утилиты (Utilities) jQuery UI

  • Position/Позиционирование — управление позиционированием элемента относительно документа, окна браузера, других элементов
  • Widget Factory/Фабрика виджетов — позволяет использовать все виджеты jQuery UI на странице

Загрузка и установка jQuery UI

Загрузить библиотеку можно с сайта разработчиков http://jqueryui.com/, со страницы http://jqueryui.com/download/ (предварительно выбрав набор нужных компонентов jQuery UI), CDN-хранилища сторонних сайтов (https://tech.yandex.ru/jslibs/, https://developers.google.com/speed/libraries/). В любом случае нужно прописать элементы link и script, чтобы были подключены стили библиотеки и ее JavaScript-код.

Оформление jQuery UI

Для оформления библиотеки можно использовать один из готовых наборов (тем) или сформировать свое оформление на странице оформителя тем (ThemeRoller). Созданная/скачанная тема будет представлять собой папку с CSS, которую будет нужно разместить рядом с основным кодом библиотеки. Не забудьте проверить адрес подключения новых стилей в link

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Топ-пост этого месяца:  Topsy Retweet Button - кнопка retweet
Добавить комментарий