Урок 5. Библиотека jQuery UI (User Interface). Виджет Datepicker

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

Как сделать календарь с помощью jQuery UI

Для ввода даты в поле на сайте было бы удобно использовать календарь. Писать свой календарь на JavaScript было бы трудоемко и не разумно. Гораздо проще использовать уже готовое решение. В этой статье я и расскажу как сделать jQuery календарь быстро и с минимумом кода.

Для создания календаря нам понадобится:

  1. Библиотека jQuery, которую можно скачать к себе на сайт, либо подключить, например, c Google CDN В этой статье я использовал версию 2.2.4.
  2. Библиотека jQuery UI. Можете скачать полный набор, как предлагается по-умолчанию на странице, либо выбрать лишь нужные компоненты, в частности, нам нужен компонент Datepicker. Еще можно выбрать тему отличную от стандартной. Кроме того, библиотеку так же можно подключить с Google CDN
  3. Чтобы сделать календарь jQuery русским нам понадобится файл datepicker-ru.js который можно взять на GitHub или можете скачать готовый файл с нашего сайта.

Теперь всё необходимое есть, приведу код создания календаря Datepicker с помощью JQuery UI

Обратите внимание : файл русского языка datepicker-ru.js нужно подключать после jquery-ui.min.js

Исходник примера со всеми необходимыми файлами можете скачать с нашего сайта.

В результате, на экране мы увидим поле для ввода даты и при клике в это поле появляется календарь. Для стандартной темы оформления это выглядит так:

Datepicker обладает различными настройками и имеет несколько методов. Настройку календаря jQuery UI можно сделать 3 способами: либо перед инициализацией, во время или после инициализации.

Например, сделать чтобы месяц и год выбирались из выпадающего списка (указание опций до инициализации Datepicker):

Следующий пример: отобразить кнопку-картинку рядом с полем для ввода даты по нажатии на которую происходит открытие календаря (указание опций во время инициализации Datepicker)

Показать под календарем доп.панель кнопок (указание опций после инициализации Datepicker).

Посмотреть все опции и методы, которые есть у виджета Datepicker можно на сайте библиотеки jQuery UI.

Урок 5. Библиотека jQuery UI (User Interface). Виджет Datepicker

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

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

Установка и подключение

