JQuery UI

jQuery UI je javascriptový framework zaměřený na uživatelské rozhraní, vytvořený s cílem ulehčit vývojářům implementaci pokročilých efektů a vylepšení funkcionality HTML prvků v jejich webových stránkách. Snaží se zjednodušit programování při udržení širokého spektra podporovaných prohlížečů. Je vyvíjen jako součást projektu The jQuery Project, do kterého mimo jQuery UI spadá ještě univerzálnější knihovna jQuery, nástroj QUnit sloužící na unit testování v javascriptu a DOM nástroje Sizzle. První vydání jQuery UI bylo 17. září roku 2007. jQuery UI je stejně jako ostatní součásti jQuery projektu vyvíjeno pod licencí MIT a GPL. Domovská stránka nabízí stažení knihovny s volitelnými součástmi, stejně jako s několika předvolenými i plně customizovatelnými styly.

Struktura jQuery UI

jQuery UI se dělí do čtyřech základních částí: * Core * Interactions * Widgets * Effects Každá obsahuje několik metod a atributů pro přizpůsobení funkčnosti. Existuje ještě část Utilities, která zahrnuje pomůcky pro snadnější a rapidnější vývoj. +more Takto vypadala struktura frameworku v roce 2014:.

Core

Jádro knihovny. Netýká se konkrétních ovládacích prvků, ale modulů, z kterých je knihovna složena. +more Skládá se z těchto položek: * Core - samotné jádro, potřebné pro všechny interakce a widgety * Widget - dodává možnosti sestavit widgety s běžným API (viz též Utilities > Widget Factory) * Mouse - abstrakt nad interakcemi pomocí myši * Position - pro pozicování prvků relativně vůči sobě.

Interactions

Obsahuje metody pro implementaci pokročilých interakcí mezi uživatelem a rozhraním webové aplikace. * Draggable - umožňuje přiřadit jakémukoliv prvku přiřadit vlastnost draggable, uživatel je tak bude moci snadno přesouvat po stránce tažením pomocí kurzoru myši * Droppable - poskytuje implementaci drag and drop chování objektů. +more Vybrané elementy je možno přesouvat a odchytávat událost upuštění * Resizable - libovolný element se po aplikaci stane změnitelný co do velikosti - uživatel ho bude moci zvětšovat nebo zmenšovat pomocí myši podobně jako okna desktopových aplikací * Selectable - umožňuje vybírat jednotlivé, nebo více elementů najednou * Sortable - umožňuje uživateli třídit a řadit elementy tažením myši.

Widgets

Pokročilé elementy UI jako vyskakovací okna, tlačítka, progressbar. * Accordion - snadno vkladatelné rozklikávací položky * Autocomplete - automatické doplňování (našeptávání) použitelné pro formuláře * Button - tlačítko s různými styly a funkcionalitou * Datepicker - pokročilý nástroj pro výběr data * Dialog - vyskakovací modální, či nemodální dialog * Menu - okénkové menu (nabídka) s kaskádově vložitelnými podnabídkami * Progressbar - snadno implementovatelný progressbar - ukazatel (pokroku/postupu určité operace) * SelectMenu - nadstavba políčka s výběrem * Slider - posuvník, element UI známý spíše z desktopových aplikací * Spinner - vstupní políčko s usnadněným přidáváním/ubíráním aktuální hodnoty * Tabs - elegantní navigace pomocí oušek (např. +more jako sešity v Excelu) * Tooltip - bublinková nápověda.

Effects

Poskytuje široký výběr grafických efektů * Effect - obsahuje široký výběr různých grafických efektů, jako skrývání, třesení, blikání a mnoho dalších * Show - metoda pro zviditelnění skrytého prvku, parametry jsou efekt, trvání a callback funkce * Hide - skrytí prvku, opak metody Show * Toggle - kombinace metod Hide a Show do jedné, kdy se obě akce střídají * Color animation - poskytuje možnost animovat barevné přechody * Easing - umožňuje animaci změny dát i jiný průběh než lineární * Add class - umožňuje přidat jakémukoliv elementu zvolenou třídu CSS * Remove class - odebírá třídu, opak funkce Add class * Toggle class - střídavě přidává/odebírá zvolenou třídu určitému prvku * Switch class - umožňuje změnit třídu, může být doprovázeno animací

Utilities

Pomůcky pro usnadnění práce s jQuery UI. * Position - nástroj pro pozicování jQuery UI widgetů * Widget Factory - tvorba vlastních widgetů

Podpora v prohlížečích

jQuery UI je podporováno v prohlížečích: * Google Chrome v poslední nebo předposlední verzi * Mozilla Firefox v poslední nebo předposlední verzi * Opera v poslední nebo předposlední verzi * Safari od verze 5.1 * Microsoft Internet Explorer od verze 8

Příklady použití

Hello world

Základní použití je velmi snadné. Stačí libovolnému elementu přidat atribut id="draggable", do HTML nalinkovat knihovnu jQuery UI a mezi tagy a zapsat následující řádek. +more To je vše pro zajištění funkce draggable.

$("#draggable").draggable;

Kombinace draggable a efektu pulsate

Níže je kompletní zdrojový kód pro vytvoření po stránce posouvatelného div elementu s blikajícím a měnícím se nápisem. Tento příklad je poměrně komplexní je v něm použita i knihovna jQuery pro vykonávání akcí.

jQuery UI example

$("#draggable"). draggable; var interval; $("#draggable"). +moremousedown(function{ $(this). children. html("Pozor, nastal přesun. "). css("color", "red"). effect('pulsate',{ times:1},500); window. clearInterval(interval); interval = window. setInterval(pulsate,500); }); $("#draggable"). mouseup(function{ window. clearInterval(interval); $(this). children. html("Tažením myši přesuňte"). css("color", "black"); }); function pulsate{ $("#draggable p"). stop. effect('pulsate',{ times:1 },500); }.

div#draggable{ margin-top:30%; margin-left: 30%; width: 300px; height: 200px; text-align: center; vertical-align: middle; background-color: gray; text-shadow: 1px 1px 0px white; border-radius: 5px; } p{ position: relative; top: 25%; }

Ukázka použití draggable a efektu pulsate Tažením myši přesuňte

Související články

jQuery * JQuery Mobile

Externí odkazy

[url=http://jquery-navod.cz/kategorie-jquery-ui]Část portálu jQuery-navod.cz věnovaná jQuery UI[/url] * [url=http://www.jQueryUI.com]Domovská stránka projektu[/url]

Kategorie:JQuery