jquery-ui — вопросы с ответами

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

jQuery быстро стал одной из самых популярных библиотек JavaScript, используемых сегодня, благодаря постоянно растущему диапазону распространенных виджетов пользовательского интерфейса, высокому уровню конфигурируемости и исключительной простоте реализации. Библиотека используется и поддерживается некоторыми очень известными брендами, такими как Microsoft, WordPress, Adobe и Intel.

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

Использование хост версий jQuery UI

Нам не нужно загружать библиотеку, чтобы внедрить ее в разрабатываемое веб-приложение. И jQuery, и jQuery UI размещаются в сетях доставки контента (CDN), предоставляемых Google, CDNJS, Microsoft и MediaTemple (которые предоставляют CDN для jQuery UI).

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

Структура библиотеки

Давайте на минутку посмотрим на структуру библиотеки, доступную после распаковки. Это поможет нам узнать, где искать конкретные утилиты и файлы. Откройте папку jqueryui, в которую распаковывается библиотека после установки. Содержимое этой папки должно быть следующим:

  • Папка css;
  • Папка development-bundle;
  • Папка js;
  • Файл index.html.

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

Однако, если вы используете библиотеку в качестве разработчика, мы бы рекомендовали вместо этого использовать папку development-bundle; она содержит тот же код, что и отдельные исходные файлы, но в несжатом формате.

Детальное изучение структуры папок

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

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

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

Папка js содержит минимизированные версии jQuery и полную библиотеку jQuery UI со всеми компонентами, объединенными в один файл. В действующем проекте, это папки js и css, которые мы хотим добавить на наш сайт.

Index представляет собой HTML-файл, который дает краткое введение в библиотеку и отображает все виджеты вместе с некоторыми классами CSS. Development-bundle содержит ряд ресурсов, которые помогут нам в работе с библиотекой. Он состоит из следующих подкаталогов:

  • Папка demos;
  • Папка docs;
  • Папка external;
  • Папка themes;
  • Папка ui.

На следующем скриншоте показано, как должна выглядеть структура папок:

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

Папка demos содержит серию основных примеров, показывающих все различные компоненты в действии. Папка docs содержит документы API для каждого из различных компонентов.

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

  • Плагин globalize;
  • Плагин jshint;
  • Плагин mousewheel;
  • Пакет модульного тестирования qunit (состоящий из файла JavaScript и CSS).

Плагин globalize обеспечивает поддержку локализации для jQuery и может использоваться для форматирования строк, дат и чисел в более чем 350 культурах. Плагин jshint, производный от плагина jslint, представляет собой инструмент для обнаружения ошибок и потенциальных проблем в коде JavaScript при одновременном применении ваших собственных соглашений о кодировании. Плагин mousewheel, разработанный Брэндоном Аароном, добавляет кросс-браузерную поддержку колесика мыши для вашего веб-сайта или онлайн-приложения. Фреймворк QUnit – это пакетный модуль jQuery, который мы можем использовать для запуска модульных тестов на любом созданном нами коде.

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

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

API

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

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

  • Метод плагинов. Этот метод используется для инициализации компонента и представляет собой просто имя компонента, за которым следуют скобки;
  • Методы общего API. Метод destroy может использоваться с любым из компонентов, чтобы полностью отключить используемый виджет, и в большинстве случаев возвращает исходный HTML-код в исходное состояние. Метод option используется всеми компонентами для получения или установки любого параметра конфигурации после инициализации. Методы enable и disable используются большинством компонентов библиотеки для включения или отключения компонента. Метод widget, предоставляемый всеми виджетами, возвращает ссылку на текущий виджет;
  • Специализированные методы. Каждый компонент имеет один или несколько методов, уникальных для этого конкретного компонента, которые выполняют специализированные функции.

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

Например, чтобы вызвать метод destroy компонента accordion, мы просто использовали бы следующий код:

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

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

Метод disable, когда он используется вместе с виджетом вкладок, принимает целое число, которое ссылается на индекс отдельной вкладки в виджете. Аналогично, чтобы снова включить вкладку, мы бы использовали метод enable, как показано в следующем коде:

События и обратные вызовы

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

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

Имя события используется в качестве имени option, а анонимная функция используется в качестве значения option.

Другой способ работы с событиями – использование метода jQuery on(). Чтобы использовать события таким образом, мы просто указываем имя компонента, за которым следует имя события:

Обычно, но не всегда, функции обратного вызова, используемые с методом on(), выполняются после того, как событие было инициировано, в то время как обратные вызовы, указанные с помощью параметров конфигурации, выполняются непосредственно до того, как событие было запущено. Функции обратного вызова вызываются в контексте элемента DOME, который вызвал событие. Например, в виджете вкладок с несколькими вкладками событие select будет вызвано выбранной вкладкой, а не виджетом вкладок в целом. Это чрезвычайно полезно для разработчиков, поскольку позволяет связать событие с определенной вкладкой.