Перед непосредственным использованием необходимо скачать jQuery UI (http://jqueryui.com/download) . Предположим, мы скачали бибилиотеку, и разместили ее в папку js/jquery-ui-1.8.17.custom. Теперь нужно сделать следующие включения (желательно в ) в таком порядке:

Если нужен язык, отличный от английского, вставляем ссылку на скрипт локализации:

Где скачать файлы локализации?

Нужный вам файл локализации можно скачать с SVN репозитория. Для начала перейдите по ссылке http://jquery-ui.googlecode.com/svn/tags/, зайдите в подпапку соответствующую вашей версии плагина DatePicker (в нашем примере это 1.8.17), далее в папку «ui», а в ней в подпапку «i18n». Вот тут то и выбираем нужный файл локализации. Таким образом, полная ссылка на файл русской локализации использованный в нашем примере можно скачать тут: http://jquery-ui.googlecode.com/svn/tags/1.8.17/ui/i18n/jquery.ui.datepicker-ru.js.

Привязка к текстовому полю

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

Если необходимо просто прикрутить стандартный datepicker к одному полю, то делаем это так:

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

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

Согласование двух дат

Теперь хочу остановиться на одном интересном и часто используемом варианте использования datepicker, а именно когда надо обпеспечить то, что выбрав две даты, одна из них будет точно меньше другой. Это может понадобится , например, в форме бронирования номера в отеле, где пользователь выбирает дату заезда и дату выезда. Само собой, что первая дата должна быть раньше, или по крайней мере совпадать со второй. Делается это так:

Как вы наверно догадались, #date_from, #date_to — это ID полей соответствующих меньшей и большей дате соответственно.

Также обратите внимание на ID date_from в функции, привязанной к событию onSelect — это ID меньшей даты. Если внимательно посмотрите скрипт, то поймете зачем это нужно. Хотя вам достаточно полностью скопировать этот скрипт, заменить элементы, выделенные жирным, на свои ID, и все заработает!

JQuery UI виджетов с помощью расширения библиотеки виджетов

JQuery UI виджет библиотеки (Widget Factory) облегчает создавать виджеты, эти виджеты расширяет функциональные возможности существующих виджетов. Таким образом, вы можете создать на основе существующих мощных виджетов, вы можете также сделать точную настройку на существующей функции виджета.

Примечание: Прежде чем изучать эту главу, вы должны понимать , что виджет библиотеки (Widget Factory), и как она работает. Если вы не знакомы с этим знанием, поэтому , пожалуйста , рассмотреть , как использовать библиотеку частей (Widget Factory) раздел.

Создать расширение виджета

Создание виджета с помощью виджетов библиотеки (Widget Factory) до $.widget() передается имя виджета и объекта — прототипа для завершения. Ниже приведен пример, чтобы создать «superDialog» виджет в «Custom» пространства имен.

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

Как и выше, например, следующие должны также создать «superDialog» виджет в «Custom» пространства имен. Но эта передача диалог (диалог) виджет JQuery UI в конструктор ( $.ui.dialog ), представляет собой superDialog виджет должен использовать диалог (диалог) виджет JQuery UI в качестве родительского элемента.

Здесь superDialog два диалоговых виджетов по существу эквивалентны, просто другое имя и пространство имен только. Для того, чтобы новый виджет больше возможностей, мы можем добавить некоторые методы к своему объекту прототипа.

Виджет прототип объекта передается в $.widget() последний аргумент. До сих пор, наш пример использует объект нулевой. Теперь давайте добавим метод к объекту:

Теперь superDialog имеют red() метод, который изменит свой цвет текста красный. Обратите внимание , что библиотеки — члены (Widget Factory) как автоматически установить this в качестве виджета объекта экземпляра. Для получения списка всех свойств и методов , доступных на экземпляре, посещают библиотеки — члены (Widget Factory) документацию по API .

Расширение существующих методов

Иногда вам нужно настроить поведение существующего компонента или добавления методов. Вы можете указать имя имя метода метода на прототипе объекта необходимо перезагрузить. Следующий пример отменяет диалог (диалог) в open() метод . Поскольку диалоговое окно по умолчанию включена, при запуске этого кода, «open» он будет записан.

При выполнении этого кода, есть проблема. Так как мы не перегружена open() поведение по умолчанию, поэтому диалог (диалог) больше не отображается на экране.

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

Для того , чтобы родитель методы сборки доступны, член библиотеки (Widget Factory) предоставляет два метода — _super() и _superApply() .

Используйте _super() и _superApply() , чтобы получить доступ к родительский элемент

_super() и _superApply() вызовы таким же образом , что и родительский компонент. Рассмотрим следующие примеры. Как и в прошлом , например, которые перегруженного open() метод для записи «open» . Тем не менее, этот запуск _super() вызывается диалог (диалог) из open() и в диалоговом окне Открыть.

_super() и _superApply() практически идентично оригинальному Function.prototype.call() и Function.prototype.apply() метод. Поэтому _super() принимает список параметров, _superApply() принимает массив в качестве параметра. Следующий пример демонстрирует, что разные между ними.

Пересмотрите виджет

JQuery UI 1.9 добавлен переопределить функцию виджета. Таким образом, вы не можете создать новый виджет, нам нужно только передать $.widget() , так что имя существующего виджета и конструктора. Следующие примерах из open() , чтобы добавить ту же запись, но не путем создания нового виджета , чтобы закончить.

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

Виджеты (Widgets) и полиморфизм (полиморфизм)

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

Примеры выше, родительский член плагина, dialog() , вы не можете назвать superDialog элементы на close() метод. Для получения дополнительной информации вызовите метод виджета, см вызова метода виджета (Widget) .

Примеры пользовательских персонализированные

До сих пор мы видели экземпляры методов расширения виджетов прототипа. На прототипе перегруженный метод влияет на все экземпляры виджета.

Чтобы проиллюстрировать этот момент, рассмотрим следующие примеры. диалог (диалог) две силы используют один и тот же open() метод.

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

Перегруженные Техническая персонализация является прекрасным примером одноразовой настройки в.

Фабрика виджетов 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:

Применение виджета Datepicker в Drupal 7

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

Что такое Datepicker, это виджет Jquery, который производит вставку даты в поле («input»), для его работы так же необходима библиотека Jquey UI (данную библиотеку мы будем затрагивать ещё не раз, так как она позволяет создавать различные динамические плюшки на сайте, ведь не зря сокращение UI –означает User Interface).

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

Идём по пути « Структура->Типы материалов->Добавить тип материала»

Вводим название типа и сохраняем. У меня он называется « test_type_content». Теперь создадим дополнительное поле для данного типа материала, переходим по пути « Структура->Типы материалов» из списка выбираем наш только что созданный тип материала и кликаем по пункту « Управление полями»

И создаем новое поле:

Жмём сохранить и вводим максимальную длину 12 символов, для даты нам этого будет достаточно.

Далее сохранить настройки поля. Теперь вы можете ввести дополнительные параметры для этого поля, такие как - будет ли оно обязательным, значение по умолчанию и т.д. , я всё оставлю как есть, для примера этого будет достаточно, поэтому жмём « Сохранить настройки».

Теперь давайте сделаем доступным данный тип материалов для всех пользователей, как для зарегистрированных, так и для анонимов. Для этого переходим по пути « Пользователи -> во вкладку Права доступа» и поставим галочки напротив создания и редактирования у нашего типа материалов.

Далее жмём « Сохранить права доступа», на этом наши первоначальные настройки закончены и начинается самое интересное.

Теперь нам необходимо скачать библиотеки Jquery и Jquery UI. Если с библиотекой Jquery вопросов никаких не возникает, то вот над Jquery UI ещё стоит подумать, так как в полном своём содержании она весит примерно около 2mb, что для медленного соединения с интернетом её подгрузка на страницу будет не простительно долгой. Поэтому имеет смысл повыкидывать из неё всё лишнее (а в данном случае лишнего там очень много) и оставить только наш виджет. К счастью это всё можно сделать ещё до загрузки самой библиотеки на официальном сайте. Поэтому переходим по ссылке и деактивируем плагины « Interactions» и « Effects».

В пункте « Theme» можно выбрать любую тему оформления по умолчанию, после всех манипуляций – скачиваем библиотеку.

Перед нами два файл, в 1м – Jquery, во 2м – архив Jquery UI со множеством файлов, из него нам нужно только сама библиотека, стили CSS. И всё это дело нам необходимо подключить к шаблону Drupal. Как правильно подключать скрипты и стили в Drupal можно прочитать здесь, я на этом останавливаться не буду. Копируем библиотеки Jquery и Jquery UI в папку JS нашего шаблона, стили так же копируем в паку CSS и подключаем всё это дело через

Так же необходимо учитывать, что при вызове функции Jquery в Drupal – необходимо использовать « noconflict», иначе ваши скрипты просто не будут работать, как это сделать читаем вот здесь, на этом так же не останавливаемся. Пересохраняем наши настройки в разделе « Оформление», что бы подцепились все новые скрипты и стили. И теперь нам просто нужно вызвать функцию на нашем поле ввода даты, для этого создадим новый текстовый документ с названием, например date.js внутри которого прописываем следующий код:

Ваши индентификаторы поля могут отличаться от моего, поэтому необходимо посмотреть >firebug:

И так же подключаем его через

Опять пересохряняем настройки шаблона и смотрим, что у нас получилось:

Как мы видим, всё работает как нужно! У данного виджета имеется масса опций, например нам нужно локализовать его на русский язык, для этого необходимо сбросить настройки по умолчанию и присвоить ему новые параметры, а так же необходимо подключить файл с русским языком. Для этого в вашем архиве с Jquery UI , есть ещё папка под названием « development -bundle» - в ней хранятся всевозможные опции виджетов. Идём по пути « development –bundle -> ui -> i18n -> выбираем файл с нужным языком»

Так же копируем его в папку js нашего шаблона и подключаем его к страницам нашего сайта через:

Теперь необходимо переписать наш скрипт вызова datepicker, выглядить будет он вот так:

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

Как видим, русский язык у нас появился. Принцип работы данного виджета надеюсь понятен. Полный список опций можно найти на официальном ресурсе, где так же расписан синтаксис для каждой опции, не забываем только про « noConflict», что бы ваши старания не прошли даром.

jQuery и другое…

css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты

jQuery UI – виджет Datepicker

jQuery UI – надстройка над JavaScript-библиотекой jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. Сегодня мы познакомимся с виджетом Datepicker.

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

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component , чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Datepicker и чекбокс UI Core.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Можно испытать пример как есть, но интереснее создать свою HTML-страничку, где сначала в разделе HEAD подключить несколько файлов, которые есть в архиве.

Сначала мы подключили файл стилей одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки и файл, в котором заключена функциональность UI Core и виджета Datepicker. И наконец, последний файл обеспечивает локализацию виджета для нужного языка. Найти его можно в полученном архиве, в папке /development-bundle/ui/i18n

Из разметки потребуется минимум – просто элемент input:

Кстати, если Вы хотите, чтобы календарь не появлялся по щелчку в элементе input, а был всегда виден – просто используйте обычный элемент div:

Связываем виджет Datepicker с нашей HTML-разметкой:

Отлично! С настройками по умолчанию все понятно, но нам хотелось бы иметь календарь на русском языке (или, к примеру, на украинском). Давайте это сделаем:

Приведенный в примере код обеспечит поддержку русского языка, а если Вы замените ru на uk (интересно, почему не на ua?) то получите календарь уже на украинском языке.

Но вероятно Вам понадобится изменить какие-то настройки, чтобы использовать Datepicker для решения своих задач. Давайте попробуем это сделать.

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

altField – jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat.

altFormat – формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может использоваться другой формат. Полный список возможных форматов можно найти на
http://docs.jquery.com/UI/Datepicker/formatDate

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

buttonImage – адрес картинки, которая будет отображаться на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки.

buttonImageOnly – если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе.

buttonText – текст, отображающийся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’.

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

changeYear – если в этой опции передать значение true, будет возможно выбирать год из выпадающего списка.

closeText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

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

currentText – эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опция currentText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

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

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

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

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

defaultDate – устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.

duration – длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки – ‘fast’, ‘normal’ (по умолчанию), ’slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации.

firstDay – опция устанавливает первый день недели: воскресенье – 0, понедельник – 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.

gotoCurrent – если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.

hideIfNoPrevNext – если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.

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

maxDate – устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.

minDate – устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.

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

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

navigationAsDateFormat – по умолчанию опция имеет значение false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев.

nextText – текст, который отображается в качестве ссылки на следующий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.

numberOfMonths – эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение [2, 3] отобразит календарь в две строки по три месяца.

prevText – текст, который отображается в качестве ссылки на предыдущий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.

shortYearCutoff – значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.

showAnim – определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ’slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ’slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.

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

showCurrentAsPos – когда используется отображение сразу нескольких месяцев, число, переданное в этой опции, определяет позицию текущего месяца. По умолчанию используется значение 0, и текущий месяц отображается в верхнем левом углу.

showMonthAfterYear – по умолчанию используется значение false и в заголовке название месяца идет перед годом. При использовании значения true название месяца будет следовать за годом.

showOn – по умолчанию эта опция имеет значение ‘focus’, что заставляет календарь открываться при щелчке в поле ввода. Другие возможные значения – ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, таки при получении фокуса полем ввода.

showOptions – если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: .

showOtherMonths – по умолчанию имеет значение false. Если использовать true, на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора.

stepMonths – определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.

yearRange – управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear). По умолчанию используется значение ‘-10:+10′ относительно текущего года. Возможно использование и абсолютного формата, например ‘1980:2025′.

Перейдем к знакомству с событиями виджета Datepicker:

В примере мы передаем виджету сразу три опции, в которых определены callback-функции. В опции beforeShow определена функция, которая будет вызвана перед отображением календаря. С помощью css-свойства background-color, эта функция установит желтый цвет фона для элемента input. В опции onSelect определена функция, которая будет вызвана в момент выбора какой-либо даты в календаре и передаст пустое значение css-свойству background-color, возвратив его в начальное состояние. И, наконец, в опции onClose определена функция, которая вызывается при закрытии календаря, если никакое значение выбрано не было. Она тоже вернет css-свойство background-color в его начальное состояние.

Но, обратите внимание, все callback-функции принимают некоторые аргументы. С ними стоит познакомиться немного подробнее.

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

В опции onSelect функция принимает два аргумента. Первый аргумент dateText – строка, представляющая собой тот текст, который появится и в элементе input. Второй аргумент – объект datepicker. В том же примере показано, как можно обратиться к некоторым из свойств этого объекта.

Функция, определенная в опции onClose принимает те же два аргумента, что и функция из опции onSelect.

И еще одно важное обстоятельство для callback-функций, определенных в опциях onSelect и onClose – в контексте этих функций ссылка this указывает на объект, характеризующий элемент input.

Ниже приведены описания всех возможных событий для виджета Datepicker.

