JQuery UI

jQuery UI
Vývojář	jQuery UI tým
Aktuální verze	1.14.1 (30. října 2024)
Operační systém	multiplatformní
Vyvíjeno v	JavaScript
Typ softwaru	webový aplikační framework
Licence	duální licence:; GPL a MIT
Web	jqueryui.com
	Některá data mohou pocházet z datové položky.

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 <script> a </script> 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

Externí odkazy

Část portálu jQuery-navod.cz věnovaná jQuery UI Archivováno 30. 1. 2011 na Wayback Machine.
(anglicky) Domovská stránka projektu