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 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 будут отображаться в всплывающей подсказке.

Первый вопрос, который возникает при начале работы с библиотекой jQuery — как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.

В этой статье я расскажу как правильно добавить jQuery на обычном html-сайте и на популярных движках.

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

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

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

Заголовок сайта

В некоторых случаях, библиотеку подключают перед закрывающимся тегом body, что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит так:

Заголовок сайта

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1).

Подключение jQuery на страницы своего сайта с внешних источников

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

Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.

Наиболее популярные CDN для подключения jQuery:

Я обычно использую подключение от Google Developers. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:

Заголовок сайта

< ! DOCTYPE html > < html > < 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 UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

папка development-bundle\themes\sunny\images.

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

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

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

Библиотека jQuery

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

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

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

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

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

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

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

папка css\sunny\images

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

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

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

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

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

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

Библиотека jQuery $(function() { $("a").button(); }); Посетите веб-сайт www.professorweb.ru

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

Это моя формула, чтобы сделать простой искатель в Node.js. Это основная причина желания манипулировать DOM на стороне сервера и, вероятно, это причина, по которой вы здесь.

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

Рабочий пример:

Var request = require("request"), cheerio = require("cheerio"); function parse(url) { request(url, function (error, response, body) { var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () { console.info($(this).text()); }); }) } parse("http://stackoverflow.com/");

В этом примере будет отображаться на консоли все главные вопросы, отображаемые на домашней странице SO. Вот почему я люблю Node.js и его сообщество. Это не могло быть проще: -)

Установить зависимости:

npm запрос на установку cheerio

И запустите (если script выше в файле crawler.js):

Кодировка

Некоторые страницы будут иметь не-английский контент в определенной кодировке, и вам нужно будет декодировать его до UTF-8 . Например, страница на бразильском португальском языке (или любой другой язык латинского происхождения), скорее всего, будет закодирована в ISO-8859-1 (a.k.a. "latin1"). Когда требуется декодирование, я предлагаю request не интерпретировать контент каким-либо образом и вместо этого использовать iconv-lite для выполнения задания.

Рабочий пример:

Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // change to match page encoding function parse(url) { request({ url: url, encoding: null // do not interpret content yet }, function (error, response, body) { var $ = cheerio.load(iconv.decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () { console.info($(this).text()); }); }) } parse("http://stackoverflow.com/");

Перед запуском установите зависимости:

npm запрос на установку iconv-lite cheerio

И наконец:

Следующие ссылки

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

Когда вы начнете следовать ссылкам, начнется callback hell . Чтобы этого избежать, вы должны использовать какой-то promises, фьючерс или что-то еще. Я всегда держу async в своем наборе инструментов. Итак, вот полный пример искателя с использованием async:

Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Gets a page and returns a callback with a $ object function getPage(url, parseFn) { request({ url: url }, function (error, response, body) { parseFn(cheerio.load(body)) }); } getPage(baseUrl, function ($) { var questions; // Get list of questions questions = $(".question-summary .question-hyperlink").map(function () { return { title: $(this).text(), url: url.resolve(baseUrl, $(this).attr("href")) }; }).get().slice(0, 5); // limit to the top 5 questions // For each question async.map(questions, function (question, questionDone) { getPage(question.url, function ($$) { // Get list of users question.users = $$(".post-signature .user-details a").map(function () { return $$(this).text(); }).get(); questionDone(null, question); }); }, function (err, questionsWithPosters) { // This function is called by async when all questions have been parsed questionsWithPosters.forEach(function (question) { // Prints each question along with its user list console.info(question.title); question.users.forEach(function (user) { console.info("\t%s", user); }); }); }); });