7 ответов
Я использовал диалог JQuery UI, и у него была опция open, где вы можете указать код Javascript для выполнения после открытия диалога. Я бы использовал эту опцию для выбора текста в диалоговом окне с помощью функции, которую у меня есть. Теперь я хочу сделать это, используя bootstrap modal. Ниже прив...
04 июль 2013, в 05:53
3 ответа
У меня есть некоторые текстовые поля ввода на моей странице, я показываю их значения, используя функцию javascript setVal для редактирования, я добавил дополнительное поле флажка, я передал значение, Здесь я хочу проверить, что если value == 1, тогда этот флажок должен быть отмечен в противном случа...
02 июль 2013, в 09:16
10 ответов
Мне удалось получить некоторые подсказки для работы, наконец, с помощью следующего кода: <a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> а затем <script> $('[rel=tooltip]').tooltip(); </script> Проблема, с которой я сталкиваюсь, заключается в том...
05 дек. 2012, в 19:17
9 ответов
У меня есть две кнопки-переключателя при изменении события. Я хочу изменить кнопку. Как это возможно? Мой код <input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot <input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer скрипт <s...
31 окт. 2012, в 06:57
6 ответов
Я пытаюсь работать над созданием дерева (например, дерева каталогов), которое использует как можно больше CSS и как можно меньше JS (только для состояний и т.д.), и я хочу знать, есть ли какое-то хорошее существующее дерево плагины для bootstrap или jquery-ui bootstrap. Для справки или для людей, см...
23 июнь 2012, в 08:59
4 ответа
Я использую jQuery UI для некоторых основных улучшений страницы. Кнопка и стиль ввода и модальные диалоговые окна. Теперь я столкнулся с Bootstrap, и это выглядит неплохо. Есть ли у кого-нибудь опыт перехода от jQuery UI к Bootstrap? Это то, что я собираюсь сделать, но прежде чем я это сделаю, я хот...
20 март 2012, в 05:20
20 ответов
Как изменить текстовое значение кнопки в jQuery? В настоящее время моя кнопка имеет "Добавить" в качестве ее текстового значения, и после нажатия на нее я хочу, чтобы она изменилась на "Сохранить". Я пробовал этот метод ниже, но до сих пор без успеха: $("#btnAddProfile").attr('value', 'Save'); ...
07 апр. 2011, в 12:39
5 ответов
У меня есть форма с двумя кнопками <a href="index.html"><button>Cancel changes</button></a> <button type="submit">Submit</button> Я использую кнопку JQuery UI на них, просто как это $('button').button(); Однако первая кнопка также отправляет форму. Я бы подумал...
23 июль 2010, в 03:22
15 ответов
Я могу установить переключатель правильно, но я хочу настроить своего рода "прослушиватель", который активируется при проверке определенного переключателя. Возьмите, например, следующий код: $("#element").click(function() { $('#radio_button').attr("checked", "checked"); }); он добавляет пров...
16 фев. 2010, в 12:29
27 ответов
Я использую jQuery date picker, чтобы отображать календарь по всему моему приложению. Я хочу знать, могу ли я использовать его для отображения месяца и года (май 2010 г.), а не календаря?
date
jquery-ui-datepicker
05 фев. 2010, в 16:18
25 ответов
Я использую UI DatePicker из jQuery UI в качестве отдельного сборщика. У меня есть этот код: <div id="datepicker"></div> И следующий JS: $('#datepicker').datepicker(); Когда я пытаюсь вернуть значение с помощью этого кода: var date = $('#datepicker').datepicker('getDate'); Я вернусь: ...
date
jquery-ui-datepicker
25 авг. 2009, в 12:18
20 ответов
Как удалить кнопку закрытия ( X в верхнем правом углу) в диалоговом окне, созданном jQuery UI?
jquery-ui-dialog
22 май 2009, в 08:39
6 ответов
Я планирую использовать Google для загрузки библиотеки jQuery для UI и Core. Мой вопрос в том, разрешают ли мне загрузить CSS для него или я должен сам его разместить? Также, если я использую Google для загрузки, как мне загрузить другие плагины? Могу ли я сжимать все плагины вместе или это отдельны...
04 май 2009, в 15:37
17 ответов
У меня есть диалоговое окно jQuery UI, отлично работающее на моей странице ASP.NET: jQuery(function() { jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight:...
16 апр. 2009, в 16:58
13 ответов
Как я могу отделить div от спящего до расширенного (и наоборот), но делать это справа налево? Большинство всего, что я вижу, всегда слева направо.
position
27 фев. 2009, в 21:20
Наверх
Меню