JQuery UI

JQuery UI je javascriptový framework vytvořený s cílem ulehčit vývojářům implementaci pokročilých efektů a elementů do jejich webových stránek. 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í release byl vydán 17. září roku 2007. jQuery UI je stejně jako ostatní součásti jQuery projektu vyvíjeno pod licencí MIT a GPL.

Struktura jQuery UI

jQuery UI se dělí do čtyř základních částí, z nichž každá obsahuje několik funkcí. Takto vypadala struktura frameworku v prosinci roku 2010:

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 objektu 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 "resizable", 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žnuje 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 - Autocomplete pro formuláře
Button - Tlačítko
Datepicker - Pokročilý nástroj pro výběr data.
Dialog - Vyskakovací modální, či nemodální dialog
Progressbar - Snadno implementovatelný progressbar
Slider - slider, element UI známý spíše z desktopových aplikací
Tabs - elegantní navigace pomocí "tabů"

Utilities

Nástroj pro pozicování jQuery UI widgetů

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 objektu, parametry jsou efekt, trvání a callback funkce.
Hide - Opak metody Show
Toggle - Kombinace metod Hide a Show do jedné. Obě akce se střídají
Color animation - Poskytuje možnost animovat barevné přechody
Add class - Umožňuje přidat jakémukoliv elementu zvolenou třídu
Remove class - Opak funkce Add class
Toggle class - Střídavě přidává a odebírá zvolenou třídu určitému elementu
Switch class - Umožnuje změnit třídu, může být doprovázeno animací

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 do mezi tagy <script> a </script> zapsat následující řádek. To je vše pro zajištění funce draggable.

 $("#draggable").draggable();

Kombinace draggable a efektu pulsate

Níže je kompletní zdrojový kód pro vytvoření po stránce posouvatelného div elementus 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

Externí odkazy

(česky) Část portálu jQuery-navod.cz věnovaná jQuery UI
(anglicky) Domovská stránka projektu