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. 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. 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ů. 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ř. 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. 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í. <!DOCTYPE html> <html> <head> <title>jQuery UI example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#draggable").draggable(); var interval; $("#draggable").mousedown(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); } </script> <style> 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%;
</style> </head> <body> <h1>Ukázka použití draggable a efektu pulsate</h1> <div id="draggable"><p>Tažením myši přesuňte</p></div> </body> </html>
Související články jQuery JQuery Mobile
Externí odkazy Část portálu jQuery-navod.cz věnovaná jQuery UI Domovská stránka projektu
Kategorie:JQuery Kategorie:Svobodný software naprogramovaný v JavaScriptu Kategorie:Software pod licencí MIT