Главная Восстановление

Библиотека jQuery UI. Установка и настройка. Подключение jquery через Google или Microsoft Создание нового окна

jQuery UI представляет из себя набор виджетов и плагинов от самих разработчиков jQuery. По моему мнению, данный инструмент необходимо изучить настолько, насколько это требуется, чтобы не писать свои «велосипеды». Скачать-почитать о данной надстройке над jQuery можно на домашней страницы проекта – http://jqueryui.com/ .

Что нам необходимо знать о виджетах и плагинах? Первое – это какие они есть, и второе – как работают. На этих двух моментах я и постараюсь остановиться.

Интерактивность

Начну с полезных плагинов, которые могут упростить жизнь при создании интерактивных интерфейсов:

Draggable – данный компонент позволяет сделать любой DOM-элемент перетаскиваемым при помощи мыши
Droppable – это логичное продолжение компонента Draggable; необходим для работы с контейнерами, внутрь которых можно перетаскивать элементы
Resizable – как следует из названия, даёт возможность растягивать любые DOM-элементы
Selectable – позволяет организовать «выбор» элементов; удобно использовать для организации менеджмента картинок
Sortable – сортировка DOM-элементов

Виджеты

Виджеты – это уже комплексное решение, содержащее не только код JavaScript, но и некую реализацию HTML и CSS:

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

Утилиты

Утилит у нас не много – вот полезный плагин Position, который позволяет контролировать положение DOM-элементов – http://jqueryui.com/position/ , а ещё есть фабрика по созданию виджетов, но о ней я расскажу чуть попозже.

Эффекты

Среди эффектов, предоставляемых jQuery UI, я выделяю четыре пункта:

Анимация цвета
Анимация изменения классов
Набор эффектов
Расширение возможностей easing

За анимацию цвета отвечает компонент «Effects Core», который позволяет анимировать изменения цвета посредством использования функции «.animate()»:

$("#my" ).animate({ backgroundColor: "black" }, 1000 );

Да-да, базовый jQuery не умеет этого делать, а вот jQuery UI позволяет анимировать следующие параметры:

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor

Ещё одной возможностью, заключенной в «Effects Core» является анимация изменений класса DOM-элемента, т.е. когда вы будете присваивать новый класс элементу, то вместо обычного моментального применения новых CSS свойств вы будете наблюдать анимацию этих свойств от текущих до заданных в присваиваемом классе. Для использования данного функционала нам потребуются старые знакомые – методы «.addClass()», «.toggleClass()» и «.removeClass()», с одной лишь разницей – при вызове метода вторым параметром должна быть указана скорость анимации:

$("#my" ).addClass("active" , 1000 ); $("#my" ).toggleClass("active" , 1000 ); $("#my" ).removeClass("active" , 1000 );

Если из предыдущего абзаца у вас не возникло понимания сути происходящего, то этот код для вас:

#my { font-size :14px ; } #my .active { font-size :20px ; } $(function () { $("#my" ).addClass("active" , 1000 ); // тут получается аналогично следующему вызову $("#my" ).animate({"font-size" :"20px" }, 1000 ); });

А ещё появляется метод «.switchClass()», который заменяет один класс другим, но мне он ни разу не пригодился.

О наборе эффектов я не буду долго рассказывать, их лучше посмотреть в действии на странице http://jqueryui.com/effect/ . Для работы с эффектами появляется метод «.effect()», но сам по себе его лучше не использовать, ведь UI расширил функционал встроенных методов «.show()», «.hide()» и «.toggle()». Теперь, передав в качестве параметра скорости анимации названия эффекта, вы получите необходимый результат:

$("#my" ).hide("puff" ); $("#my" ).show("transfer" ); $("#my" ).toggle("explode" );

Приведу список эффектов, может, кто запомнит: blind , bounce , clip , drop , explode , fold , highlight , puff , pulsate , scale , shake , size , slide , transfer .

Если в какой-то момент времени потребуется внести изменения в тему, откройте файл «jquery-ui-#.#.##-custom.css» и найдите строчку начинающуюся с текста «To view and modify this theme, visit http:...». Пройдите по указанной ссылке и, используя ThemeRoller, внесите необходимые изменения.

Пишем свой виджет

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

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

