 | |
| Vývojář | jQuery UI tým |
|---|---|
| Aktuální verze | 1.14.0-beta.2 (14. června 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
| Zdroj dat | cs.wikipedia.org |
|---|---|
| Originál | cs.wikipedia.org/wiki/JQuery_UI |
