| 1
2
3
4
5
6
7
8
9
10
11
12
|
Сайт
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
Заголовоксайта<
/
title
>
<
/
head
>
<
body
>
<
/
body
>
<
/
html
>
|
Преимуществом данного способа, является то, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.
Подключение jQuery на WordPress
Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:
В итоге внутри тега HEAD появится строка подключения jQuery.
На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.
Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:
В подключении 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 с нужными компонентами, но есть и другие возможности настроить этот код для его внедрения.
Использование опций.
Каждый компонент в 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 (User Interface
) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки jQuery
. Под пользовательским интерфейсом подразумевают - взаимодействие пользователя и веб-страницы.
Главная задача библиотеки jQuery UI
- это облегчить жизнь веб-разработчикам, чтобы они не тратили время на выполнение однотипных задач. Наиболее часто встречающиеся на сайтах скрипты на JavaScript
были собраны в одну библиотеку и разработчикам надо просто брать и применять нужные параметры и методы. Разрабатывать пользовательские интерфейсы стало намного быстрее.
Используемые на сайтах календари, слайдеры, всплывающие окна, уже стали обязательным атрибутом. Так зачем каждый раз разработчику писать код с нуля? Когда он может готовый шаблон подстроить под себя и использовать на своем сайте.
Подключение jQuery UI
Официальный сайт: https://jqueryui.com/
Библиотеку jQuery UI
можно скачать на компьютер или подключить через CDN
ссылку.
Подключение через CDN
У вас есть два варианта, как скачивать библиотеку. Выборочное скачивание - Custom Download
Вам точно не надо скачивать всю библиотеку, если вы собираетесь использовать только какие-то отдельные компоненты. На странице Download Builder
вы снимаете все галочки, кроме нужных компонентов. Например, если вам нужен только виджет accordion
, то напротив него ставите в чекбокс галочку и сайт подскажет вам, какие элементы будут нужны ещё для работы. Галочки будут расставлены автоматически, там где надо и вы не будете скачивать ненужные файлы, что положительно скажется на скорости загрузки сайта.
Прежде чем нажать кнопку download
, выбираете подходящую тему для красивого оформления компонентов. Посмотреть на визуальное оформление готовых тем, можно в разделе Theme/Gallery
.
Для встраивания компонентов уже в стилизованный сайт, вам больше подойдет конструктор тем - ThemeRoller
, перейдите в раздел Theme
. При изменениях в панели управления внешнего вида, вы сразу будете видеть, как выглядят все виджеты. После того как вы закончите формирование внешнего вида элемента, нажимаете на кнопочку download
и скачиваете только выбранные элементы и тему, что очень удобно.
Полное скачивание - Quick Download
Ситуация, когда вам нужна вся библиотека маловероятна, разве что посмотреть исходный код. Для скачивания полной последней версии надо нажать на кнопку: Stable
.
Скачанная библиотека подключается так же, как и через CDN
, с той лишь разницей, что URL-ы
ссылок будут вести на папку, куда вы эти файлы положите на вашем хостинге.
В разделе Demos
наглядно можно увидеть какие задачи (демонстрационные примеры) на сайте можно решить с помощью библиотеки.
Рассмотрим на примере виджета - Tooltip
. Предназначение этого виджета: для красивого открывания подсказки, указанной в атрибуте title
.
Как обычно делаем HTML
структуру. В параграфе p
размещаем поле ввода для вашего возраста - input
. В текстовом поле мы указываем атрибут title
с текстом "Укажите, пожалуйста, Ваш возраст"
. К этому элементу мы и применим виджет tooltip
.
Ваш возраст:
После загрузки DOM
дерева, на объекте document
мы обратимся к методу tooltip
. Мы обращаемся сразу ко всей странице (document)
, чтобы данный метод можно было бы применить и к другим элементам страницы. После вызова метода tooltip
значения атрибутов title
будут отображаться в всплывающей подсказке.
Лучшие статьи по теме
| 
