Vozlišče js povezava jquery ui. Uporabniški vmesnik JQuery – vtičnik za samodokončanje. Namestitev razvojne različice knjižnice uporabniškega vmesnika jQuery

uporabniški vmesnik jQuery je knjižnica, ki temelji na jQuery in implementira več kot 20 vtičnikov, vključno z vtičniki, ki organizirajo različna vedenja (na primer vlečenje ali raztezanje elementov), ​​osem vrst pripomočkov (kot je koledar, pogovorna okna, sistem zavihkov itd.) in animacijski učinki. Poleg tega ima uporabniški vmesnik več oblikovalskih tem, s katerimi so oblikovani gradniki in ki vsebujejo nabor uporabnih ikon (173 kosov). Katero koli oblikovno temo je mogoče prilagoditi neposredno na spletnem mestu jQuery UI, tik pred nalaganjem.

Začnimo

Uporabniški vmesnik jQuery ima pet vedenjskih vtičnikov, od katerih so nekatere zmožnosti predstavljene spodaj:

~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:ležeče) .itLf(float:left; width:280px) ; višina: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) #droppable(background-color:#f2c579;) #droppable h3(background-color:#f1d29e;) ​​​​#draggable(width:100px; height:100px;) #selectable .ui-selecting( ozadje: #f1d29e;) ​​#selectable .ui-selected(ozadje:#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~Povleci in ulovi elemente~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~Povlečen element~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~Lovni element~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~Raztezni elementi~lt~/p~gt~ ~lt~div id="resizable" class="element"~gt~ ~lt~ h3~ gt~Raztegljiv element~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~Izbirni elementi~lt~/p~gt~ ~lt~ul id="selectable"~gt~ ~lt~li~gt~Postavka 1~lt~/li~gt~ ~lt~li~ gt~ Postavka 2~lt~/li~gt~ ~lt~li~gt~Postavka 3~lt~/li~gt~ ~lt~li~gt~Postavka 4~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~Elementi, ki jih je mogoče združevati~lt~/p~gt~ ~lt ~ul id="sortable"~gt~ ~lt~li~gt~Postavka 1~lt~/li~gt~ ~lt~li~gt~Postavka 2~lt~/li~gt~ ~lt~li~gt ~Postavka 3~lt~/li~gt~ ~lt~li~gt~Postavka 4~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/div~gt~ ~lt~script~gt ~ $ ("#resizable").resizable(); $("#draggable").draggable(); $("#droppable").droppable(( drop:function())( $(this).addClass("ui-state-highlight") .find("h3").html("Razumem!"); )) ); $("#selectable").selectable(); $("#sortable").sortable().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Vsaka od zgoraj predstavljenih funkcij je organizirana v nekaj vrsticah kode.

Uporabniški vmesnik ponuja tudi osem vtičnikov, ki organizirajo pripomočke:

~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:ležeče) .itLf(float:left; width) :280px; height:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- velikost:8pt; margin-bottom:25px) #opnDialog(font-size:8pt; margin-bottom:25px) #progressbar(font-size:8pt;) button(font-size:8pt;) #radio(font-size :8pt; margin-bottom:25px) #autocomplete(margin-bottom:25px) #slider(margin-bottom:25px) #datepicker(font-size:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~telo~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Harmonika~lt~/p~gt~ ~lt~div id=" harmonika"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Razdelek 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ je največje mesto na Škotskem in tretje najbolj naseljeno mesto v Združenem kraljestvu. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Razdelek 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Sladoledne vojne v Glasgowu~lt~/i~gt~ - niz spopadov v škotskem mestu Glasgow med rivaloma preprodajalci mamil, ki razvažajo svoje blago v kombijih za sladoled. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Razdelek 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - improvizirano orožje nogometnih huliganov, narejeno iz zvitega časopisa in vpeto pest kot svinec.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Razdelek 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~Pogovorno okno~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Odpri okno~lt~/a~gt~ ~lt~div id="dialog" title= "Enostavno 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="Vnesite angleščino"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~ !}

Poleg tega lahko napredni sistem oblikovanja uporabniškega vmesnika jQuery uporabite za zagotavljanje zaobljenih vogalov ali stiliziranih območij, na primer za sistemska opozorila ali sporočila o napakah:

~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:ležeče) ~lt~/ style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~p class="titl"~gt~Slog sporočila in zaobljeni vogali~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~ To je primer sloga 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~ To je primer sloga ui-state-error. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl" style="padding-top:25px"~gt~Ikone. ~lt~a href="http://jqueryui.com/themeroller/"~gt~Celoten seznam~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~

