Što je jquery korisničko sučelje. Uvod u jqueryui

Biblioteka jQuery UI (korisničko sučelje) skup je elemenata predložaka za izradu korisničkog sučelja i dio je biblioteke jQuery. Korisničko sučelje odnosi se na interakciju između korisnika i web stranice.

Glavni cilj jQuery UI biblioteke je olakšati život web programerima kako ne bi gubili vrijeme na obavljanje istovrsnih zadataka. JavaScript skripte koje se najčešće nalaze na web stranicama prikupljene su u jednu biblioteku, a programeri samo trebaju uzeti i primijeniti potrebne parametre i metode. Razvoj korisničkih sučelja postao je mnogo brži.

Kalendari, klizači i skočni prozori koji se koriste na web stranicama već su postali obvezni atribut. Pa zašto programer svaki put mora pisati kod od nule? Kada može prilagoditi gotov predložak i koristiti ga na svojoj web stranici.

Službena web stranica: https://jqueryui.com/

jQuery UI biblioteka može se preuzeti na vaše računalo ili povezati putem CDN veze.

Imate dvije mogućnosti za preuzimanje biblioteke.

Definitivno ne trebate preuzimati cijelu biblioteku ako namjeravate koristiti samo neke pojedinačne komponente. Na stranici Download Builder poništite sve okvire osim komponenti koje su vam potrebne. Na primjer, ako vam je potreban samo widget za harmoniku, stavite kvačicu u potvrdni okvir pored njega i stranica će vam reći koji će vam elementi biti potrebni za rad. Potvrdni okviri će se automatski postavljati tamo gdje je potrebno i nećete preuzimati nepotrebne datoteke, što će pozitivno utjecati na brzinu učitavanja stranice.

Prije nego što kliknete gumb za preuzimanje, odaberite prikladnu temu za prekrasan dizajn komponenti. Vizualni dizajn gotovih tema možete pogledati u odjeljku Tema/Galerija.

Da biste već ugradili komponente u stilizirano web mjesto, dizajner tema je prikladniji za vas - ThemeRoller, idite na odjeljak Tema. Kada promijenite izgled upravljačke ploče, odmah ćete vidjeti kako svi widgeti izgledaju. Nakon što završite s izradom izgleda elementa, kliknite na gumb za preuzimanje i preuzmite samo odabrane elemente i temu, što je vrlo zgodno.

Situacija u kojoj vam treba cijela biblioteka malo je vjerojatna, osim ako ne pogledate izvorni kod. Za preuzimanje pune najnovije verzije kliknite na gumb: Stabilna.

Preuzeta biblioteka povezuje se na isti način kao i putem CDN-a, s jedinom razlikom što će URL-ovi poveznica voditi do mape u koju ste postavili te datoteke na svom hostingu.

U odjeljku Demos možete jasno vidjeti koji se zadaci (demo primjeri) na stranici mogu riješiti pomoću knjižnice.

Pogledajmo primjer widgeta - Tooltip. Svrha ovog widgeta je lijepo otvoriti opis alata naveden u atributu naslova.

HTML strukturu stvaramo kao i obično. U stavku p postavljamo polje za unos vaše dobi - unos. U tekstualnom polju specificiramo atribut naslova s ​​tekstom "Molimo navedite svoju dob". Na ovaj element primijenit ćemo widget s opisom alata.

Tvoje godine:

Nakon učitavanja DOM stabla, na objektu dokumenta ćemo pozvati metodu tooltip. Pristupamo cijeloj stranici (dokumentu) odjednom kako bi se ova metoda mogla primijeniti na ostale elemente stranice. Nakon pozivanja metode opisa alata, vrijednosti atributa naslova bit će prikazane u opisu alata.

Prvo pitanje koje se postavlja kada počnete raditi s jQuery bibliotekom je kako ga povezati? Čudno je da o tome nisam ranije pisao, a sada sam odlučio popuniti ovu prazninu.

U ovom članku ću vam reći kako ispravno dodati jQuery na običnu html web stranicu i na popularne motore.

