JQuery UI

Z Wikipedie, otevřené encyklopedie
Skočit na: Navigace, Hledání
jQuery UI
Vývojář jQuery UI tým
Aktuální verze 1.10.2 (14. březen 2013)
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

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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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žňuje uživateli třídit a řadit elementy tažením myši.

Widgets[editovat | editovat zdroj]

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[editovat | editovat zdroj]

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

Effects[editovat | editovat zdroj]

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žňuje změnit třídu, může být doprovázeno animací

Příklady použití[editovat | editovat zdroj]

Hello world[editovat | editovat zdroj]

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í funkce draggable.

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

Kombinace draggable a efektu pulsate[editovat | editovat zdroj]

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[editovat | editovat zdroj]

Externí odkazy[editovat | editovat zdroj]