Uporaba

Preden se začnete učiti uporabljati posamezne vtičnike, je pomembno vedeti, kako deluje celotna knjižnica uporabniškega vmesnika jQuery.

Če želite uporabiti temo, ki jo prilagodite sami, najprej na tej strani naredite vse potrebne nastavitve teme, nato kliknite gumb »Prenesi temo« in znašli se boste na strani za prenos knjižnice, kjer bo tema, ki ste jo uredili. označeno v polju Tema.

Ko se odločite za temo in potrebne komponente, morate na strani za prenos klikniti Prenos, nato pa se arhiv prenese na vaš računalnik. Vsebovala bo tri mape:

  • css— vsebuje oblikovne datoteke (CSS datoteko in slike).
  • js— vsebuje datoteke z jQuery in jQuery UI.
  • razvojni sveženj— te mape ni treba naložiti na spletno mesto, vsa njena vsebina je pomožne narave. Obstaja veliko različnih datotek s predstavitvijo vtičnika in drugih pomožnih datotek.

Poleg teh treh map je v korenu arhiva datoteka index.html z demonstracijo prenesenih vtičnikov (te datoteke seveda ni treba naložiti na spletno mesto).

Povezovanje uporabniškega vmesnika z vašim spletnim mestom

Da jQuery UI deluje na straneh vašega spletnega mesta, je potrebno, da js-datoteka jQuery knjižnice, js-datoteka jQuery UI (ki se nahaja v mapi js prenesenega arhiva) in vsebina mape css so povezani s stranjo (pomembno je, da se vsa (css vsebina) nahaja na gostovanju v enem direktoriju):

< 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 vse! Nato lahko na svoji strani uporabite funkcije uporabniškega vmesnika jQuery. Na primer, z uporabo ene vrstice kode javascript, da naredite običajni element vlečen:

~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 trdna #ddd; barva ozadja:#eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="draggable"~gt~ ~lt~p ~gt~Vlečni element~lt~/p~gt~ ~lt~/div~gt~ ~lt~skript~gt~ $("#draggable").draggable(); // ta vrstica kode, ki omogoča vlečenje elementa ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Delo z vtičniki

Vsi vtičniki za obnašanje in pripomočke delujejo na podoben način. Vsak vtičnik uporabniškega vmesnika jQuery je predstavljen z eno glavno metodo, ki se kliče na izbranih elementih. Njegovo ime se vedno ujema z imenom vtičnika. S to metodo lahko ustvarite (namestite) vtičnik na elemente, poiščete in spremenite lastnosti vtičnika, namestite obdelovalce dogodkov in tudi zaženete funkcije vtičnika, ki se običajno imenujejo metode (čeprav niso metode v običajnem pomenu tega pojma ).

Instancija (namestitev)

Če želite namestiti kateri koli vtičnik na elemente strani, preprosto izberite potrebne elemente z jQuery in nato na njih pokličite metodo vtičnika (katere ime se vedno ujema z imenom vtičnika):

Metode

Običajno metoda predmeta v javascriptu pomeni funkcijo, ki je klicana za ta objekt, kot sledi:

obj.A(); // klic metode A na objektu obj obj.B () ; // klic metode B na objektu obj

Vendar se v okviru dela s posebnimi vtičniki uporabniškega vmesnika jQuery metode imenujejo ta oblika zapisa:

$("#someId" ) .plaginName ( "ime metode" , parametri metode) ;

Na primer:

Lastnosti

Vsak vtičnik ima več lastnosti (njihove opise najdete v dokumentaciji ustreznih vtičnikov). Vsako lastnost je mogoče nastaviti ob instanci vtičnika. Če želite to narediti, morate pri namestitvi vtičnika na element posredovati objekt z lastnostmi v formatu (ime_lastnosti_1:vrednost_1, ime_lastnosti_2:vrednost_2, ...):

// ustvarite pogovorno okno iz elementa z id=someId z // pogovornim vtičnikom in določite naslov za okno $("#someId" ) .dialog (( title: "Message" ) ) ; // naredite prvi div na strani koledar z // vtičnikom datepicker in določite najnižji in najvišji datum $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: nov datum (2013, 1 - 1, 1) ) ;

Poleg tega je mogoče ugotoviti ali spremeniti vrednost katere koli lastnosti, potem ko je vtičnik nameščen. Če želite to narediti, morate uporabiti metodo "možnost":

