JavaScript та бібліотека jQuery UI

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

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

Основним завданням jQuery є надання розробнику легкий та гнучкий інструментарій кросбраузерної адресації DOM об'єктів за допомогою CSS та XPath селекторів. Також даний фреймворк надає інтерфейси для Ajax-застосунків, обробників подій і простої анімації. Принцип роботи jQuery полягає в використанні класу (функції), який при звертанні до нього повертає сам себе. Таким чином, це дозволяє будувати послідовний ланцюг методів.

Бібліотека jQuery є JavaScript файлом, яка містить DOM, події(events), ефекти(effects) і Ajax функції. Бібліотеку можна додати до сторінки посиланням на локальну копію, або на одну з копій доступних на публічному сервері (наприклад Google або Microsoft CDN).

Бібліотека jQuery UI

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

Під’єднання jQuery UI

Для того, щоб скористатися можливостями плагінів jQuery UI їх необхідно спочатку під’єднати до сторінки, на якій вони будуть використовуватися.

Існують два варіанти під’єднання jQuery UI:

Локальне під’єднання. Даний спосіб вимагає завантаження файлу з офіційного сайту.
Віддалене під’єднання. Даний спосіб не вимагає завантаження файлу, а замість цього використовує його віддалено.

Завантаження і установка jQuery UI

Завантажити бібліотеку можна з сайту розробників http://jqueryui.com/, зі сторінки http://jqueryui.com/download, CDN-сховища сторонніх сайтів https://developers.google.com/speed/libraries/. У будь-якому випадку потрібно прописати елементи link і script, щоб під’єднати стилі бібліотеки та її JavaScript-код.

Приклад під'єднанняключення

Можливості бібліотеки jQuery UI описуються чотирма блоками: взаємодії (Interactions), віджети / елементи управління (Widgets), ефекти (Effects), утиліти (Utilities). Кожен з блоків містить список можливих застосувань.

Взаємодії (Interactions) jQuery UI

Draggable - перетягувати HTML-елементи мишкою.
Droppable - призначити HTML-елемент, на який буде розміщено елемент, що перетягується.
Resizable - змінює розмір HTML-елемента за допомогою мишки.
Selectable - використовується мишка для виділення елемента або групи елементів.
Sortable - дозволяє сортувати елементи на сторінці.

Віджети / елементи управління (Widgets) jQuery UI

Accordion - набір елементів, що розгортаються/згортаються.
Autocomplete - автодоповнення введення по перших символах.
Button - кнопки на сторінці.
Datepicker - вибір дати з календаря.
Dialog - створення діалогових вікон.
Menu – випадне меню.
Progressbar - прогрес виконання деякого процесу.
Selectmenu - розширює функціональність базового HTML-елемента.
Slider - вибір числа за допомогою повзунка.
Spinner - для зміни значень в текстовому полі введення.
Tabs - організація вкладок на сторінці.
Tooltip - організація спливаючих підказок.

Ефекти (Effects) jQuery UI

Add Class - додає CSS-клас елементу.
Color Animation - розширення анімації jQuery.
Easing - зміна темпу анімації.
Effect - анімаційні ефекти.
Hide - приховування елемента з використанням анімаційних ефектів.
Remove Class - видалення CSS-класу.
Show - поява елемента з використанням анімаційних ефектів.
Switch Class - перемикання класів.
Toggle - по черзі відображає і ховає елемент з використанням анімаційних ефектів.
Toggle Class - по черзі додає і видаляє клас з елемента (на відміну від Switch Class працює з одним класом).

Утиліти (Utilities) jQuery UI

Position - управління позиціонуванням елементу щодо документа, вікна браузера, інших елементів.
Widget Factory - дозволяє використовувати всі віджети jQuery UI на сторінці.

Оформлення jQuery UI

Для оформлення бібліотеки можна використовувати один з готових наборів (тем) або сформувати власну тему на сторінці оформлювача тем (ThemeRoller). Створена тема представляє папку з CSS, яку буде потрібно розмістити поруч з основним кодом бібліотеки.

Приклади застосування бібліотеки jQuery UI

Top 100 Free jQuery Plugins 2016 - http://www.jqueryscript.net/popular/2016.html
JavaScript плагини і бібліотеки - http://helix.su/javascript/
Ефекти зображень - http://pcvector.net/scripts/image-effects
Підбірка адаптивних спайдерів - http://vavik96.com/podborka-adaptivnyx-slajderov/

Багатофункціональні плагіни до бібліотеки jQuery

UniteGallery - багатофункціональна галерея для виведення зображень, музики, відео. Галерея є адаптивною з підтримкою touch пристроїв.

Masonry - це Javascript бібліотека, що дозволяє виводити HTML блоки в компактно-складеному вигляді. Скрипт аналізує висоту кожного блоку і максимально економлячи простір має його. Докладну документацію про використання та можливості плагіна викладено на офіційному сайті. Masonry працює самостійно без використання бібліотек, але також може використовуватися як jQuery плагін.

Корисні плагіни jQuery для розробки Frontend

Серед багатьох фреймворків JavaScript, jQuery, безумовно, самий популярний. Мета jQuery полягає в тому, щоб зробити багато з функцій JavaScript, шляхом об'єднання їх в методи, які можуть бути викликані тільки одним рядком кода. Нижче наведено перелік плагінів jQuery в наступних категоріях: Web & Mobile Layouts Plugins, Menu & Navigation Plugins, Plugins for Media, Slider, Carousel & Gallery Plugins, Text Effect Plugins, Form Plugins, Utility Plugins.

Модулі jQuery для веб-і мобільних макетів

PagePiling.js - це плагін для «складання» розділів макета один над одним і доступу до них шляхом прокрутки.
FullPage.js - простий плагін для створення прогортання повно екранних сторінок.
JQuery Tilted Page Scroll - створення 3D-ефекту прогортання.
FixedContent.js - плагін jQuery, який фіксує/зберігає вміст під час прогортання.
Gridscrolling.js - це плагін для позиціонування секцій і допоміжних елементів в сітці і дозволяє легко маніпулювати курсором.
Flickerplate - це гнучкий, плавний і легкий плагін, який дозволяє «перегортати» вміст.
JInvertScroll - це легкий плагін, який дозволяє переміщатися горизонтально з ефектом паралаксу при просуванні вниз.
Animsition - простий плагін для додавання переходів сторінок з анімацією CSS.
ScrollToBySpeed.js - плагін, який дозволяє прогортати вікно по швидкості, а не по тривалості.
Brick Work - це легкий і багатофункціональний плагін для створення динамічних макетів.
ScrollMe - це легкий плагін, який дозволяє додавати прості прокрутки до веб-сторінок.
Jquery.smoothState.js - це плагін, який поступово розширює сторінки, щоб вести себе як односторінковий додаток.
Multiscroll.js - простий плагін для створення кількох сторінок з двома вертикальними панелями прокрутки.
Jquery.matchHeight.js - більш надійний плагін рівних висот для jQuery.

Модулі навігації та меню jQuery

Slidebars - легкий плагін для створення push-меню в стилі додатку.
ScotchPanels.js - це меню jQuery off-canvas і плагін.

Модулі jQuery для мультимедіа (зображення і відео)

Focuspoint - це плагін для динамічного обрізання зображень щоб заповнити доступний простір без вирізання об'єкта зображення.
Fluidbox - це реплікація модуля Lightbox Lightbox з деякими додатковими поліпшеннями.
GifPlayer - невеликий плагін, який дозволяє контролювати, коли запускати і зупиняти анімовані GIF.
RowGrid.js - плагін для розміщення зображень на сітці з підтримкою нескінченної прокрутки.
Magneticmediajs - бібліотека на основі jQuery, яка дозволить відображати мультимедійний контент в стильний і ефектний спосіб.
SVGMagic - простий резервний плагін SVG, який знаходить SVG-зображення на сайті і створює версії PNG, якщо браузер їх не підтримує.
Vide - плагін jQuery для простого додавання відеофайлів до веб-сторінки.
Data-Img - простий плагін для роботи з гнучкою доставкою зображень шляхом заміни зображень з «image src» або «background-image url» в залежності від ширини екрану.
Dense.js - плагін для зручної роботи з зображеннями, готовими до сітківки.
Covervid - простий плагін, який дозволить вести використати відео з HTML5 як фонове зображення.
JQuery-Cropbox - корисний плагін для обрізання на місці (масштабування і панорамування, на відміну від вибору і перетягування).
Face Detection - потужний плагін jQuery / Zepto, який виявляє осіб на зображеннях, відео і полотнах.
BttrLazyLoading - плагін, який дозволяє веб-додатку завантажувати тільки зображення у вікні перегляду, коли користувач прокручує.

Модулі jQuery, каруселі та галереї

Простий jQuery Slider - це легкий слайдер jQuery, який виконує саме те, що повинен робити слайдер: «слайди слайдів».
FSVS - це простий повноекранний вертикальний слайдер з використанням переходів CSS3 з резервним копіюванням jQuery.
AnoFlow - багатофункціональний і гнучкий плагін lightbox / gallery.
NanoGALLERY - гнучкий, зручний і зручний у використанні плагін галереї зображень.
Photopile JS - галерея зображень jQuery, яка імітує стек розсіяних фотографій на поверхні.
Shuffle Images - плагін jQuery, який дозволяє відображати і переміщати кілька зображень в галереї, передаючи або струшуючи курсор.
Skippr - супер простий і легкий слайд-шоу для jQuery.

Модулі ефекту тексту jQuery

JQuery.fontFlex.js - легкий плагін для динамічної зміни розмірів шрифтів.
T.js - легкий плагін jQuery для текстових ефектів, що нагадують друкарські машинки.
CurvedText - простий плагін jQuery, який дозволяє вирівняти текст з будь-якої кривої.
Morphext - Animate.css, підключений до каруселі jQuery для текстових фраз.
Splitchar - плагін jQuery, який дозволяє створювати першу, другу або обидві половини персонажа.

Модулі елементів форми jQuery

BootstrapValidator - плагін jQuery для перевірки форм Bootstrap.
Labelauty - хороший і легкий плагін jQuery, який надає красу прапорцям і перемикачів.
Guardian - гнучкий і простий в поширенні плагін jQuery для перевірки правильності форми.
FontIconPicker - легкий плагін, який дозволяє включати простий значок (з пошуком і розділенням на сторінки) в будь-якій формі.
HideSeek - простий плагін jQuery для прямого пошуку на сторінці

Модулі-утиліти jQuery

JQuery Confirm Mailto - плагін для підтвердження за допомогою користувачів, перш ніж відкривати будь-яку пошту mailto: link через поштовий клієнт за замовчуванням.
jQuery prettySocial - кнопки поширення для Pinterest, Twitter, Facebook і Google+
JNottery - плагін, який дозволяє додавати замітки до сторінки.
Responsive Tabs - це плагін, який пропонує гнучку функціональність вкладок.
Jquery.adaptive-backgrounds.js - класний плагін, який витягує домінуючий колір із зображень на веб-сторінці і застосовує колір до їхніх батьків.
JQuery.planetarium - плагін jQuery, який дозволяє створювати інтерактивні планети і будувати Всесвіт!
Selector- бібліотека мікро-JavaScript, що використовується в якості заміни для jQuery.

Віджети та гаджети

Віджет це невеликий незалежний програмний модуль, що зроблено за допомогою технології API і який працює в деякому середовищі (напр. сайті, браузері, мобільному телефоні) та виконує, як правило, одну певну функцію.

Віджети також називають гаджетами, інформерамі, а англійською gadget, badge, module, webjit, capsule, snippet, mini або навіть flake.

Веб-віджет (web widget) - це фрагмент коду, який може бути вбудований користувачем в HTML сторінку і використовуватися без значної модифікації. Як правило, при створенні веб-віджетів використовуються технології DHTML, JavaScript і Adobe Flash.

Веб-віджети можна умовно розділити на:

Інтерактивні з якими користувач може взаємодіяти, наприклад, відправляти SMS або шукати маршрут на карті.
Неінтерактивні, вміст і робота яких не залежить від дій користувача, що переглядає сторінку. Неінтерактивні віджети ще часто називають інформерамі. Класичний приклад інформера - погодний інформер.

Кнопки соціальних мереж

Інформери

Погода
Погода у Києві
вологість:
тиск:
вітер:
Погода у Львові
вологість:
тиск:
вітер:
Погода на sinoptik.ua

Sinoptik.ua
Погода у Львові

Gismeteo

Погода на 2 тижні

Gismeteo.ua
Курси долара, євро і рубля по банках

I.ua
Загружаем курсы валют от minfin.com.ua

Minfin.com.ua
Україна:
Time.is
Новини

Загружается...

Усi новини Ukr.Segodnya.ua

Segodnya.ua

Порядок роботи

Ознайомитися з теоретичними засадами мови JavaScript та бібліотеки jQuery UI.
Відкрити сторінку, що створена у попередній лабораторній роботі. Користуючись документацією бібліотеки https://jqueryui.com/ додати на сторінку 2-3 динамічних елементи, що наведені в переліку:
- Accordion - набір елементів, що розгортаються/згортаються.
- Datepicker - вибір дати з календаря.
- Menu – випадне меню.
- Slider - вибір числа за допомогою повзунка.
- Tabs - організація вкладок на сторінці.
- Tooltip - організація спливаючих підказок.
Додати до сторінки плагін галереї UniteGallery. Створити за допомогою бібліотеки:
- фотогалерею з можливістю перегляду збільшених зображень
- слайдер фотографій
- слайдер відеоматеріалів
Додати до сторінки кнопки соціальних мереж: Facebook, Twitter, Instagram, Pinterest.
Додати до сторінки інформери:
- Погода у Львові
- Курс валют
- Годинник
Розглянути коди скриптів і, якщо це можливо, змінити розміри, колір шрифту для стильової сумісності дизайну.
Розмістити тестову сторінку на хостингу. Результат виконання демонструвати в Інтернеті.

Зміст звіту

Назва та мета виконання лабораторної роботи.
Скріни етапів виконання роботи та результати втілення скриптів, динамічних елементів, віджетів та інформерів на сторінку.
Короткий опис редагування та уставляння елементів з наведенням HTML-коду зі сторінки.
У висновку оцінити різні можливості уставляння динамічних ресурсів. Зробити порівняльний аналіз сервісів, що надають одинакові послуги.

Контрольні питання

Які особливості притаманні мові JavaScript, які можливості вона надає для розробників?
В чому різниця між компіляцією та інтерпретацією програмного коду скрипта?
Яким чином здійснюється інтеграція JavaScript на сайт користувача, яким чином браузер обробляє JavaScript-код?
Які можливості надає бібліотека jQuery UI? Яким чином можна уставити динамічні елементи на сайт?
Які цікаві плагіни JavaScript можна застосувати на сайті?
Назвіть можливості плагіна UniteGallery. Яким чином можна під'єднати цей плагін до сайту.
Які функції виконують віджети? В чому різниця між інтерактивними та неінтерактивними віджетами?
Які функції спроможні виконувати кнопки соціальних мереж?
Особливості уставляння кнопок соціальних мереж на користувацький сайт. Які переваги надає їх наявність
Які типи інформерів існують, яка між ними різниця?