Бібліотека 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

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