Jquery ui подключение. Подключение jquery через Google или Microsoft. Создание своих плагинов
jQuery UI представляет собой группу плагинов jQuery облегчающих создание интерфейса веб-приложений.
$(document).ready(function(){ $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $("#datepicker").datepicker({ monthNames: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август", "Сентябрь","Октябрь","Ноябрь","Декабрь"], dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]}); });
Подключение jQuery UIДля того, чтобы воспользоваться возможностями плагинов jQuery UI их необходимо вначале подключить к странице, на которой они будут использоваться.
Существуют два варианта подключения jQuery UI:
Локальное подключение jQuery UIНа официальном сайте Вы можете или скачать стандартную комплектацию jQuery UI или собрать свою собственную .
Стандартная комплектация jQuery UI включает в себя все существующие плагины и имеет стандартную тему оформления. Для того, чтобы скачать стандартную комплектацию просто перейдите на сайт jQuery UI и нажмите кнопку Download .
Если Вы хотите собрать собственную комплектацию jQuery UI Вам необходимо перейти на сайт jQuery UI и выполнить шаги перечисленные ниже (пропустите эти шаги если Вы скачали стандартную комплектацию ):
Шаг 1: Выбрать необходимые компонентыПо умолчанию в файл для скачивания включены все существующие плагины. Если какие-то из них не нужны Вы можете убрать галочку напротив их названия и сократить тем самым размер итогового файла (стандартная комплектация jQuery UI имеет размер ~1мб ).
Обратите внимание: размер файла библиотеки влияет на скорость загрузки страницы, поэтому меньший размер всегда предпочтителен.
Шаг 2: Выбрать оформлениеВыберите одну из стандартных тем оформления плагинов jQuery UI в поле Theme или создайте свою тему с помощью themeroller"а.
Шаг 3: Выбрать версиюВыберите версию jQuery UI в поле Version.
Шаг 4: Скачать jQuery UIНажмите кнопку Download и сохраните файл в удобное для Вас место на жестком диске.
Теперь (вне зависимости скачали ли Вы стандартную комплектацию или собрали свою собственную ) необходимо подключить jQuery UI к скрипту. Для этого необходимо распаковать скаченный файл и указать пути к файлам jquery-ui-версия.custom.css и jquery-ui-версия.custom.min.js в секции head скрипта.
Синтаксис:
Удаленное подключение jQuery UI
В этом варианте подключения Вы не можете настраивать комплектацию jQuery UI и можете использовать только ее стандартную версию.
Для того, чтобы подключить библиотеку удаленно необходимо добавить следующие строчки в секцию head Вашей страницы:
Синтаксис:
Сделайте сами
Задание 1 подключите библиотеку jQuery UI удаленно для того, чтобы код из упражнения заработал.
- В подключении jquery
все просто. Есть 2 варианта:
- Для работы оффлайн – скачать сам файл с библиотекой jQuery и подключить его
- Для работы онлайн – быстро одной строчкой кода подключить jQuery из хранилища Google или Microsoft
У каждого варианта свои плюсы и минусы. Давайте рассмотрим их подробнее.
Подключение jquery через Google или MicrosoftЧтобы подключить последнюю версию jquery через Google нужно добавить одну строку кода внутри
– все предельно быстро и удобно:
Для подключения точной версии (в данном случае 1.11.0):
Точный номер последней версии всегда можно посмотреть , а затем просто поменять эти цифры в коде и все будет работать.
Для подключения jquery через Microsoft добавляем код:
Подключение с Google хорошо тем, что многие сайты одинаково подключают jQuery – именно через Google API и всегда есть высокая вероятность того, что эта библиотека уже загружена в кэш браузера пользователя и не будет загружаться во второй раз.
Подключение jquery скачиванием файла с библиотекойПодключаем jQuery со страницы своего сайта – это дольше, но надежнее. Для этого нужно:
скачать библиотеку jquery
с официального сайта , сохранить в файл, назовем его jquery-1.11.0.min.js , положить в папку js на нашем сайте и добавить следующий код в
:
В src задается путь где лежит наш файл с jquery, который нужно подключить на страницу сайта.
И, наконец, самый надежный и бронебойный вариант – подключение с Google, если Google недоступен – подключение со своего сайта:
if (typeof jQuery == "undefined") { document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script%3E")); }
Или самый современный вариант – прописываем в
Следующий код: google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); function jQueryIsLoaded() { alert("jQuery от Google загружен"); } if (typeof jQuery == "undefined") { document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script%3E")); }
Знакомство с библиотекой jQuery UI для построения пользовательского интерфейса. Краткая инструкция для начинающих.
Что такое jQuery UI?jQuery UI (с англ. jQuery Пользовательский Интерфейс ) – это библиотека виджетов и взаимодействий, построенная на основе jQuery JavaScript библиотеку, которую можно использовать для создания высоко-интерактивных web-приложений.
Для того, чтобы наглядно ознакомиться с возможностью jQuery UI библиотеки посетите страницу: Demos & Documentation — на сайте jqueryui.com .
Теперь, когда вы понимаете что такое jQuery UI, можно приступить к выбору, необходимых для загрузки, компонентов: UI Core (основные функции ПИ), Interactions (взаимодействия), Widgets (виджеты), Effects (эфекты) и Theme (темы оформления) – тем самым, создав свою копию библиотеки jQuery UI. Для этого посетите страницу: Build Your Download . Там же вы можете быстро скачать последнюю Stable или Legacy версии библиотеку jQuery UI.
ZIP архив загруженной вами библиотеки jQuery UI будет содержать следующее:
Для подключения библиотеки jQuery UI обычно хватает трёх ссылок: CSS темы ПИ, библиотеки jQuery и jQuery UI. Выглядеть это может следующим образом:
После того как вы подключили необходимые файлы, вы можете начинать добавлять необходимые виджеты на вашу страницу. Например, чтобы сделать DatePicker (с англ. выбор даты , добавим текстовое поде:
А также JavaScript код:
$(function(){ $("#date").datepicker(); });
Результат интерпретации браузером приведённого примера будет иметь следующий вид:
jQuery UI настраивается в нескольких направлениями. Вы уже знаете, как можно загрузить свою копию библиотеки jQuery UI с нужными компонентами, но есть и другие возможности настроить этот код для его внедрения.
Использование опций. Каждый компонент в jQuery UI имеет ряд определённых по умолчанию настроек. В тоже время, вы всегда можете их изменить, используя «option» (с англ. опция ), передавая компоненту нужное значение.
Например, для того чтобы задать формат даты для виджета DatePicker можно воспользоваться опцией: dateFormat.
$("#date").datepicker({ dateFormat: "yy-mm-dd" });
Получить значение опции после инициации виджета можно следующим образом:
var dateFormat = $("#date").datepicker("option", "dateFormat");
Указать значение опции после инициации виджета можно следующим образом:
$("#date").datepicker("option", "dateFormat", "yy-mm-dd");
Визуальная настройка. Для настройки собственной темы в jQuery UI имеется ThemeRoller , позволяющий визуально настроить компоненты вашего интерфейса. Воспользоваться и подробней узнать об этом инструменте вы можете посетив страницу:
Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Данный оконный интерфейс предполагает такие основные свойства как - наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге .
Итак, имеем желание создать пример интерактивного оконного веб-интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
После закачки и извлечения загруженных компонентов на компьютер получится следующая файловая структура:
С папками сss и js всё понятно, а шаблон для index.html напишем такой:
