jQuery korisničko sučelje je biblioteka temeljena na jQueryju koja implementira više od 20 dodataka, uključujući dodatke koji organiziraju različita ponašanja (na primjer, povlačenje ili rastezanje elemenata), osam vrsta widgeta (kao što su kalendar, dijaloški okviri, sustav kartica itd.) i efekte animacije. Osim toga, UI ima nekoliko dizajnerskih tema s kojima su dizajnirani widgeti i koji sadrže skup korisnih ikona (173 komada). Bilo koja od tema dizajna može se prilagoditi izravno na web stranici jQuery UI, neposredno prije učitavanja.

Započnimo

jQuery UI ima pet dodataka za ponašanje, od kojih su neke od mogućnosti predstavljene u nastavku:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~skripta src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~skripta 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 ; visina:200px;) .itRg(float:lijevo; margin-lijevo:70px; visina:200px; širina:200px;) .element(float:lijevo; širina:120px; visina:120px; margina: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( pozadina: #f1d29e;) ​​#selectable .ui-selected(background:#f2c579; boja:bijela;) 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~Povuci i uhvati elemente~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~Element koji se može povlačiti~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~Element za hvatanje~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~Elementi za rastezanje~lt~/p~gt~ ~lt~div id="resizable" class="element"~gt~ ~lt~ h3~ gt~Raztegljivi element~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~Elementi koji se mogu birati~lt~/p~gt~ ~lt~ul id="selectable"~gt~ ~lt~li~gt~Stavka 1~lt~/li~gt~ ~lt~li~ gt~ Stavka 2~lt~/li~gt~ ~lt~li~gt~Stavka 3~lt~/li~gt~ ~lt~li~gt~Stavka 4~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~Grupirani elementi~lt~/p~gt~ ~lt ~ul id="sortable"~gt~ ~lt~li~gt~Stavka 1~lt~/li~gt~ ~lt~li~gt~Stavka 2~lt~/li~gt~ ~lt~li~gt ~Stavka 3~lt~/li~gt~ ~lt~li~gt~Stavka 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("Razumijem!"); ))) $("#selectable").selectable(); $("#sortable").sortable().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Svaka od gore navedenih značajki organizirana je u nekoliko redaka koda.

UI također nudi osam dodataka koji organiziraju widgete:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~skripta src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~skripta 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; visina:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- veličina: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~tijelo~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~Odjeljak 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ je najveći grad u Škotskoj i treći po broju stanovnika u Ujedinjenom Kraljevstvu. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Odjeljak 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Ratovi sladoleda u Glasgowu~lt~/i~gt~ - niz sukoba u škotskom gradu Glasgowu između rivala dileri droge koji svoju robu dostavljaju u kombijima sladoleda. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Odjeljak 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - improvizirano oružje nogometnih huligana, napravljeno od smotanih novina i stegnuto šaka ko olovo.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Odjeljak 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~Dijaloški okvir~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Otvori prozor~lt~/a~gt~ ~lt~div id="dialog" title= "Jednostavan prozor"~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="Unesite engleski"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~ !}

Osim toga, napredni sustav stiliziranja jQuery UI može se koristiti za pružanje zaobljenih kutova ili stiliziranih područja, na primjer, za sistemska upozorenja ili poruke o greškama:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~skripta src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~skripta 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~Stil poruke i zaobljeni kutovi~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~ Ovo je primjer stila 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~Pažnja!~lt~/strong~gt~ Ovo je primjer stila 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~Cijeli popis~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~

Korištenje

Prije nego počnete učiti kako koristiti pojedinačne dodatke, važno je znati kako radi cijela biblioteka jQuery UI.

Ako želite koristiti temu koju sami prilagodite, tada prvo napravite sve potrebne postavke teme na ovoj stranici, zatim kliknite gumb "Preuzmi temu" i naći ćete se na stranici za preuzimanje biblioteke, gdje će biti tema koju ste uredili navedeno u polju Tema.

Nakon što ste se odlučili za temu i potrebne komponente, na stranici za preuzimanje potrebno je kliknuti na Download, nakon čega će se arhiva preuzeti na Vaše računalo. Sadržat će tri mape:

• css— sadrži datoteke dizajna (CSS datoteku i slike).
• js— sadrži datoteke s jQuery i jQuery UI.
• razvojni snop— ovu mapu nije potrebno postavljati na stranicu; sav njen sadržaj je pomoćne prirode. Postoji mnogo različitih datoteka s demonstracijom dodatka i drugih pomoćnih datoteka.

Osim ove tri mape, u korijenu arhive nalazi se datoteka index.html, s demonstracijom preuzetih dodataka (naravno, nema potrebe uploadati ovu datoteku na stranicu).

Povezivanje korisničkog sučelja s vašim web mjestom

Da bi jQuery UI radio na stranicama vaše stranice, potrebno je da js-datoteka jQuery biblioteke, js-datoteka jQuery UI (koja se nalazi u js mapi preuzete arhive) i sadržaj css mape su povezani sa stranicom (važno je da se sve to (css sadržaj) nalazi na hostingu u jednom 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 sve! Tada možete koristiti značajke jQuery UI na svojoj stranici. Na primjer, upotrebom jednog retka javascript koda da bi se obični element mogao povlačiti:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~skripta src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~skripta 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~Element koji se može povlačiti~lt~/p~gt~ ~lt~/div~gt~ ~lt~skripta~gt~ $("#draggable").draggable(); // ovaj redak koda koji čini element povlačećim ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Rad s dodacima

Svi dodaci za ponašanje i widgete rade na sličan način. Svaki jQuery UI dodatak predstavljen je jednom glavnom metodom koja se poziva na odabranim elementima. Njegov naziv uvijek odgovara nazivu dodatka. Pomoću ove metode možete instancirati (instalirati) dodatak na elemente, saznati i promijeniti svojstva dodatka, instalirati rukovatelje događajima i također pokrenuti funkcije dodatka, koje se obično nazivaju metode (iako nisu metode u uobičajenom smislu ovog koncepta ).

instancija (instalacija)

Da biste instalirali bilo koji dodatak na elemente stranice, samo odaberite potrebne elemente koristeći jQuery i zatim pozovite metodu dodatka na njima (čiji naziv uvijek odgovara nazivu dodatka):

Metode

Tipično, metoda objekta u javascriptu znači funkciju koja se poziva na ovaj objekt na sljedeći način:

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

Međutim, u okviru rada s određenim jQuery UI dodacima, metode se nazivaju ovaj oblik snimanja:

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

Na primjer:

Svojstva

Svaki dodatak ima niz svojstava (njihov opis nalazi se u dokumentaciji odgovarajućih dodataka). Svako svojstvo može se postaviti u trenutku instanciranja dodatka. Da biste to učinili, kada instalirate dodatak na element, trebate proslijediti objekt sa svojstvima u formatu (naziv_svojstva_1:vrijednost_1, naziv_svojstva_2:vrijednost_2, ...):

// napravite dijaloški okvir od elementa s id=someId koristeći // dijaloški dodatak i odredite naslov za prozor $("#someId" ) .dialog (( title: "Message" ) ) ; // napravite prvi div na stranici kao kalendar koristeći // dodatak datepicker i navedite minimalni i maksimalni datum $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: novi datum(2013, 1 - 1, 1) ) ;

Osim toga, vrijednost bilo kojeg svojstva može se saznati ili promijeniti nakon instanciranja dodatka. Da biste to učinili, morate koristiti metodu "opcija":

// saznajte naslov dijaloškog okvira var dialogTitle = $("#someId" ) .dialog ("opcija" , "naslov" ) ; // promijenite naslov dodavanjem prefiksa "#1 " $("#someId" ) .dialog ("opcija" , "title" , "#1 " + dialogTitle) // promijenite minimalni datum u kalendaru // koji instaliran je na prvi div na stranici $("div:first" ) .datepicker ("opcija" , "minDate" , novi datum(2008 $("selector") .dialog (( zatvori : funkcija (događaj, ui) ( ... ) ) ;

Izrada vlastitih dodataka

Uz organiziranje mnogih praktičnih i intuitivnih dodataka, jQuery UI pruža sredstvo pomoću kojeg možete sami izraditi slične dodatke - UI Widget Factory. Jedna od njegovih velikih prednosti je to što organizira neke OOP mogućnosti koje vam omogućuju izmjenu postojećih widgeta i stvaranje vlastitih hijerarhija widgeta.

Od autora: Pozdrav prijatelji. U ovom ćemo se članku početi upoznavati s bibliotekom korisničkog sučelja jQuery koja vam omogućuje implementaciju mnogih zanimljivih gotovih rješenja na vašoj web stranici: kalendar, harmonika, pretraživanje uživo, prekrasni efekti animacije i još mnogo toga. U ovom ćemo članku naučiti kako preuzeti i povezati jQuery UI biblioteku.

Dakle, zašto nam je potrebna jQuery UI biblioteka? Zapravo, zašto se onda obraćamo dodaci trećih strana– za instalaciju i korištenje gotovih rješenja na gradilištu. Ali jQuery UI biblioteka je sveobuhvatno rješenje, tj. ovdje nećete pronaći samo jednu stvar, već cijeli paket widgeta, efekata i dodataka za rad s raznim događajima.

Možete preuzeti cijeli paket ili odabrati jedan ili više widgeta. U biblioteku jQuery UI uključeno je i dvadesetak tema za gotovo svačiji ukus. Ovo je također značajan plus.

Prijeđimo s riječi na djelo: preuzmite i instalirajte biblioteku korisničkog sučelja jQuery. Idemo na službenu web stranicu i otvorimo odjeljak Download. Ovdje možemo odabrati komponente za preuzimanje i temu.

JavaScript. Brzi početak

Naučite osnove JavaScripta uz praktični primjer izrade web aplikacije.

Možete odabrati temu s padajućeg popisa na dnu stranice.

Također, ako želite, možete dizajnirati vlastitu temu s vlastitim dizajnom; da biste to učinili, samo kliknite na dizajn prilagođene teme poveznicu koja se nalazi odmah iznad padajućeg popisa. Na stranici koja se otvori možemo mijenjati fontove, boje i drugi dizajn elemenata, promatrajući promjene online, općenito, možemo dizajnirati vlastitu temu.

Ali vratimo se na prethodnu stranicu i preuzmimo sve komponente jQuery UI biblioteke s Base temom.

U dobivenoj arhivi trebat će nam datoteka stila (jquery-ui.css) i datoteka skripte (jquery-ui.js). Obje datoteke se nude u redovnoj i komprimiranoj verziji, tako da možete odabrati bilo koju. Pa, naravno, trebat će vam biblioteka jQuery, ja ću povezati verziju 1.11.3 s Google servis.

Kao rezultat toga, stranica sa svim vezama izgledat će ovako:

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

Članak je namijenjen korisnicima koji tek počinju raditi s jQuery UI i žele se u praksi upoznati s ovom bibliotekom.
Ovo sučelje prozora pretpostavlja takva osnovna svojstva kao što su prisutnost prozora, mogućnost njihovog povlačenja, mogućnost promjene veličine prozora, njihovo smanjivanje/proširivanje, itd. To je ono što bi se na kraju trebalo dogoditi.
Dakle, želimo stvoriti primjer interaktivnog web sučelja s prozorima i mogućnost korištenja jQuery UI za ovu svrhu - onda dobrodošli u cat.

Kratak uvod Oni koji još uvijek ne znaju što je jQuery UI mogu pročitati više o njemu na ruskom slijedeći sljedeću poveznicu. Pojava ruskog prijevoda dokumentacije dotične knjižnice već je spomenuta na pozornici Habré .1. – Pripremni. Najprije preuzmite biblioteku sa službene web stranice http://jqueryui.com. Sučelje ima mnogo opcija za prilagodbu, za naš primjer trebat će nam sve komponente i Flick tema.
Nakon preuzimanja i izdvajanja preuzetih komponenti na vaše računalo, dobit ćete sljedeću strukturu datoteke:

Sve je jasno s mapama css i js, ali ćemo predložak za index.html napisati ovako: