Pripojenie uzla js jquery ui. JQuery UI – plugin Autocomplete. Inštalácia vývojovej verzie knižnice používateľského rozhrania jQuery

jQuery UI je knižnica založená na jQuery, ktorá implementuje viac ako 20 doplnkov vrátane doplnkov, ktoré organizujú rôzne správanie (napríklad ťahanie alebo rozťahovanie prvkov), osem typov widgetov (ako je kalendár, dialógové okná, systém kariet atď.) a animačné efekty. Okrem toho má používateľské rozhranie niekoľko dizajnových tém, s ktorými sú navrhnuté widgety a ktoré obsahujú sadu užitočných ikon (173 kusov). Ktorúkoľvek z tém dizajnu je možné upraviť priamo na webovej stránke používateľského rozhrania jQuery, bezprostredne pred načítaním.

Začnime

Používateľské rozhranie jQuery má päť doplnkov správania, z ktorých niektoré sú uvedené nižšie:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p(clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic) .itLf(float:left; width:280px ; height:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) .element(float:left; width:120px; height:120px; margin:7px; padding:0.5 em; border:1px solid #ddd; background-color:#eee) .element h3(padding:3px; margin:0; background-color:#f8f8f8; text-align:center; font:normal 8pt Arial,sans-serif ; color:#444) #dropable(background-color:#f2c579;) #dropable h3(background-color:#f1d29e;) ​​​​#draggable(width:100px; height:100px;) #selectable .ui-selecting( pozadie: #f1d29e;) ​​​​#selectable .ui-selected(background:#f2c579; color:white;) ul(list-style-type:none; margin:0; padding:0; width:150px;) ul li(margin:3px; padding:4px; background-color:#fff; border:1px solid #888) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p~gt~Presuňte a chyťte prvky~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~Pretiahnuteľný prvok~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~Zachytávajúci prvok~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~Rozťahovacie prvky~lt~/p~gt~ ~lt~div id="resizable" class="element"~gt~ ~lt~ h3~ gt~Roztiahnuteľný prvok~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~Vyberateľné prvky~lt~/p~gt~ ~lt~ul id="selectable"~gt~ ~lt~li~gt~Položka 1~lt~/li~gt~ ~lt~li~ gt~ Položka 2~lt~/li~gt~ ~lt~li~gt~Položka 3~lt~/li~gt~ ~lt~li~gt~Položka 4~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~Zoskupiteľné prvky~lt~/p~gt~ ~lt ~ul id="triediť"~gt~ ~lt~li~gt~Položka 1~lt~/li~gt~ ~lt~li~gt~Položka 2~lt~/li~gt~ ~lt~li~gt ~Položka 3~lt~/li~gt~ ~lt~li~gt~Položka 4~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/div~gt~ ~lt~script~gt ~ $ ("#zmeniteľná").zmeniteľná(); $("#pretiahnuteľné").pretiahnutie(); $("#droppable").droppable(( drop:function())( $(this).addClass("ui-state-highlight") .find("h3").html("Rozumiem!"); ))); $("#selectable").selectable(); $("#triediť").zaraďovať().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Každá z vyššie uvedených funkcií je usporiadaná do niekoľkých riadkov kódu.

Používateľské rozhranie tiež poskytuje osem doplnkov, ktoré organizujú widgety:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p.titl(clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic) .itLf(float:left; width :280px; výška:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- size:8pt; margin-bottom:25px) #opnDialog(font-size:8pt; margin-bottom:25px) #progressbar(font-size:8pt;) button(font-size:8pt;) #radio(font-size :8pt; okraj-dole:25px) #autocomplete(okraj-dole:25px) #slider(margin-bottom:25px) #datepicker(font-size:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Akordeón~lt~/p~gt~ ~lt~div id=" akordeón"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Sekcia 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ je najväčšie mesto v Škótsku a tretie najľudnatejšie v Spojenom kráľovstve. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Sekcia 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Zmrzlinové vojny v Glasgowe~lt~/i~gt~ - séria konfliktov v škótskom meste Glasgow medzi rivalom drogových dílerov rozvážajúcich svoj tovar v zmrzlinárskych dodávkach. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Časť 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - improvizovaná zbraň futbalových chuligánov, vyrobená zo zrolovaných novín a upnutá v päsť ako olovo.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Časť 4~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div ~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Tabs~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt ~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt ~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1" ~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante , ut pharetra massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Dialógové okno~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Otvoriť okno~lt~/a~gt~ ~lt~div id="dialog" title= "Jednoduché okno"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="Zadajte angličtinu"a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}

Okrem toho je možné použiť pokročilý systém úpravy štýlu používateľského rozhrania jQuery na poskytnutie zaoblených rohov alebo štylizovaných oblastí, napríklad pre systémové varovania alebo chybové hlásenia:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(padding:10px; font:9pt Arial,sans-serif;) p.titl(clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic) ~lt~/ style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~p class="titl"~gt~Štýl správy a zaoblené rohy~lt~/p~gt~ ~lt~div class= "ui-widget" style="float:left;"~gt~ ~lt~div class="ui-state-highlight ui-corner-all" style="padding:0 .7em"~gt~ ~lt~p ~gt~ ~lt~span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~ gt~Hej!~lt~/strong~gt~ Toto je príklad štýlu ui-state-highlight. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="ui-widget" style="float:left; margin-top:15px"~gt ~ ~lt~div class="ui-state-error ui-corner-all" style="padding:0 .7em"~gt~ ~lt~p~gt~ ~lt~span class="ui-icon ui- icon-info" style="float: left; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~gt~Pozor!~lt~/strong~gt~ Toto je príklad štýlu ui-state-error. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl" style="padding-top:25px"~gt~Ikony. ~lt~a href="http://jqueryui.com/themeroller/"~gt~Celý zoznam~lt~/a~gt~~lt~/p~gt~ ~lt~span~gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-circle-zoomin"~gt~~lt~/span~gt~~lt~/a~gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-info"~gt~~lt~/span~gt~~lt~/a~ gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-arrow-4"~gt~~lt~/span~gt~~lt ~/a~gt~ ~lt~b~gt~ . . .~lt~/b~gt~ ~lt~/span~gt~ ~lt~script~gt~ $(.ic").button(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Použitie

Než sa začnete učiť používať jednotlivé pluginy, je dôležité vedieť, ako funguje celá knižnica používateľského rozhrania jQuery.

Ak chcete použiť motív, ktorý si sami prispôsobíte, najprv na tejto stránke vykonajte všetky potrebné nastavenia motívu, potom kliknite na tlačidlo „Stiahnuť motív“ a ocitnete sa na stránke sťahovania knižnice, kde bude motív, ktorý ste upravili uvedené v poli Téma.

Keď sa rozhodnete pre tému a požadované komponenty, na stránke sťahovania musíte kliknúť na Stiahnuť, po čom sa archív stiahne do vášho počítača. Bude obsahovať tri priečinky:

  • css— obsahuje dizajnové súbory (súbor CSS a obrázky).
  • js— obsahuje súbory s používateľským rozhraním jQuery a jQuery.
  • vývojový balík— tento priečinok nie je potrebné nahrávať na stránku, všetok jeho obsah má pomocný charakter. Existuje veľa rôznych súborov s ukážkou pluginu a ďalších pomocných súborov.

Okrem týchto troch priečinkov sa v koreňovom adresári archívu nachádza súbor index.html s ukážkou stiahnutých pluginov (samozrejme, tento súbor nie je potrebné na stránku nahrávať).

Pripojenie používateľského rozhrania k vašej lokalite

Aby používateľské rozhranie jQuery fungovalo na stránkach vášho webu, je potrebné, aby súbor js knižnice jQuery, súbor js používateľského rozhrania jQuery (umiestnený v priečinku js stiahnutého archívu) a obsah priečinka css sú pripojené k stránke (je dôležité, aby sa všetko (obsah css) nachádzalo na hostingu v jednom adresári):

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

To je všetko! Potom môžete na svojej stránke použiť funkcie používateľského rozhrania jQuery. Napríklad použitie jedného riadku kódu javascript na presunutie bežného prvku:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p(color:#888; margin:8px 0 12px 0) #draggable(width:125px; height:125px; padding:0,5em; border:1px solid #ddd; background-color:#eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="draggable"~gt~ ~lt~p ~gt~Preťahovateľný prvok~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#pretiahnuteľný").draggable(); // tento riadok kódu, vďaka ktorému je prvok presúvateľný ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Práca s pluginmi

Všetky doplnky správania a widgetov fungujú podobným spôsobom. Každý doplnok používateľského rozhrania jQuery je reprezentovaný jednou hlavnou metódou, ktorá sa volá na vybraných prvkoch. Jeho názov sa vždy zhoduje s názvom pluginu. Pomocou tejto metódy môžete vytvoriť inštanciu (inštalovať) plugin na prvky, zistiť a zmeniť vlastnosti pluginu, nainštalovať obslužné programy udalostí a tiež spustiť funkcie pluginu, ktoré sa zvyčajne nazývajú metódy (aj keď to nie sú metódy v bežnom zmysle tohto konceptu). ).

Inštancia (inštalácia)

Ak chcete nainštalovať akýkoľvek doplnok na prvky stránky, stačí vybrať potrebné prvky pomocou jQuery a potom na nich zavolať metódu doplnku (názov sa vždy zhoduje s názvom doplnku):

Metódy

Metóda objektu v javascripte zvyčajne znamená funkciu volanú na tento objekt takto:

obj.A(); // volanie metódy A na objekt obj obj.B () ; // volanie metódy B na objekt obj

V rámci práce so špecifickými doplnkami používateľského rozhrania jQuery sa však metódy nazývajú táto forma záznamu:

$("#someId" ) .plaginName ( "názov metódy" , parametre metódy) ;

Napríklad:

Vlastnosti

Každý plugin má množstvo vlastností (ich popis nájdete v dokumentácii príslušných pluginov). Každá vlastnosť môže byť nastavená v čase vytvárania inštancie doplnku. Ak to chcete urobiť, pri inštalácii doplnku na prvok musíte odovzdať objekt s vlastnosťami vo formáte (názov_vlastnosti_1:hodnota_1, názov_vlastnosti_2:hodnota_2, ...):

// vytvorte dialógové okno z prvku s id=someId pomocou // doplnku dialógu a zadajte názov okna $("#someId" ) .dialog (( title: "Message" ) ) ; // pomocou // doplnku datepicker urobte z prvého div na stránke kalendár a zadajte minimálny a maximálny dátum $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDátum: nový Dátum(2013, 1 - 1, 1) );

Okrem toho je možné hodnotu akejkoľvek vlastnosti zistiť alebo zmeniť po vytvorení inštancie doplnku. Ak to chcete urobiť, musíte použiť metódu "možnosť":

// zistiť názov dialógového okna var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // zmeniť nadpis pridaním predpony "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // zmeniť minimálny dátum v kalendári // ktorý je nainštalovaný do prvého prvku div na stránke $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( close : function (event, ui)) (...)));

Vytváranie vlastných pluginov

Okrem usporiadania mnohých pohodlných a intuitívnych doplnkov poskytuje používateľské rozhranie jQuery prostriedok, pomocou ktorého si môžete vytvoriť podobné doplnky sami – UI Widget Factory. Jednou z jeho veľkých výhod je, že organizuje niektoré funkcie OOP, ktoré vám umožňujú upravovať existujúce widgety a vytvárať si vlastné hierarchie widgetov.

Od autora: Zdravím vás priatelia. V tomto článku sa začneme oboznamovať s knižnicou používateľského rozhrania jQuery, ktorá vám umožňuje implementovať na vašom webe veľa zaujímavých hotových riešení: kalendár, akordeón, živé vyhľadávanie, krásne efekty animácie a mnoho ďalšieho. V tomto článku sa naučíme, ako stiahnuť a pripojiť knižnicu používateľského rozhrania jQuery.

Prečo teda potrebujeme knižnicu používateľského rozhrania jQuery? Vlastne, prečo sa potom obraciame na pluginy tretích strán– na inštaláciu a používanie hotových riešení na mieste. Ale knižnica jQuery UI je komplexné riešenie, t.j. tu nenájdete len jednu vec, ale celý balík widgetov, efektov a pluginov pre prácu s rôznymi udalosťami.

Môžete si stiahnuť celý balík alebo vybrať jeden či viac miniaplikácií. Knižnica používateľského rozhrania jQuery obsahuje aj dve desiatky tém pre takmer každý vkus. To je tiež významné plus.

Prejdime od slov k činom: stiahnite si a nainštalujte knižnicu používateľského rozhrania jQuery. Poďme na oficiálnu webovú stránku a prejdite do sekcie Download. Tu môžeme vybrať komponenty na stiahnutie a tému.

JavaScript. Rýchly štart

Naučte sa základy JavaScriptu s praktickým príkladom, ako vytvoriť webovú aplikáciu.

Tému si môžete vybrať z rozbaľovacieho zoznamu v spodnej časti stránky.

Ak si to želáte, môžete si navrhnúť vlastnú tému s vlastným dizajnom, ak to chcete urobiť, stačí kliknúť na odkaz navrhnúť vlastnú tému, ktorý sa nachádza hneď nad rozbaľovacím zoznamom. Na stránke, ktorá sa otvorí, môžeme zmeniť písma, farby a iný dizajn prvkov, pričom zmeny sledujeme online, vo všeobecnosti môžeme navrhnúť vlastnú tému.

Vráťme sa však na predchádzajúcu stránku a stiahnite si všetky komponenty knižnice jQuery UI s témou Base.

Vo výslednom archíve budeme potrebovať súbor štýlov (jquery-ui.css) a súbor skriptu (jquery-ui.js). Oba súbory sú ponúkané v bežnej a komprimovanej verzii, takže si môžete vybrať ktorýkoľvek z nich. No, samozrejme, budete potrebovať knižnicu jQuery, prepojím verziu 1.11.3 s služby Google.

V dôsledku toho bude stránka so všetkými pripojeniami vyzerať takto:

< link rel = "stylesheet" href = "ui/jquery-ui.css" >

Článok je určený používateľom, ktorí s jQuery UI len začínajú pracovať a chcú sa s touto knižnicou zoznámiť v praxi.
Toto rozhranie okna predpokladá také základné vlastnosti, ako je prítomnosť okien, možnosť ich presúvania, možnosť meniť veľkosť okien, minimalizovať/zväčšovať ich atď. Toto by sa malo stať na konci.
Chceme teda vytvoriť príklad interaktívneho webového rozhrania s oknami a možnosť použiť na tento účel používateľské rozhranie jQuery – potom vitajte v kat.

Stručný úvod Tí, ktorí ešte nevedia, čo je používateľské rozhranie jQuery, si o ňom môžu prečítať viac v ruštine na nasledujúcom odkaze. Podoba ruského prekladu dokumentácie predmetnej knižnice bola spomenutá už na javisku Habré .1. – Prípravné. Najprv si stiahnite knižnicu z oficiálnej webovej stránky http://jqueryui.com. Rozhranie má veľa možností prispôsobenia, pre náš príklad budeme potrebovať všetky komponenty a tému Flick.
Po stiahnutí a rozbalení stiahnutých komponentov do počítača získate nasledujúcu štruktúru súborov:

S priečinkami css a js je všetko jasné, ale šablónu pre index.html napíšeme takto: