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

Лабораторна робота #5

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

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

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

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

Модулі 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 type="text/javascript">

  • <script>
    jQuery(document).ready(function(){

    jQuery("#gallerySlider").unitegallery({
    gallery_theme: "video"
    });
    });
    </script>

Unite Gallery Video Slider