$.widget("book.expose" , { // настройки по умолчанию options: { color: "red" }, // инициализация widget // вносим изменения в DOM и вешаем обработчики _create: function () { this .element; // искомый объект в jQuery-обёртке this .name; // имя - expose this .namespace; // пространство – book this .element.on("click." +this .eventNamespace, function () { console .log("click" ); }); }, // метод отвечает за применение настроек _setOption: function ( key, value ) { // применяем изменения настроек this ._super("_setOption" , key, value); }, // метод _destroy должен быть антиподом к _create // он должен убрать все изменения, внесенные в DOM, и убрать все обработчики, если таковые были _destroy: function () { this .element.off("." +this .eventNamespace); } });

Поясню для тех, кто не прочёл комментарии:

options – хранилище настроек виджета для конкретного элемента

Create() – отвечает за инициализацию виджета – тут в DOM должны происходить изменения и «вешаться» обработчики событий

Destroy() – антипод для «_create()» – должен подчистить всё, что мы намусорили

SetOption(key, value) – данный метод будет вызван при попытке изменить какие-либо настройки:

$("#my" ).expose({key:value})

Наблюдательный глаз заметит, что все перечисленные методы начинаются со знака подчёркивания – это такой способ выделить «приватные» методы, которые недоступны для запуска. Если мы попытаемся запустить «$("#my").expose("_destroy")», то получим ошибку. Но учтите – это лишь договорённость, соблюдайте, её!

Для обхода договорённости о приватности можно использовать метод «data()»:

$("#my" ).data("expose" )._destroy() // место для смайла «(evil)»

В данном примере я постарался задать хороший тон написания виджетов – я «повесил» обработчики событий в namespace. Это даст в дальнейшем возможность контролировать происходящее без необходимости залазить в код виджета. «True story».

Код, описанный в методе «_destroy()», избыточен, т.к. он и так выполняется в публичном «destroy()». Приведён тут для наглядности.

А для ленивых, чтобы не прописывать каждый раз «eventNamespace» в обработчиках событий, разработчики добавили в версии 1.9.0 два метода: «_on()» и «_off()». Первый принимает два параметра:

DOM-элемент, или селектор, или jQuery-объект
набор обработчиков событий в виде объекта

Все перечисленные события будут «висеть» в пространстве «eventNamespace», т.е. результат будет предположительно одинаковым:

this ._on(this .element, { mouseover:function (event ) { console .log("Hello mouse" ); }, mouseout:function (event ) { console .log("Bye mouse" ); } });

Второй метод, «_off()», позволяет выборочно отключать обработчики:

this ._off(this .element, "mouseout click" );

Ну, каркас баркасом, пора переходить к функционалу. Добавим произвольную функцию с произвольным функционалом:

CallMe:function () { console .log("Allo?" ); }

К данной функции мы легко сможем обращаться как из других методов виджета, так и извне:

// изнутри this .callMe() // извне $("#my" ).expose("callMe" )

Если ваша функция принимает параметры, то передача оных осуществляется следующим способом:

$("#my" ).expose("callMe" , "Hello!" )

Если вы хотите достучаться в обработчике событий до метода виджета, то не забудьте про область видимости переменных и сделайте следующий манёвр:

{ _create: function () { var self = this ; // вот он! this .element.on("click." +this .eventNamespace, function () { // тут используем self, т.к. this уже указывает на // элемент по которому кликаем self.callMe(); }) } }

Хорошо идём, теперь поговорим о событиях. Для более гибкой разработки и внедрения виджетов предусмотрен функционал по созданию произвольных событий и их «прослушиванию»:

// инициируем событие this ._trigger("incomingCall" ); // подписываемся на событие при инициализации виджета $("#my" ).expose({ incommingCall: function (ev ) { console .log("din-don" ); } }) // или после, используя в качестве имени события // имя виджета + имя события $("#my" ).on("exposeincomingCall" , function () { console .log("tru-lya-lya" ) });

Материала много, я понимаю, но ещё добавлю описание нескольких методов, которые можно вызвать из самого виджета:

Delay() – данная функция работает как «setTimeout()», вот только контекст переданной функции будет указывать на сам виджет (это чтобы не заморачиваться с областью видимости)

Hoverable() и _focusable() – данным методам необходимо скармливать элементы, для которых необходимо отслеживать события «hover» и «focus», чтобы автоматически добавить к ним классы «ui-state-hover» и «ui-state-focus» при наступлении оных

Hide() и _show() – эти два метода появились в версии 1.9.0, они созданы дабы стандартизировать поведение виджетов при использовании методов анимации; настройки принято прятать в опциях под ключами «hide» и «show» соответственно. Использовать методы следует следующим образом:

{ options: { hide: { effect: "slideDown" , // настройки эквиваленты вызову duration: 500 // .slideDown(500) } } } // внутри виджета следует использовать вызовы _hide() и _show() this ._hide(this .element, this .options.hide, function () { // это наша функция обратного вызова console .log("спрятали" ); });

Существует ещё пара методов, которые реализованы до нас:

{ enable: function () { return this ._setOption("disabled" , false ); }, disable: function () { return this ._setOption("disabled" , true ); } }

Фактически, данные функции создают синоним для вызова:

$("#my" ).expose({ "disabled" : true }) // или false

Наша задача сводится лишь к отслеживанию этого флага в методе «_setOption()».

Первый вопрос, который возникает при начале работы с библиотекой 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, реализующая более 20 плагинов, среди которых плагины организующие различное поведение (например перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и.т.д) и анимационные эффекты. Кроме этого, UI обладает несколькими темами оформления, с помощью которых оформляются виджеты и которые содержат набор полезных иконок (173 штуки). Любая из тем оформления может быть подкорректирована прямо на сайте jQuery UI, непосредственно перед загрузкой.

Начнем

jQuery UI обладает пятью плагинами поведения, некоторые возможности которых представлены ниже:

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

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

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt~style~gt~ body{font:9pt Arial,sans-serif;} p.titl{clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic} .itLf{float:left; width:280px; height:200px;} .itRg{float:left; margin-left:70px; height:200px; width:200px;} #accordion{font-size:8pt; margin-bottom:25px} #tabs{font-size:8pt; margin-bottom:25px} #opnDialog{font-size:8pt; margin-bottom:25px} #progressbar{font-size:8pt;} button{font-size:8pt;} #radio{font-size:8pt; margin-bottom:25px} #autocomplete{margin-bottom:25px} #slider{margin-bottom:25px} #datepicker{font-size:8pt;} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Аккордеон~lt~/p~gt~ ~lt~div id="accordion"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Глазго~lt~/i~gt~ - крупнейший город Шотландии и третий по численности населения в Великобритании. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 2~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Войны мороженщиков в Глазго~lt~/i~gt~ - серия конфликтов в шотландском городе Глазго между конкурирующими наркоторговцами, развозившими свой товар в фургонах для продажи мороженого. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 3~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Миллуоллский кирпич~lt~/i~gt~ - импровизированное оружие футбольных хулиганов, изготовленное из скрученной газеты и зажимаемое в кулаке наподобие свинчатки. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Раздел 4~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Вкладки~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1"~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Диалоговое окно~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Открыть окно~lt~/a~gt~ ~lt~div id="dialog" title="Простое окно"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="Введите английскую "a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Кроме того, развитую систему стилизации jQuery UI можно использовать, чтобы задавать скругленные углы или например стилизованные области, для системных предупреждениях или сообщениях об ошибке:

Использование

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

Если вы хотите использовать тему оформления, которую вы настроите самостоятельно, то в начале сделайте все необходимые настройки темы на этой странице, затем нажмите кнопку "Download theme" и вы окажетесь на странице загрузки библиотеки, где в поле Theme будет указана отредактированная вами тема.

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

css — содержит файлы оформления (CSS-файл и изображения).
js — содержит файлы с jQuery и jQuery UI.
development-bundle — эту папку можно не загружать на сайт, все ее содержимое носит вспомогательный характер. Здесь много различных файлов с демонстрацией работы плагина и другими вспомогательными файлами.

Кроме этих трех папок, в корне архива лежит файл index.html, с демонстрацией скачанных плагинов (естественно, этот файл так же незачем загружать на сайт).

Подключение UI к вашему сайту

Чтобы jQuery UI заработал на страницах вашего сайта необходимо, чтобы к странице был подключен js-файл библиотеки jQuery, js-файл jQuery UI (находится в папке js скачанного архива) и содержимое папки css (важно, чтобы все оно (содержимое css) располагалось на хостинге в одном каталоге):

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

И все! После этого вы можете использовать возможности jQuery UI на вашей странице. Например с помощью одной строки javascript-кода сделать обычный элемент - перетаскиваемым:

Работа с плагинами

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

Инстанцирование (установка)

Для установки любого плагина на элементы страницы, достаточно выбрать нужные элементы средствами jQuery и затем вызвать на них метод работы с плагином (имя которого всегда совпадает с названием плагина):

Методы

Обычно, под методом какого-то объекта в javascript, подразумевается функция, вызываемая на этом объекте следующим образом:

obj.A () ; // вызов метода A на объекте obj obj.B () ; // вызов метода B на объекте obj

Однако в пределах работы с конкретными плагинами jQuery UI, методами называют такую форму записи:

$("#someId" ) .plaginName ("имя метода" , параметры метода) ;

Например:

Свойства

Каждый плагин обладают рядом свойств (их описание можно найти в документации соответствующих плагинов). Каждое свойство можно задать в момент инстанцирования плагина. Для этого, при установке плагина на элемент нужно передать объект со свойствами в формате {имя_свойства_1:значение_1, имя_свойства_2:значение_2, ...} :

// сделаем из элемента с id=someId диалоговое окно с помощью // плагина dialog и укажем при этом заголовок для окна $("#someId" ) .dialog ({ title: "Сообщение" } ) ; // сделаем из первого div"а на странице календарь с помощью // плагина datepicker, и укажем минимальную и максимальную дату $("div:first" ) .datepicker ({ minDate: new Date(2007 , 1 - 1 , 1 ) , maxDate: new Date(2013 , 1 - 1 , 1 ) } ) ;

Кроме того, значение любого свойства можно узнать или изменить уже после инстанцирования плагина. Для этого необходимо использовать метод "option" :

// узнаем заголовок у диалогового окна var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // изменим заголовок, добавив к нему префикс "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // изменим минимальную дату в календаре, // который установлен на первый div на странице $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog ({ close : function (event, ui) { ... } } ) ;

Создание своих плагинов

Помимо того, что jQuery UI организует множество удобных и интуитивно понятных плагинов, она предоставляет средство, с помощью которого можно делать подобные плагины самостоятельно — фабрику виджетов 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 в моем проекте. Проект представляет собой сайт MVC4 в визуальной студии 11.

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

Я вижу комментарий файла jQuery поверх связанного файла, но не могу найти его. Все остальные файлы, кажется, включены (мои собственные скрипты и файлы jquery ui).

Я попробовал фильтры пакетов и создал свой собственный пакет, но ничего не работает.

Мне бы очень понравилась любая помощь, так как при загрузке страницы все java-скрипты просто сбой, потому что функция не найдена. Это работает, если я обычно включаю файлы java script.

Protected void Application_Start() { BundleTable.Bundles.EnableDefaultBundles(); }

Function Test(){ }

Затем изменилось на это, и код не был на этот раз.

(function Test(){ })

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

Изменить: похоже, что это предназначено

Обновление 2:

Протестировался еще и выяснил, какой файл ломается, если я включаю какие-либо из этих файлов в свой собственный пакет, он разбивает

jquery.validate.js
jquery.validate.unobtrusive.js
jquery.unobtrusive-ajax.min.js

Перед ними у меня есть, и они работают без ошибок

JQuery-1.7.2.min.js
JQuery-UI-1.8.19.min.js
bootstrap.min.js

Это все еще странно, если я включаю этот файл как обычно в script с , они работают так, как должны, без ошибок.

Хотя, если я собираю рабочие файлы, а затем добавляю нерабочий после, как обычно, они все равно ломаются

Var bundle = new Bundle("~/js", new JsMinify()); bundle.AddFile("~/Scripts/jquery-1.7.2.min.js"); bundle.AddFile("~/Scripts/jquery-ui-1.8.19.min.js"); bundle.AddFile("~/Scripts/bootstrap.min.js"); BundleTable.Bundles.Add(bundle);

Изменить: похоже, что что-то изменилось в связанных файлах jquery, что заставляет плагины проверки достоверности

Работа вокруг

Я пытался добавить старые файлы перед обновлением, и он работает! Удалось выяснить, что это был новый jQuery UI 1.8.19 от NuGet, который разбился.

Я загрузил jquery ui прямо со своего сайта и использовал его вместо этого, и он сработает!

Итак, кажется, что что-то в версии jquery ui nuget изменено, что пакет собирает и изменяет/удаляет его, поэтому он прерывается.

какая часть виновата? пакеты jQuery UI NuGet или пакет mvc4? И есть ли решение проблемы связывания?