beforeShow – здесь можно определить функцию, которая будет вызываться перед открытием календаря. Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода с которым работает виджет.

beforeShowDay – в этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом [0] – true или false показывает, возможен или нет выбор этой даты. Элемент с индексом [1] содержит имя класса (классов) для отображения даты. Элемент с индексом [2] (опционально) – текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши.

onChangeMonthYear – здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента – это новые значения года и месяца, третий аргумент – объект datepicker.

onClose – в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.

onSelect – в этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата.

Теперь можно поговорить о методах виджета Datepicker. Давайте добавим в наш HTML-код обыкновенную ссылку:

и используем вот такой javascript-код:

В приведенном примере мы демонстрирует работу метода dialog. Мы вызываем этот метод при щелчке на ссылке Открыть в диалоге. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. Остальные три аргумента необязательные, но мы познакомимся и с ними. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне. И, наконец, последний аргумент pos – здесь можно задать координаты, в которых будет появляться календарь. Координаты можно задавать числами, но если передать в функцию, вызываемую по щелчку на ссылке объект event, то можно будет определить координаты, используя свойства объекта event. Например, использовать event.clientX и event.clientY.

Далее приведены описания всех методов виджета Datepicker.

destroy – .datepicker(‘destroy’) полностью удаляет всю функциональность виджета Datepicker. Возвращает элементы в состояние, предшествующее инициализации.

