Для використання бібліотеки jQuery потрібно:
- Завантажити js-файл з офіційного сайту. Існують дві версії jQuery: для використання в готових додатках (production - jquery.min.js) і для розробки (development - jquery.js). Версія для розробки містить коментарі і структурований код. У скороченій версії немає коментарів та стиснутий код, вона займає менше місця і сторінки будуть завантажуватися швидше.
- Додати js-файл на сторінку в секцію head або в кінці сторінки перед тегом </body>: <script type="text/javascript" src="папка_зі_скриптами/jquery.js"> </script>
- За потреби ініціалізувати плагін, що базується на бібліотеці 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
- Завантажити плагін з офіційного сайту
- Під’єднати необхідні файли плагіну (стилі і скрипти)
- <link rel="stylesheet" href="owlcarousel/owl.carousel.css">
- <link rel="stylesheet" href="owlcarousel/owl.theme.default.css">
- <script src="owlcarousel/owl.carousel.js"> </script>
- Переконатися, що під’єднано файл бібліотеки jQuery
- <script src="jquery.js"> </script>
- Ініціалізувати плагін. Цей код потрібно розмістити в кінці сторінки перед тегом </body>
-
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
</script>
- УВАГА!!!! Перевірити правильність написання шляхів до файлів
Далі потрібно написати простий код для слайдера. В основний блок 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>
Після цього буде створено карусель «базовій комплектації»
Плагін містить багато опцій до налаштувань під власні потреби: зациклити, додати кнопки навігації, пришвидшити прогортання, встановити число слайдів для одночасного показу тощо.
Unite Gallery - це багатоцільова галерея jаvascript, що базується на бібліотеці jquery. Параметри галереї легко налаштувати, змінити тему за допомогою CSS, додавати різні елементи. Галерея дуже потужна, швидка та має більшість сучасних функцій: адаптивність, сенсорне управління, масштабування. Галерея відтворює зображення та відео з Youtube чи Vimeo.
Встановлення Unite Gallery
- Завантажити плагін з офіційного сайту
- Під’єднати загальні файли плагіну (стилі і скрипти)
- <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>
- Переконатися, що під’єднано файл бібліотеки jQuery
- <script src="jquery.js"> </script>
- Під’єднати js-файл, наприклад Tiles Nested
- <script src='unitegallery/themes/tiles/ug-theme-tiles.js' type='text/javascript'></script>
- Ініціалізувати плагін. Цей код потрібно розмістити в кінці сторінки перед тегом </body>
-
<script>
jQuery(document).ready(function(){
jQuery("#galleryTiles").unitegallery({
gallery_theme: "tiles",
tiles_type: "nested"
});
});
</script>
- УВАГА!!!! Перевірити правильність написання шляхів до файлів
Далі потрібно написати код для галереї. В основний блок 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>
