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.

jQuery UI
VývojářjQuery UI tým
Aktuální verze1.13.1 (20. ledna 2022)
Operační systémmultiplatformní
Vyvíjeno vJavaScript
Typ softwaruwebový aplikační framework
Licenceduální licence:
GPL a MIT
Webjqueryui.com
Některá data mohou pocházet z datové položky.

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:

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
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.