disable – .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.

enable – .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.

option – .datepicker(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.

dialog – .datepicker(‘dialog’, dateText, [onSelect], [settings], [pos]) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.

isDisabled – .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.

hide – .datepicker(‘hide’, [speed]) скрывает ранее открытый календарь.

show – .datepicker(’show’) открывает календарь.

getDate – .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.

setDate – .datepicker(’setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть число, определяющее количество дней от текущей даты (например: +7 или -14) или строка, определяющая период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’). Значение null установит текущую дату.

Вот и все. Разве что сказать, что для управления календарем можно использовать горячие клавиши:
- page up/down – предыдущий/следующий месяц;
- ctrl+page up/down – предыдущий/следующий год;
-ctrl+home – выбор текущего месяца или открытие календаря после того как он был закрыт;
- ctrl+left/right – предыдущий/следующий день;
- ctrl+up/down – предыдущая/следующая неделя;
- enter – выбор отмеченной даты;
- ctrl+end – закрытие и удаление даты из поля ввода;
- escape – закрытие календаря без выбора даты;

Создаем плагин 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
Просмотров: 34290
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

JavaScript UI библиотека,
которая помогает ускорить
веб-разработку

99 UI виджетов и функциональных CSS / HTML5 JavaScript контролов

Создавайте красивые интерфейсы приложений несколькими строками кода

Кликайте по цифрам, чтобы посмотреть код

100 Графических виджетов и JavaScript контролов

Размещение и разметка

Управление и ввод данных

Дополнительные компоненты: комплексные JavaScript виджеты

JavaScript Pivot предназначен для красивых и понятных отчетов в виде таблиц и диаграмм.

  • счетчики суммы, фильтры, режим readonly
  • поддержка загрузки внутренних и внешних данных
  • таблица / диаграмма и окно с настройками
  • логарифмическая шкала для Pivot Chart

Больше о Pivot

JavaScript Kanban Board -- это инструмент для отображения процесса работы и контроля за отдельными задачами.

  • неограниченное количество столбцов и строк
  • настройка с помощью HTML шаблонов
  • возможность добавлять swim lane для группировки процессов или задач
  • возможность открывать или сворачивать панели Канбан-доски

Больше о Kanban

JavaScript Spreadsheet -- это комплексный виджет, позволяющий встраивать Excel-таблицы в веб-приложения и работать с данными online.

  • привязка данных и валидация
  • сортировка и фильтрация
  • пользовательские стили
  • математические функции

Больше о Spreadsheet

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

  • копирование/вставка, переименование, удаление файлов и папок
  • работа с иерархическими данными
  • гибкий layout
  • функциональность drag-and-drop

Больше о File Manager

JavaScript Mobile Scheduler -- это полнофункциональный инструмент для отображения, создания и управления событиями в трех режимах - день, неделя, месяц - на всех мобильных устройствах.

  • поддержка многодневных и повторяющихся событий
  • выбор нужного языка, формата времени и региона
  • настройка формата дат, элементов и панелей инструментов
  • подходит для всех операционных систем: iOS, Android, Windows Phone, Blackberry и т.д.

Больше о Mobile Scheduler

Создавайте красивые приложения с нашей JS библиотекой

Преимущества библиотеки UI Webix

Используя Webix JS фреймворк, вы получаете элегантный и легкий код, основанный на принципах объектно-ориентированного программирования.

Интеграция с другими JavaScript фреймворками и библиотеками

Создавайте проекты с JavaScript библиотекой jQuery, MVC фреймворками AngularJS, React, Vue.js, Backbone.js, и сторонними UI компонентами.

Быстрая работа с большими данными

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

Поддержка различных платформ и браузеров

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

Полностью клиентское решение для дашбордов с анимацией и интерактивностью благодаря мгновенному обновлению данных в HTML5 компонентах.

Общедоступность информации Web-страниц

HTML5 библиотека UI компонентов соответствует стандартам WAI-ARIA и обеспечивает поддержку общедоступности информации для тех, кто нуждается во вспомогательных технологиях.

Простая интеграция с серверной стороной

Все серверные технологии могут обмениваться данными с нашим JavaScript UI фреймворком, который включает готовые решения для интеграции с Java, PHP и .NET.

Неограниченная возможность модифицировать компоненты

Изменяйте доступные компоненты и создавайте новые — вы можете изменять все параметры компонентов без потери функциональности.

Применение виджета Datepicker в Drupal 7

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

Что такое Datepicker, это виджет Jquery, который производит вставку даты в поле («input»), для его работы так же необходима библиотека Jquey UI (данную библиотеку мы будем затрагивать ещё не раз, так как она позволяет создавать различные динамические плюшки на сайте, ведь не зря сокращение UI –означает User Interface).

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

Идём по пути « Структура->Типы материалов->Добавить тип материала»

Вводим название типа и сохраняем. У меня он называется « test_type_content». Теперь создадим дополнительное поле для данного типа материала, переходим по пути « Структура->Типы материалов» из списка выбираем наш только что созданный тип материала и кликаем по пункту « Управление полями»

И создаем новое поле:

Жмём сохранить и вводим максимальную длину 12 символов, для даты нам этого будет достаточно.

Далее сохранить настройки поля. Теперь вы можете ввести дополнительные параметры для этого поля, такие как - будет ли оно обязательным, значение по умолчанию и т.д. , я всё оставлю как есть, для примера этого будет достаточно, поэтому жмём « Сохранить настройки».

Теперь давайте сделаем доступным данный тип материалов для всех пользователей, как для зарегистрированных, так и для анонимов. Для этого переходим по пути « Пользователи -> во вкладку Права доступа» и поставим галочки напротив создания и редактирования у нашего типа материалов.

Далее жмём « Сохранить права доступа», на этом наши первоначальные настройки закончены и начинается самое интересное.

Теперь нам необходимо скачать библиотеки Jquery и Jquery UI. Если с библиотекой Jquery вопросов никаких не возникает, то вот над Jquery UI ещё стоит подумать, так как в полном своём содержании она весит примерно около 2mb, что для медленного соединения с интернетом её подгрузка на страницу будет не простительно долгой. Поэтому имеет смысл повыкидывать из неё всё лишнее (а в данном случае лишнего там очень много) и оставить только наш виджет. К счастью это всё можно сделать ещё до загрузки самой библиотеки на официальном сайте. Поэтому переходим по ссылке и деактивируем плагины « Interactions» и « Effects».

В пункте « Theme» можно выбрать любую тему оформления по умолчанию, после всех манипуляций – скачиваем библиотеку.

Перед нами два файл, в 1м – Jquery, во 2м – архив Jquery UI со множеством файлов, из него нам нужно только сама библиотека, стили CSS. И всё это дело нам необходимо подключить к шаблону Drupal. Как правильно подключать скрипты и стили в Drupal можно прочитать здесь, я на этом останавливаться не буду. Копируем библиотеки Jquery и Jquery UI в папку JS нашего шаблона, стили так же копируем в паку CSS и подключаем всё это дело через

Так же необходимо учитывать, что при вызове функции Jquery в Drupal – необходимо использовать « noconflict», иначе ваши скрипты просто не будут работать, как это сделать читаем вот здесь, на этом так же не останавливаемся. Пересохраняем наши настройки в разделе « Оформление», что бы подцепились все новые скрипты и стили. И теперь нам просто нужно вызвать функцию на нашем поле ввода даты, для этого создадим новый текстовый документ с названием, например date.js внутри которого прописываем следующий код:

Ваши индентификаторы поля могут отличаться от моего, поэтому необходимо посмотреть >firebug:

И так же подключаем его через

Опять пересохряняем настройки шаблона и смотрим, что у нас получилось:

Как мы видим, всё работает как нужно! У данного виджета имеется масса опций, например нам нужно локализовать его на русский язык, для этого необходимо сбросить настройки по умолчанию и присвоить ему новые параметры, а так же необходимо подключить файл с русским языком. Для этого в вашем архиве с Jquery UI , есть ещё папка под названием « development -bundle» - в ней хранятся всевозможные опции виджетов. Идём по пути « development –bundle -> ui -> i18n -> выбираем файл с нужным языком»

Так же копируем его в папку js нашего шаблона и подключаем его к страницам нашего сайта через:

Теперь необходимо переписать наш скрипт вызова datepicker, выглядить будет он вот так:

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

Как видим, русский язык у нас появился. Принцип работы данного виджета надеюсь понятен. Полный список опций можно найти на официальном ресурсе, где так же расписан синтаксис для каждой опции, не забываем только про « noConflict», что бы ваши старания не прошли даром.

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

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

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

Топ-пост этого месяца:  Как обезопасить виртуальный бизнес от реальных проблем
Добавить комментарий