Najčešći način povezivanja knjižnice. Najprije morate preuzeti najnoviju verziju s web stranice razvojnog programera. Stranica za preuzimanje predstavlja nekoliko opcija biblioteke, na primjer, sada nudi preuzimanje "Komprimirani, proizvodni jQuery 3.1.1" i "Nekomprimirani, razvojni jQuery 3.1.1". Prva opcija je komprimirana verzija biblioteke, iz nje su uklonjeni svi komentari, u ovom slučaju biblioteka zauzima mnogo manje prostora, stoga će se stranica na koju će biti povezana brže učitati. Druga opcija je, grubo rečeno, izvorni kod biblioteke, strukturiran je u lako čitljivom obliku s komentarima i namijenjen je prvenstveno programerima. Stoga preporučujem korištenje komprimirane verzije biblioteke.

Nakon preuzimanja biblioteke, trebate je postaviti na poslužitelj na kojem se nalaze datoteke stranice. Obično kreiram mapu “js” u korijenu stranice u koju kopiram potrebne biblioteke i tamo smjestim datoteku sa svojim funkcijama.

Sada možete ići izravno na jQuery vezu. Struktura web stranice na koju povezujete jQuery može varirati. Ali mora sadržavati HTML, HEAD i BODY oznake. Dakle, da biste povezali jQuery, morate dodati oznaku SCRIPT s vezom na biblioteku unutar oznake HEAD.

Naslov stranice

U nekim slučajevima biblioteka je uključena prije završne oznake tijela, što je povezano s redoslijedom kojim preglednik obrađuje HTML stranicu. Budući da preglednik uzastopno čita retke, prilikom povezivanja jQueryja na kraju datoteke, preglednik će prvo prikazati web mjesto, a zatim povezati dinamiku. Uz sporu vezu, ovaj pristup osigurava povećanje brzine učitavanja stranice, a tek onda rad klizača i ostalo. Kod za ovu vezu izgleda ovako:

Naslov stranice

Pažnja! Preporučljivo je ne mijenjati naziv datoteke jQuery biblioteke (često se mijenja u jquery.js), jer će vam ubuduće spremanje službenog naziva datoteke pomoći da vidite koju verziju biblioteke koristite (u mom primjeru, verzija 3.1 .1 se koristi).

Ova metoda je dobra jer je knjižnica povezana s web stranice i ne leži na vašem tvrdom disku. To posebno vrijedi za veliki broj malih projekata i za obuku.

Ova metoda povezivanja naziva se "Povezivanje s CDN-om". Mreža za isporuku sadržaja, ili kako se češće naziva CDN (Content Delivery Network), mreža je poslužitelja diljem svijeta. Oni pomažu u poboljšanju performansi vašeg web poslužitelja i smanjuju opterećenje vašeg prometa.

Najpopularniji CDN-ovi za povezivanje jQueryja:

Obično koristim vezu s Google Developers. Nekoliko isječaka već je pripremljeno za nas na stranici projekta; samo kopirajte redak onoga koji nam je potreban i uključite ga u datoteku. Kod ove metode povezivanja kod će izgledati ovako:

Naslov stranice

Prednost ove metode je u tome što mnoga mjesta povezuju jQuery putem Google API-ja, što znači da je ova biblioteka s velikom vjerojatnošću već prisutna u predmemoriji preglednika korisnika i neće se uopće učitati drugi put.

jQuery je automatski uključen u WordPress, tako da nema potrebe za ručnim uključivanjem biblioteka iz drugih verzija. To se događa u predlošku pomoću php koda:

To će rezultirati jQuery nizom veze unutar oznake HEAD.

U vrijeme pisanja, jQuery v1.12.4 dolazi s WordPressom, ali, kao što vidite, verzija biblioteke je vrlo različita od one uključene u gornjim primjerima. Moguće je spojiti najnoviju verziju biblioteke, ali postoji mogućnost sukoba.

Kako biste izbjegli sukob, ali i dalje koristili verziju biblioteke koja je potrebna, trebate upotrijebiti ispravan način za uključivanje jQuery u datoteku functions.php:

Instaliranje jQuery UI biblioteke

Preuzimanje i instaliranje jQuery UI biblioteke na neki je način teže od drugih JavaScript biblioteka. Ovaj proces nije baš naporan, ali zahtijeva objašnjenje, čemu je i posvećen ovaj članak. Da biste prošli kroz primjere, samo ćete morati instalirati razvojnu verziju biblioteke, ali sljedeće također opisuje kako instalirati minimizirane datoteke usmjerene na produkcijsku implementaciju i kako koristiti jQuery UI preko mreža za distribuciju sadržaja (CDN).

Proces učitavanja jQuery UI biblioteke malo je složeniji od ostalih JavaScript biblioteka, ali rezultati će biti vrijedni truda. Biblioteka korisničkog sučelja jQuery pokriva pet područja funkcionalnosti, a data vam je mogućnost da sami konfigurirate arhivu za pokretanje, uključujući samo potrebne komponente. Ovaj dio će vas upoznati sa svim značajkama jQuery UI biblioteke, ali kada radite sa stvarnim web aplikacijama, možete eliminirati nepotrebne komponente kako biste smanjili veličinu biblioteke koju učitavaju preglednici.

Prije nego počnete stvarati vlastitu jQuery UI biblioteku, morate odabrati temu. Biblioteka korisničkog sučelja jQuery nudi mnoštvo opcija i opcija konfiguracije, što olakšava promjenu izgleda bilo kojeg alata koji koristite. Zapravo, broj dostupnih izbora je toliko velik da je ponekad doista neodoljiv.

Na web stranici jQuery UI možete koristiti usluge posebne aplikacije - theme customizer (Themeroller), ali uz to postoji i čitava galerija unaprijed definiranih tema, potpuno spremnih za korištenje, među kojima možete odabrati onu koja vam odgovara većinu i time si olakšati život.

Započnite posjetom jqueryui.com i kliknite na gumb Teme. Ovo će otvoriti stranicu ThemeRoller, prikazujući jQuery UI widgete i ploču s postavkama lijevo od njih, pomoću koje možete postaviti opcije teme, kao što je prikazano na slici:

Ako već imate određeni vizualni stil kojeg se morate pridržavati i želite da vizualno sučelje JQuery UI alata bude u skladu s ostatkom web mjesta ili aplikacije, tada je kartica Roll Your Own (koja je odabrana prema zadanim postavkama ) je upravo to potrebno. Možete promijeniti bilo koji aspekt dizajna pomoću skupa CSS stilova koji koristi jQuery UI biblioteka.

Da biste dobili jednu od gotovih tema, idite na karticu Galerija. U vrijeme pisanja, galerija uključuje 24 teme, pokrivajući širok raspon mogućnosti boja - od prigušenih i suptilnih tonova do svijetlih i provokativnih. Dok kliknete na teme galerije, izgled widgeta prikazanih na ostatku stranice ažurirat će se u skladu s tim, dajući vam okus kako bi aplikacija mogla izgledati:

Zadana tema koja se koristi za jQuery UI zove se UI lightness, ali ova tema nema dovoljno kontrasta, pa ću upotrijebiti temu Sunny, koja izgleda malo bolje. Jedino što se sada od vas traži je zapamtiti naziv teme koja vam odgovara.

Nakon što ste odabrali temu, možete početi stvarati vlastitu jQuery UI biblioteku za preuzimanje. Pritisnite gumb Preuzmi na vrhu stranice da biste otišli na stranicu Download Builder. Vidjet ćete popis jQuery UI komponenti podijeljenih u četiri funkcionalne grupe: UI Core, Interactions, Widgets i Effects.

Odabirom samo značajki koje vaš projekt zapravo treba, smanjit ćete veličinu skupa datoteka koje preglednici moraju preuzeti. To samo po sebi nije loša ideja, ali ja imam drugačiji pristup. S moje točke gledišta, puno je bolje uštedjeti dio vaše komunikacijske širine pojasa i rasteretiti zadatak isporuke jQuery UI preglednicima na jednu od mreža za distribuciju sadržaja, o čemu ćemo kasnije raspravljati.

Za izvođenje primjera trebat će vam sve komponente, pa provjerite jesu li označeni svi okviri.

Postoje ovisnosti između nekih komponenti na popisu, ali možda nećete razmišljati o tome dok stvarate vlastitu verziju biblioteke. Ako odaberete komponentu, sve komponente o kojima ona ovisi bit će učitane u isto vrijeme.

Sljedeći korak je odabir teme. To se radi pomoću padajućeg popisa koji se nalazi na dnu stranice, kao što je prikazano na slici:

Također imate mogućnost odabrati određenu verziju biblioteke korisničkog sučelja jQuery koja će biti uključena u arhivu za preuzimanje. Morat ćete preuzeti stabilnu verziju, koja radi sa svim verzijama jQuery biblioteke počevši od verzije 1.3.2.

Nakon odabira svih komponenti te odabira teme i stabilne verzije, preuzmite prilagođenu arhivu za preuzimanje jQuery UI biblioteke koju ste izradili klikom na gumb Preuzmi.

Preuzimanje jQuery UI sadrži sve datoteke potrebne za korištenje biblioteke u razvoju i proizvodnji. Za rad s primjerima trebat će vam datoteke koje sadrže nekomprimirani izvorni kod i namijenjene su za korištenje tijekom razvoja. Ako naiđete na bilo kakve probleme, možete jednostavno ispitati kôd kako biste se upoznali s unutarnjim radom biblioteke korisničkog sučelja jQuery, što će biti neprocjenjivo u otklanjanju pogrešaka u vašim skriptama.

Trebali biste kopirati sljedeće datoteke i mape u mapu primjera datoteka:

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

folder development-bundle\themes\sunny\images.

Nazivi datoteka JavaScript i CSS uključuju broj verzije učitanog izdanja biblioteke. U mom slučaju ovo je verzija 1.10.3. jQuery UI biblioteka je u aktivnom razvoju i možda ćete moći preuzeti noviju verziju od 1.10.3.

Sve što sada morate učiniti je uključiti jQuery UI biblioteku u svoj HTML dokument. To možete učiniti dodavanjem elemenata skripte i veze u svoj dokument koji sadrži veze na JavaScript i CSS datoteke koje ste prenijeli, kao što je prikazano u primjeru u nastavku:

jQuery biblioteka

Nije potrebno izravno se povezati s mapom slika. Sve dok su mapa sa slikama i CSS datoteka na mjestu, jQuery UI moći će samostalno pronaći sve potrebne resurse.

jQuery UI biblioteka ovisi o jQuery biblioteci. Da biste koristili jQuery UI u dokumentu, prvo morate biti povezani s njim. jQuery UI biblioteka nije samostalna biblioteka.

Dokument prikazan u gornjem primjeru sadrži jednostavan test za provjeru je li jQuery UI biblioteka ispravno uključena. Ako se stranica otvori normalno, trebali biste vidjeti gumb sličan ovom prikazanom na slici. Za sada zanemarite poziv metode button() na elementu skripte. Čemu je namijenjen i kako radi saznat ćete u sljedećem članku.

Ako pogrešno napišete put do bilo koje od dvije biblioteke, vidjet ćete jednostavnu vezu umjesto toga.

Nakon što završite s razvojem svoje web aplikacije i spremni ste je implementirati, možete koristiti umanjene verzije datoteka uključenih u arhivu za preuzimanje. Te su datoteke manje veličine, ali njihov sadržaj neće biti lako pročitati ako je potreban za potrebe otklanjanja pogrešaka. Da biste koristili verzije datoteka za implementaciju, kopirajte sljedeće datoteke i mape u direktorij web poslužitelja:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

folder css\sunny\images

Mapa sa slikama i CSS datoteka ovdje su iste kao u razvojnoj verziji; promjene mogu utjecati samo na JavaScript datoteku. Za izvođenje čiste instalacije jednostavno kopirajte te datoteke u direktorij poslužitelja.

Pitanje korištenja CDN-a za učitavanje jQuery biblioteke već je spomenuto ranije. Ako ste ljubitelj ovog pristupa, bit će vam drago znati da možete učiniti istu stvar s jQuery UI bibliotekom. I Google i Microsoft pružaju hosting jQuery UI datoteka na svojim CDN-ovima. Za naš osnovni primjer, koristim Microsoftovu uslugu jer pruža i jQuery UI JavaScript datoteke i standardne skinove.

Da biste koristili CDN, morate imati URL-ove datoteka koje su vam potrebne. Ako je ovo Microsoftova usluga, idite na stranicu Microsoft Ajax Content Delivery Network. Dok se pomičete prema dolje po stranici, vidjet ćete popis poveznica koje odgovaraju različitim verzijama jQuery UI. Kliknite na poveznicu za verziju koju koristite (u mom slučaju to je verzija 1.10.3). Vidjet ćete URL-ove za uobičajene i umanjene verzije datoteke biblioteke korisničkog sučelja jQuery.

Ostatak stranice prikazuje unaprijed izrađene teme, s URL-om CSS datoteke ispod svake teme.

Da biste te datoteke povezali sa svojim dokumentom putem CDN-a, jednostavno postavite skriptu i elemente veze u odgovarajuće URL-ove umjesto poveznica na lokalne jQuery UI datoteke, kao što je prikazano u primjeru u nastavku:

jQuery biblioteka $(funkcija() ( $("a").button(); )); Posjetite web stranicu www.professorweb.ru

Opet, znak da su URL-ovi ispravno navedeni bit će prikaz gumba na stranici koja se otvara, sličnog onom prikazanom na gornjoj slici.

Uvod u jQuery UI biblioteku za izgradnju korisničkih sučelja. Kratke upute za početnike.

jQuery UI (s engleskog) jQuery korisničko sučelje) je biblioteka widgeta i interakcija izgrađena na temelju jQuery JavaScript biblioteke koja se može koristiti za stvaranje vrlo interaktivnih web aplikacija.

Kako biste se vizualno upoznali s mogućnostima jQuery UI biblioteke, posjetite stranicu: Demos & Documentation - na web stranici jqueryui.com.

Sada kada razumijete što je jQuery UI, možete početi birati komponente potrebne za učitavanje: UI Core (glavne funkcije UI), Interactions (interakcije), Widgets (widgeti), Effects (efekti) i Theme (teme dizajna) - čime stvarate vlastitu kopiju jQuery UI biblioteke. Da biste to učinili, posjetite stranicu: Build Your Download. Tamo možete brzo preuzeti najnoviju stabilnu ili naslijeđenu verziju jQuery UI biblioteke.

ZIP arhiva jQuery UI biblioteke koju ste preuzeli sadržavat će sljedeće:

Za povezivanje jQuery UI biblioteke obično su dovoljne tri veze: UI tema CSS, jQuery biblioteka i jQuery UI. To bi moglo izgledati ovako:

Nakon što uključite potrebne datoteke, možete početi dodavati potrebne widgete na svoju stranicu. Na primjer, da napravite DatePicker (od engleskog. izbor datuma, dodajte tekstualnu grupu:

I također JavaScript kod:

$(funkcija())( $("#datum").datepicker(); ));

Rezultat preglednika koji tumači gornji primjer izgledat će ovako:

jQuery UI je prilagodljiv na nekoliko načina. Već znate kako možete učitati svoju kopiju jQuery UI biblioteke s komponentama koje su vam potrebne, ali postoje i druge opcije za prilagodbu ovog koda za njegovu implementaciju.

Korištenje opcija. Svaka komponenta u jQuery UI ima niz zadanih postavki. U isto vrijeme, uvijek ih možete promijeniti pomoću "opcije" (od engleskog. opcija), prosljeđujući potrebnu vrijednost komponenti.

Na primjer, kako biste postavili format datuma za widget DatePicker, možete koristiti opciju: dateFormat.

$("#date").datepicker(( dateFormat: "yy-mm-dd" ));

Možete dobiti vrijednost opcije nakon što se widget pokrene na sljedeći način:

var dateFormat = $("#date").datepicker("opcija", "dateFormat");

Možete navesti vrijednost opcije nakon pokretanja widgeta na sljedeći način:

$("#datum").datepicker("opcija", "format datuma", "gg-mm-dd");

Vizualna prilagodba. Za prilagodbu vlastite teme, jQuery UI uključuje ThemeRoller, koji vam omogućuje vizualnu prilagodbu komponenti vašeg sučelja. Možete koristiti i saznati više o ovom alatu ako posjetite stranicu:

Dugo nisam ništa napisao na blogu i konačno sam odvojio malo vremena za razgovor o widgetu Autocomplete, koji je bio uključen u jQuery UI, dodatak za jQuery JavaScript biblioteku.

Widget za automatsko dovršavanje pomaže organizirati popis podudarnih vrijednosti dok korisnik ispunjava polje za unos.

Najprije posjetimo stranicu na web stranici jQuery UI kako bismo dobili datoteke koje su nam potrebne. Kliknemo na poveznicu Deselect all component kako ne bismo preuzimali nepotrebne stvari, a zatim izaberemo samo ono što nam treba - označimo potvrdni okvir Autocomplete i vidimo da su uz njega označeni potvrdni okviri Core, Widget i Position. Widget za automatsko dovršavanje ovisi o funkcioniranju ovih datoteka.

Osim toga, s desne strane nalazi se padajući popis na kojem možete odabrati svoju omiljenu temu dizajna. Ako je sve spremno, kliknite gumb Preuzmi i preuzmite arhivu. Mogućnosti widgeta mogu se procijeniti na web stranici programera. Pokušat ću objasniti na ruskom i što jednostavnijim jezikom kako to sve funkcionira.

Dakle, prvo u odjeljku HEAD morat ćete povezati nekoliko datoteka koje se nalaze u arhivi.

Prvo smo uključili datoteku stiliziranja widgeta, zatim datoteku jQuery biblioteke. Treća uključena datoteka potrebna je za implementaciju automatskog dovršetka.

Widget za automatsko dovršavanje ne zahtijeva složeno HTML označavanje. Dovoljno je samo polje za unos teksta, tj. regularni ulazni element koji ima tekstualnu vrijednost u svom atributu tipa. Dodatne oznake mogu se dodati kako biste ga stilizirali prema odabranoj temi.

Oznake:

Prvo, pogledajmo najjednostavniji slučaj korištenja widgeta - kada se lokalni podaci koriste za generiranje popisa savjeta.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Shema"]; ("#tags").autocomplete(( izvor: availableTags ));

U varijabli availableTags pripremljen je niz sa savjetima. Zatim smo odabrali ulazni element prema njegovom identifikatoru i primijenili metodu autocomplete, kojoj je odmah proslijeđen objekt s postavkama. Za sada je ovo objekt s jednim svojstvom, izvorom, koji specificira izvor podataka. U našem slučaju navedeno je polje availableTags.

Zapravo, widget možemo malo prilagoditi koristeći druga svojstva objekta postavki. Evo popisa ovih svojstava:

izvor – opcija nema zadanu vrijednost i mora se definirati. Vrijednost opcije može biti niz, polje ili funkcija. U svakom slučaju, izvor podataka mora biti naveden u ovoj opciji.
minLength - zadana vrijednost je 1. Ova opcija određuje broj znakova koji se moraju unijeti u polje za unos prije nego što se aktiviraju opisi alata. Vrijednost 0 korisna je kada koristite lokalne podatke za popise s više pozicija. Ovu vrijednost treba povećati kada se koriste zahtjevi poslužitelju za dobivanje podataka i kada se koriste velike liste, gdje jedan uneseni znak može odgovarati nekoliko tisuća stavki.
odgoda – zadana vrijednost je 300. Ova opcija određuje broj milisekundi koji mora proći nakon pritiska na sljedeću tipku da bi se zahtjev za primanje podataka aktivirao. Vrijednost nula ima smisla kada se koriste lokalni podaci. Kada koristite upite poslužitelja, nula vrijednost u ovoj opciji može uzrokovati ozbiljno opterećenje.
appendTo – zadana vrijednost 'tijelo'. Vrijednost ove opcije može biti jQuery selektor. Određuje kojem elementu treba dodati padajući popis alata.
onemogućeno – zadana vrijednost je false. Ako je postavljeno na true, funkcionalnost widgeta Autocomplete neće biti dostupna nakon inicijalizacije, ali se može omogućiti kasnije, na primjer, kada se ispuni neki uvjet.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Shema"]; ("#tags").autocomplete(( izvor: availableTags, select: function(event, ui) ( alert("Event: " + event.type + ",\nvalue: " + ui.item.value); ) ) ));

Ovdje smo dodali svojstvo odabira, gdje smo definirali funkciju koja će biti pozvana kada korisnik odabere vrijednost s popisa opisa alata. funkcija prima dva argumenta: prvi je objekt događaja, drugi je poseban ui objekt. Organiziranjem pristupa svojstvima ovih objekata možete dobiti korisne informacije (prikazujemo ih u prozoru upozorenja).

Ovo nije jedini događaj na koji widget može odgovoriti - ovdje je njihov potpuni popis, koji prikazuje naziv svojstva u objektu s postavkama, naziv događaja u event.type i opis događaja:

stvoriti – Događaj autocompletecreate događa se u trenutku inicijalizacije.
pretraga – događaj automatsko dovršavanje pretraživanja događa prije izvršenja zahtjeva. Ako funkcija definirana u ovoj opciji vrati false, zahtjev neće biti poslan.
open – događaj autocompleteopen događa se u trenutku kada se otvori padajući popis savjeta.
fokus – događaj autocompletefocus događa se kad god jedna od stavki popisa savjeta dobije fokus.
odaberite - događaj autocompleteselect događa se kada je odabrana jedna od stavki popisa savjeta.
close – događaj autocompleteclose događa se kada je popis savjeta zatvoren. Događaj se događa neovisno o tome je li jedna od stavki odabrana ili ne.
promjena – događaj autocompletechange pojavljuje se nakon odabira jedne od stavki popisa. Događaj se uvijek događa nakon zatvaranja.

Widget također ima neke metode pomoću kojih možete dodatno proširiti njegovu funkcionalnost.

Na primjer, dodajte nekoliko gumba u HTML oznake:

Traži "kao" Zatvori oznake:

A ovdje je JS kod:

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Shema"]; ("#tags").autocomplete(( source: availableTags, minLength: 0 )); $("#search").click(function())( $("#tags").autocomplete("search", " kao "); )); $("#close").click(function())( $("#tags").autocomplete("close"); )); ));

Sada, klikom na gumb Traži "kao", možemo simulirati radnje korisnika kao da je unio znakove "kao" u element unosa. Klikom na gumb Zatvori zatvaramo popis savjeta, ako je prethodno otvoren.

U nastavku su opisi svih dostupnih metoda:

uništi – .autocomplete('destroy') u potpunosti uklanja sve funkcije widgeta za automatsko dovršavanje. Vraća elemente u stanje prije inicijalizacije.
onemogući – .autocomplete(‘disable’) privremeno onemogućuje sve funkcije widgeta. Možete ga ponovno omogućiti pomoću metode omogućivanja.
enable – .autocomplete('enable') dopušta korištenje svih funkcionalnosti widgeta ako je prethodno onemogućeno metodom onemogućavanja.
option – .autocomplete('option', optionName, ) pomoću ove metode možete postaviti vrijednost bilo koje opcije widgeta nakon inicijalizacije.
option – .autocomplete('option', optionName) pomoću ove metode možete dobiti vrijednost bilo koje opcije widgeta nakon inicijalizacije.
widget – .autocomplete('widget') Ova se metoda može koristiti za pristup objektu koji predstavlja element s funkcijom Autocomplete.
pretraživanje – .autocomplete('search, ') Koristeći ovu metodu, možete otvoriti cijeli popis bez prosljeđivanja drugog parametra. Ako proslijedite niz znakova u drugom parametru, otvorit će se popis s odgovarajućim savjetima.
zatvori – .autocomplete(‘close’) zatvara popis alatnih opisa ako je prethodno otvoren.

Općenito, sada znamo kako konfigurirati i upravljati widgetom, ali do sada smo koristili isključivo lokalne podatke za generiranje popisa savjeta. Pogodno je za istraživanje mogućnosti, ali malo vjerojatno za pravi rad. U stvarnom radu, vjerojatno ćete morati generirati savjete iz podataka pohranjenih na vašem vlastitom poslužitelju, a možda uopće ne sami.

Izvorna opcija, koja je, da vas podsjetim, obavezna i definira izvor podataka, također može prihvatiti liniju koja sadrži url na koji treba poslati zahtjev. A u izvoru možete definirati vlastitu funkciju koja će raditi ono što trebate. Ovo je možda najfleksibilnija metoda koju ćemo analizirati. Pokušajmo dobiti neke podatke s geonames.org poslužitelja u obliku popisa savjeta

Dat ću potpuno radni kod i pokušati objasniti kako i što radi.

example-17-8-4 .ui-autocomplete-loading ( pozadina: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") desno središte no-repeat; ) #city ( širina: 25em; ) #log ( visina: 200 piksela; širina: 600 piksela; prekoračenje: auto; ) $(funkcija() ( $("#grad").autocomplete(( izvor: funkcija(zahtjev,odgovor) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: ( featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term ) , uspjeh: funkcija(podaci) ( odgovor($.map(data.geonames, funkcija(stavka) ( return ( label: item.name + ", " + item.countryName, value: item.name + " (" + item) .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, odaberite: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Ništa nije odabrano!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ) ; )); Grad:
Podržava geonames.org

Prvo gledamo HTML oznake. U prvom div elementu, zanima nas samo input element s id city. Ovdje ćemo unijeti početna slova (na latinici) lokaliteta o kojem želimo dobiti informaciju. Koristimo element div s dnevnikom identifikatora za unos primljenih informacija u njega.

Pogledamo li JavaScript kod, vidjet ćemo da objekt postavki sadrži tri svojstva - potrebno izvorno svojstvo, kao i svojstva minLength i select.
Razmotrit ćemo samo izvorno svojstvo, gdje možete napisati vlastitu funkciju. Ova funkcija uzima dva argumenta. Prvi argument je zahtjev, objekt koji sadrži jedno svojstvo, izraz, koji pohranjuje niz koji je korisnik unio u polje za unos. Drugi argument je odgovor - funkcija kojom će se primljeni odgovor obraditi.

Unutar funkcije definirane u svojstvu izvora imamo gotovo neograničenu slobodu djelovanja. I stoga, bez daljnjeg odlaganja, pišemo ajax zahtjev na url http://ws.geonames.org/searchJSON, u opciji dataType označavamo da očekujemo da ćemo primiti podatke u JSON formatu u odgovoru. U opciji podataka definiramo objekt s parametrima zahtjeva koji će biti poslani na navedeni url ( zašto su parametri upravo ovakvi - trebate pogledati API dokumentaciju na geonames.org poslužitelju). U zadnjem parametru prosljeđujemo request.term – što je korisnik unio.

U sljedećoj opciji ajax zahtjeva - opciji uspjeha, funkciju obrade odgovora nazivamo odgovor. U argumentu koji prosljeđujemo ovoj funkciji možemo obraditi podatke primljene u odgovoru poslužitelja na bilo koji način. Koristimo metodu $.map da primijenimo neku funkciju na svaki element objekta proslijeđen u prvom argumentu. Unutar funkcije možemo pristupiti svojstvima objekta - item.countryName, item.lng, item.lat ( zašto su svojstva takva kakva jesu - pogledajte API dokumentaciju koju nudi web servis). Funkcija koju smo napisali za svaki element vraća objekt koji sadrži dva svojstva koja smo sami definirali koristeći primljene podatke. Iz rezultirajućeg niza takvih objekata konstruira se popis savjeta.

Općenito, ovako nešto... Zaključno, veliki ljudski zahtjev - u komentarima, molim vas, možete načelno pohvaliti ili grditi. Ako želite postaviti tehničko pitanje, postavite ga na