#5. Бібліотека jQuery та плагіни

JavaScript — це мова програмування, яка надає інтерактивності до веб-сайту (наприклад: ігри, реакція на натиски кнопок, введення даних через форми, динамічна зміна стилів, анімація).

jQuery — популярна JavaScript-бібліотека з відкритим кодом. jQuery є вільним програмним забезпеченням під ліцензією MIT. Синтаксис jQuery розроблено, щоб зробити зручнішим орієнтування у навігації завдяки вибору елементів DOM, створенню анімації, обробки подій, і розробки AJAX-застосунків. jQuery надає можливості для розробників створювати потужні і динамічні веб-сторінки.

В інтернеті можна знайти величезну кількість безкоштовних jQuery плагінів написаних іншими розробниками і використовувати їх для створення своїх додатків.

Бібліотека jQuery

Для використання бібліотеки jQuery потрібно:

  1. Завантажити js-файл з офіційного сайту. Існують дві версії jQuery: для використання в готових додатках (production - jquery.min.js) і для розробки (development - jquery.js). Версія для розробки містить коментарі і структурований код. У скороченій версії немає коментарів та стиснутий код, вона займає менше місця і сторінки будуть завантажуватися швидше.
  2. Додати js-файл на сторінку в секцію head або в кінці сторінки перед тегом </body>: <script type="text/javascript" src="папка_зі_скриптами/jquery.js"> </script>
  3. За потреби ініціалізувати плагін, що базується на бібліотеці jQuery.Як приклад, певний код ініціалізації наведено нижче:
 
<script>
$(document).ready(function(){
$("input").click(function(event){
alert("Поздравляем! Вы починили код!");
}); });
</script>

Бібліотека плагінів та віджетів jQuery UI

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

Зовнішній вигляд віджетів може бути налаштований:

  • За допомогою вибору однієї зі стандартних тем, доступних для віджета;
  • За допомогою themeroller;
  • Вручну шляхом редагування файлу jquery-ui.custom.css.

Популярні плагіни, що базуються на jQuery

Слайдер Owl Carousel

Owl Carousel - це популярний слайдер-карусель, що має широкі можливості для налаштування, сумісний зі всіма браузерами, підтримує дотики та жести на мобільних пристроях.

Встановлення Owl Carousel

  1. Завантажити плагін з офіційного сайту
  2. Під’єднати необхідні файли плагіну (стилі і скрипти)
    • <link rel="stylesheet" href="owlcarousel/owl.carousel.css">
    • <link rel="stylesheet" href="owlcarousel/owl.theme.default.css">
    • <script src="owlcarousel/owl.carousel.js"> </script>
  3. Переконатися, що під’єднано файл бібліотеки jQuery
    • <script src="jquery.js"> </script>
  4. Ініціалізувати плагін. Цей код потрібно розмістити в кінці сторінки перед тегом </body>
    • <script>
      $(document).ready(function(){
      $('.owl-carousel').owlCarousel();
      });
      </script>
  5. УВАГА!!!! Перевірити правильність написання шляхів до файлів

Далі потрібно написати простий код для слайдера. В основний блок div поміщаються інші блоки з різним вмістом: текст, зображення, блоки інформації.

<div class="owl-carousel owl-theme">
<div><img src="1.jpg"></div>
<div><img src="2.jpg"></div>
<div><img src="3.jpg"></div>
<div><img src="4.jpg"></div>
<div><img src="5.jpg"></div>
<div><img src="6.jpg"></div>
</div>

Після цього буде створено карусель «базовій комплектації»

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

Галерея UniteGallery

Unite Gallery - це багатоцільова галерея jаvascript, що базується на бібліотеці jquery. Параметри галереї легко налаштувати, змінити тему за допомогою CSS, додавати різні елементи. Галерея дуже потужна, швидка та має більшість сучасних функцій: адаптивність, сенсорне управління, масштабування. Галерея відтворює зображення та відео з Youtube чи Vimeo.

Встановлення Unite Gallery

  1. Завантажити плагін з офіційного сайту
  2. Під’єднати загальні файли плагіну (стилі і скрипти)
    • <link href="unitegallery/css/unite-gallery.css" rel="stylesheet">
    • <link href="unitegallery/themes/default/ug-theme-default.css" rel="stylesheet">
    • <script src="unitegallery/js/unitegallery.js"></script>
  3. Переконатися, що під’єднано файл бібліотеки jQuery
    • <script src="jquery.js"> </script>
  4. Під’єднати js-файл, наприклад Tiles Nested
    • <script src="unitegallery/themes/tiles/ug-theme-tiles.js' type="text/javascript"></script>
  5. Ініціалізувати плагін. Цей код потрібно розмістити в кінці сторінки перед тегом </body>
    • <script>
      jQuery(document).ready(function(){
      jQuery("#galleryTiles").unitegallery({
      gallery_theme: "tiles",
      tiles_type: "nested"
      });
      });
      </script>
  6. УВАГА!!!! Перевірити правильність написання шляхів до файлів

Далі потрібно написати код для галереї. В основний блок div поміщаються інші блоки з різним вмістом: текст, зображення, блоки інформації.

	

<div id="galleryTiles" style="display:none;">

<img alt="Image 1 Title" src="picture/5/example/images/1.jpg"
data-image="picture/5/example/images/1.jpg"
data-description="Image 1 Description">

<img alt="Image 2 Title" src="picture/5/example/images/2.jpg"
data-image="picture/5/example/images/2.jpg"
data-description="Image 2 Description">

<img alt="Image 3 Title" src="picture/5/example/images/3.jpg"
data-image="picture/5/example/images/3.jpg"
data-description="Image 3 Description">

<img alt="Image 4 Title" src="picture/5/example/images/4.jpg"
data-image="picture/5/example/images/4.jpg"
data-description="Image 4 Description">

<img alt="Image 5 Title" src="picture/5/example/images/5.jpg"
data-image="picture/5/example/images/5.jpg"
data-description="Image 5 Description">

<img alt="Image 6 Title" src="picture/5/example/images/6.jpg"
data-image="picture/5/example/images/6.jpg"
data-description="Image 6 Description">

<img alt="Image 7 Title" src="picture/5/example/images/7.jpg"
data-image="picture/5/example/images/7.jpg"
data-description="Image 7 Description">

<img alt="Image 8 Title" src="picture/5/example/images/8.jpg"
data-image="picture/5/example/images/8.jpg"
data-description="Image 8 Description">

<img alt="Image 9 Title" src="picture/5/example/images/9.jpg"
data-image="picture/5/example/images/9.jpg"
data-description="Image 9 Description">

<img alt="Image 10 Title" src="picture/5/example/images/10.jpg"
data-image="picture/5/example/images/10.jpg"
data-description="Image 10 Description">

</div><!--./galleryTiles-->

УВАГА!!!! ID галереї має збігатися з id в скрипті ініціалізації (в даному випадку id="galleryTiles").

При правильному виконанні буде відтворена галерея зображень у нерівномірній матриці.

Unite Gallery Tiles


Для зміни теми, потрібно долучити відповідні до теми css та js-файли і за потребою скорегувати код ініціалізації.

  • <script src="unitegallery/themes/slider/ug-theme-slider.js" type="text/javascript"></script> 
    <script src="unitegallery/themes/video/ug-theme-video.js" type="text/javascript"></script>
    <link href="unitegallery/themes/video/skin-right-no-thumb.css" rel="stylesheet" type='text/css'>
    <link href="unitegallery/themes/video/skin-right-thumb.css" rel="stylesheet" type='text/css'>
    <link href="unitegallery/themes/video/skin-right-title-only.css" rel="stylesheet" type='text/css'>
  • <script>
    jQuery(document).ready(function(){
    jQuery("#gallerySlider").unitegallery({
    gallery_theme: "video"
    });
    });
    </script>

Unite Gallery Video Slider

Відео лабораторної роботи

Терміни і бали

І половина семестру

ІІ половина семестру

Наприкінці семестру