<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

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

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Обзор библиотеки jQuery UI с примером

Обзор библиотеки jQuery UI с примером

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

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

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

Подключение jQuery UI

Официальный сайт: https://jqueryui.com/

Библиотеку jQuery UI можно скачать на компьютер или подключить через CDN ссылку.

Подключение через CDN

Между тегами head прописать ссылку на jquery-ui.css и библиотеки jQuery и jQuery UI.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

У вас есть два варианта, как скачивать библиотеку.

Выборочное скачивание - Custom Download

Вам точно не надо скачивать всю библиотеку, если вы собираетесь использовать только какие-то отдельные компоненты. На странице Download Builder вы снимаете все галочки, кроме нужных компонентов. Например, если вам нужен только виджет accordion, то напротив него ставите в чекбокс галочку и сайт подскажет вам, какие элементы будут нужны ещё для работы. Галочки будут расставлены автоматически, там где надо и вы не будете скачивать ненужные файлы, что положительно скажется на скорости загрузки сайта.

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

Для встраивания компонентов уже в стилизованный сайт, вам больше подойдет конструктор тем - ThemeRoller, перейдите в раздел Theme. При изменениях в панели управления внешнего вида, вы сразу будете видеть, как выглядят все виджеты. После того как вы закончите формирование внешнего вида элемента, нажимаете на кнопочку download и скачиваете только выбранные элементы и тему, что очень удобно.

Полное скачивание - Quick Download

Ситуация, когда вам нужна вся библиотека маловероятна, разве что посмотреть исходный код. Для скачивания полной последней версии надо нажать на кнопку: Stable.

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

<link rel="stylesheet" href="название_папки/jquery-ui.css">
<script src="название_папки/jquery-3.3.1.min.js"></script>
<script src="название_папки/jquery-ui.min.js"></script>

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

Рассмотрим на примере виджета - Tooltip. Предназначение этого виджета: для красивого открывания подсказки, указанной в атрибуте title.

Как обычно делаем HTML структуру. В параграфе p размещаем поле ввода для вашего возраста - input. В текстовом поле мы указываем атрибут title с текстом "Укажите, пожалуйста, Ваш возраст". К этому элементу мы и применим виджет tooltip.

<body>
  <p>
    <label for="age">
      Ваш возраст: <input id="age" title="Укажите, пожалуйста, Ваш возраст">
    </label>
  </p>
</body>

После загрузки DOM дерева, на объекте document мы обратимся к методу tooltip. Мы обращаемся сразу ко всей странице (document), чтобы данный метод можно было бы применить и к другим элементам страницы. После вызова метода tooltip значения атрибутов title будут отображаться в всплывающей подсказке.

<script>
    $(function () {
      $(document).tooltip();
    });
</script>

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

Обзор библиотеки jQuery UI с примером.

Код между тегами script мы взяли отсюда: https://jqueryui.com/tooltip/#default, ничего не меняя. Для применения дополнительных параметров, надо пройти в раздел документации - API documentation.

Посмотреть пример и код целиком.

See the Pen jQuery UI Tooltip - Default functionality by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.