// poiščite naslov pogovornega okna var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // spremenite naslov z dodajanjem predpone "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // spremenite minimalni datum v koledarju // ki je nameščen v prvi div na strani $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector") .dialog (( close : function (event, ui) ( ... ) ) ;

Ustvarjanje lastnih vtičnikov

Poleg organiziranja številnih priročnih in intuitivnih vtičnikov jQuery UI ponuja sredstvo, s katerim lahko sami izdelate podobne vtičnike – tovarno pripomočkov uporabniškega vmesnika. Ena njegovih velikih prednosti je, da organizira nekatere zmožnosti OOP, ki vam omogočajo spreminjanje obstoječih gradnikov in ustvarjanje lastnih hierarhij gradnikov.

Od avtorja: Lep pozdrav, prijatelji. V tem članku se bomo začeli seznanjati s knjižnico uporabniškega vmesnika jQuery, ki vam omogoča, da na svojem spletnem mestu implementirate številne zanimive že pripravljene rešitve: koledar, harmoniko, iskanje v živo, čudovite animacijske učinke in še veliko več. V tem članku se bomo naučili, kako prenesti in povezati knjižnico uporabniškega vmesnika jQuery.

Zakaj torej potrebujemo knjižnico uporabniškega vmesnika jQuery? Pravzaprav, zakaj se potem obračamo na vtičniki tretjih oseb– za namestitev in uporabo že pripravljenih rešitev na mestu. Toda knjižnica uporabniškega vmesnika jQuery je celovita rešitev, tj. tukaj ne boste našli le ene stvari, ampak cel paket pripomočkov, učinkov in vtičnikov za delo z različnimi dogodki.

Lahko prenesete celoten paket ali izberete enega ali več pripomočkov. V knjižnico uporabniškega vmesnika jQuery je vključenih tudi dva ducata tem za skoraj vsak okus. Tudi to je pomemben plus.

Preidimo od besed k dejanjem: prenesite in namestite knjižnico uporabniškega vmesnika jQuery. Pojdimo na uradno spletno stran in se obrnemo na razdelek Prenos. Tukaj lahko izberemo komponente za prenos in temo.

JavaScript. Hiter začetek

Naučite se osnov JavaScripta s praktičnim primerom, kako ustvariti spletno aplikacijo.

Temo lahko izberete s spustnega seznama na dnu strani.

Če želite, lahko tudi oblikujete svojo temo s svojim dizajnom; to storite tako, da preprosto kliknete povezavo za oblikovanje teme po meri, ki se nahaja tik nad spustnim seznamom. Na strani, ki se odpre, lahko spremenimo pisave, barve in drugo obliko elementov, opazujemo spremembe na spletu, na splošno lahko oblikujemo lastno temo.

Toda vrnimo se na prejšnjo stran in prenesite vse komponente knjižnice uporabniškega vmesnika jQuery s temo Base.

V nastalem arhivu bomo potrebovali slogovno datoteko (jquery-ui.css) in skriptno datoteko (jquery-ui.js). Obe datoteki sta na voljo v navadni in stisnjeni različici, tako da lahko izberete eno. No, seveda boste potrebovali knjižnico jQuery, jaz bom povezal različico 1.11.3 z Googlova storitev.

Posledično bo stran z vsemi povezavami videti takole:

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

Članek je namenjen uporabnikom, ki šele začenjajo delati z uporabniškim vmesnikom jQuery in se želijo s to knjižnico seznaniti v praksi.
Ta okenski vmesnik prevzame tako osnovne lastnosti, kot so prisotnost oken, možnost njihovega vlečenja, možnost spreminjanja velikosti oken, njihovega minimiziranja/razširjanja itd. To se mora zgoditi na koncu.
Želimo torej ustvariti primer interaktivnega spletnega vmesnika z okni in možnost uporabe uporabniškega vmesnika jQuery za ta namen - potem dobrodošli v cat.

Kratek uvod Tisti, ki še vedno ne vedo, kaj je uporabniški vmesnik jQuery, lahko preberete več o tem v ruščini na naslednji povezavi. Pojav ruskega prevoda dokumentacije obravnavane knjižnice je bil že omenjen na odru Habré .1. – Pripravljalni. Najprej prenesite knjižnico z uradnega spletnega mesta http://jqueryui.com. Vmesnik ima veliko možnosti za prilagajanje, za naš primer bomo potrebovali vse komponente in temo Flick.
Po prenosu in ekstrahiranju prenesenih komponent v računalnik boste dobili naslednjo strukturo datotek:

Z mapama css in js je vse jasno, vendar bomo predlogo za index.html napisali takole: