Čo je používateľské rozhranie jquery. Úvod do jqueryui

Knižnica jQuery UI (User Interface) je sada prvkov šablóny na vytváranie používateľského rozhrania a je súčasťou knižnice jQuery. Používateľské rozhranie sa vzťahuje na interakciu medzi používateľom a webovou stránkou.

Hlavným cieľom knižnice jQuery UI je uľahčiť život webovým vývojárom, aby nestrácali čas vykonávaním úloh rovnakého typu. Najčastejšie sa vyskytujúce skripty JavaScript na webových stránkach boli zhromaždené do jednej knižnice a vývojárom stačí vziať a použiť potrebné parametre a metódy. Vývoj používateľských rozhraní sa stal oveľa rýchlejším.

Kalendáre, posuvníky a kontextové okná používané na webových stránkach sa už stali povinným atribútom. Prečo teda vývojár potrebuje zakaždým písať kód od začiatku? Keď si dokáže prispôsobiť hotovú šablónu a použiť ju na svojom webe.

Oficiálna stránka: https://jqueryui.com/

Knižnicu používateľského rozhrania jQuery si môžete stiahnuť do počítača alebo pripojiť pomocou odkazu CDN.

Na stiahnutie knižnice máte dve možnosti.

Rozhodne nemusíte sťahovať celú knižnicu, ak budete používať iba niektoré jednotlivé komponenty. Na stránke Download Builder zrušíte začiarknutie všetkých políčok okrem komponentov, ktoré potrebujete. Napríklad, ak potrebujete iba akordeónový widget, začiarknite políčko vedľa neho a stránka vám povie, aké prvky budú potrebné na prácu. Zaškrtávacie políčka budú umiestnené automaticky tam, kde je to potrebné a nebudete sťahovať nepotrebné súbory, čo bude mať pozitívny vplyv na rýchlosť načítania stránky.

Pred kliknutím na tlačidlo stiahnuť si vyberte vhodný motív pre krásny dizajn komponentov. Vizuálny dizajn pripravených tém si môžete pozrieť v sekcii Téma/Galéria.

Ak chcete vložiť komponenty už do štylizovanej webovej stránky, je pre vás vhodnejší návrhár tém - ThemeRoller, prejdite do sekcie Téma. Keď zmeníte ovládací panel vzhľadu, okamžite uvidíte, ako vyzerajú všetky widgety. Po dokončení vytvárania vzhľadu prvku kliknite na tlačidlo sťahovania a stiahnite si iba vybrané prvky a tému, čo je veľmi pohodlné.

Situácia, kedy potrebujete celú knižnicu, je nepravdepodobná, pokiaľ sa nepozriete do zdrojového kódu. Ak chcete stiahnuť plnú najnovšiu verziu, kliknite na tlačidlo: Stabilná.

Stiahnutá knižnica sa pripája rovnako ako cez CDN, len s tým rozdielom, že adresy URL odkazov budú smerovať do priečinka, kam si tieto súbory na svojom hostingu vložíte.

V sekcii Ukážky môžete prehľadne vidieť, ktoré úlohy (príklady ukážok) na stránke je možné vyriešiť pomocou knižnice.

Pozrime sa na príklad widgetu – Tooltip. Účelom tohto widgetu je krásne otvoriť popis uvedený v atribúte title.

Štruktúru HTML vytvoríme ako obvykle. Do odseku p umiestnime vstupné pole pre váš vek. V textovom poli uvedieme atribút title s textom "Uveďte svoj vek". Na tento prvok použijeme widget tooltip.

Tvoj vek:

Po načítaní stromu DOM na objekte dokumentu zavoláme metódu tooltip. K celej stránke (dokumentu) pristupujeme naraz, aby sa táto metóda dala aplikovať aj na ostatné prvky stránky. Po zavolaní metódy tooltipu sa hodnoty atribútu title zobrazia v popise.

Prvá otázka, ktorá vyvstáva pri začatí práce s knižnicou jQuery, je, ako ju pripojiť? Je zvláštne, že som o tom nepísal skôr a teraz som sa rozhodol vyplniť túto medzeru.

V tomto článku vám poviem, ako správne pridať jQuery na bežnú html webovú stránku a na populárnych motoroch.

Najbežnejší spôsob pripojenia knižnice. Najprv si musíte stiahnuť najnovšiu verziu z webovej stránky vývojára. Stránka na stiahnutie ponúka niekoľko možností knižnice, napríklad teraz ponúka na stiahnutie „Komprimovaný, produkčný jQuery 3.1.1“ a „Nekomprimovaný, vývojový jQuery 3.1.1“. Prvou možnosťou je komprimovaná verzia knižnice, z nej boli odstránené všetky komentáre, v tomto prípade knižnica zaberá oveľa menej miesta, preto sa stránka, na ktorú bude pripojená, načíta rýchlejšie. Druhou možnosťou je, zhruba povedané, zdrojový kód knižnice, je štruktúrovaný v ľahko čitateľnej forme s komentármi a je určený predovšetkým vývojárom. Preto odporúčam používať komprimovanú verziu knižnice.

Po stiahnutí knižnice ju musíte umiestniť na server, kde sa nachádzajú súbory lokality. Zvyčajne si v koreňovom adresári stránky vytvorím priečinok „js“, do ktorého skopírujem potrebné knižnice a umiestnim tam súbor s mojimi funkciami.

Teraz môžete prejsť priamo na pripojenie jQuery. Štruktúra webovej stránky, ku ktorej pripájate jQuery, sa môže líšiť. Musí však obsahovať značky HTML, HEAD a BODY. Ak chcete pripojiť jQuery, musíte pridať značku SCRIPT s odkazom na knižnicu vo vnútri značky HEAD.

Názov stránky

V niektorých prípadoch je knižnica zahrnutá pred koncovou značkou body, ktorá súvisí s poradím, v akom prehliadač spracováva stránku HTML. Keďže prehliadač číta riadky postupne, pri pripájaní jQuery na konci súboru prehliadač najskôr zobrazí stránku a potom pripojí dynamiku. Pri pomalom pripojení tento prístup zaisťuje zvýšenie rýchlosti načítania stránok a až potom prácu posúvačov a ostatných. Kód pre toto pripojenie vyzerá takto:

Názov stránky

Pozor! Odporúča sa nemeniť názov súboru knižnice jQuery (často sa mení na jquery.js), pretože v budúcnosti uloženie oficiálneho názvu súboru vám pomôže zistiť, akú verziu knižnice používate (v mojom príklade verzia 3.1 .1 sa používa).

Táto metóda je dobrá, pretože knižnica je pripojená z webovej stránky a neleží na vašom pevnom disku. To platí najmä pre veľké množstvo malých projektov a pre školenia.

Táto metóda pripojenia sa nazýva „Connecting with CDN“. Sieť na doručovanie obsahu, alebo ako sa častejšie nazýva CDN (Content Delivery Network), je sieť serverov po celom svete. Pomáhajú zlepšiť výkon vášho webového servera a znížiť zaťaženie vašej návštevnosti.

Najpopulárnejšie CDN na pripojenie jQuery:

Zvyčajne používam pripojenie od Google Developers. Na stránke projektu je už pre nás pripravených niekoľko úryvkov, stačí skopírovať riadok toho, ktorý potrebujeme, a vložiť ho do súboru. Pri tomto spôsobe pripojenia bude kód vyzerať takto:

Názov stránky

Výhodou tejto metódy je, že mnohé stránky pripájajú jQuery cez Google API, čo znamená, že s vysokou pravdepodobnosťou sa táto knižnica už nachádza vo vyrovnávacej pamäti prehliadača používateľa a druhýkrát sa už nenačíta vôbec.

jQuery je súčasťou WordPressu automaticky, takže nie je potrebné manuálne pridávať knižnice z iných verzií. Toto sa deje v šablóne pomocou kódu php:

Výsledkom bude pripojovací reťazec jQuery vo vnútri značky HEAD.

V čase písania tohto článku sa WordPress dodáva s jQuery v1.12.4, ale ako môžete vidieť, verzia knižnice je veľmi odlišná od verzie zahrnutej vo vyššie uvedených príkladoch. Je možné pripojiť najnovšiu verziu knižnice, ale existuje možnosť konfliktu.

Aby ste predišli konfliktu, ale stále používali potrebnú verziu knižnice, musíte použiť správny spôsob, ako zahrnúť jQuery do súboru functions.php:

Inštalácia knižnice používateľského rozhrania jQuery

Stiahnutie a inštalácia knižnice používateľského rozhrania jQuery je v niektorých ohľadoch náročnejšia ako iné knižnice JavaScript. Tento proces nie je zrovna náročný na prácu, ale vyžaduje si vysvetlenie, čomu je venovaný tento článok. Aby ste si prešli príkladmi, stačí si nainštalovať vývojovú verziu knižnice, ale nasledujúci text tiež popisuje, ako nainštalovať minifikované súbory zamerané na produkčné nasadenie a ako používať používateľské rozhranie jQuery cez siete distribúcie obsahu (CDN).

Proces načítania knižnice používateľského rozhrania jQuery je o niečo zložitejší ako iné knižnice JavaScriptu, ale výsledky budú stáť za námahu. Knižnica používateľského rozhrania jQuery pokrýva päť oblastí funkčnosti a máte možnosť sami si nakonfigurovať zavádzací archív, ktorý obsahuje iba potrebné komponenty. Táto časť vám predstaví všetky funkcie knižnice jQuery UI, no pri práci so skutočnými webovými aplikáciami môžete eliminovať nepotrebné komponenty a zmenšiť tak veľkosť knižnice načítanej prehliadačmi.

Než začnete vytvárať svoju vlastnú knižnicu používateľského rozhrania jQuery, musíte si vybrať tému. Knižnica používateľského rozhrania jQuery ponúka množstvo možností a možností konfigurácie, čo uľahčuje zmenu vzhľadu akéhokoľvek nástroja, ktorý používate. V skutočnosti je počet dostupných možností taký veľký, že je niekedy skutočne ohromujúci.

Na stránke jQuery UI môžete využiť služby špeciálnej aplikácie – prispôsobovač tém (Themeroller), no navyše je tu celá galéria preddefinovaných tém, kompletne pripravená na použitie, z ktorej si môžete vybrať tú, ktorá vám vyhovuje najviac, a tým si uľahčíte život.

Začnite návštevou stránky jqueryui.com a kliknite na tlačidlo Témy. Tým sa otvorí stránka ThemeRoller, na ktorej sa zobrazia miniaplikácie používateľského rozhrania jQuery a naľavo od nich panel nastavení, pomocou ktorého môžete nastaviť možnosti témy, ako je znázornené na obrázku:

Ak už máte špecifický vizuálny štýl, ktorý musíte dodržiavať, a chcete, aby bolo vizuálne rozhranie nástrojov používateľského rozhrania JQuery konzistentné so zvyškom lokality alebo aplikácie, potom karta Roll Your Own (ktorá je predvolene vybratá ) je len potrebné. Akýkoľvek aspekt dizajnu môžete zmeniť pomocou sady štýlov CSS, ktorú používa knižnica používateľského rozhrania jQuery.

Ak chcete získať jeden z pripravených motívov, prejdite na kartu Galéria. V čase písania tohto článku galéria obsahuje 24 tém, ktoré pokrývajú širokú škálu farebných možností – od tlmených a jemných tónov až po svetlé a provokatívne. Keď kliknete na motívy galérie, vzhľad miniaplikácií zobrazených na zvyšku stránky sa zodpovedajúcim spôsobom aktualizuje, čo vám poskytne predstavu o tom, ako môže aplikácia vyzerať:

Predvolená téma používaná pre používateľské rozhranie jQuery sa nazýva svetlosť používateľského rozhrania, ale táto téma nemá dostatočný kontrast, takže použijem tému Sunny, ktorá vyzerá o niečo lepšie. Jediné, čo sa od vás teraz vyžaduje, je zapamätať si názov témy, ktorá vám vyhovuje.

Po výbere témy môžete začať s vytváraním vlastnej knižnice používateľského rozhrania jQuery. Kliknutím na tlačidlo Stiahnuť v hornej časti stránky prejdete na stránku Download Builder. Zobrazí sa zoznam komponentov používateľského rozhrania jQuery rozdelených do štyroch funkčných skupín: jadro používateľského rozhrania, interakcie, miniaplikácie a efekty.

Výberom iba funkcií, ktoré váš projekt skutočne potrebuje, znížite veľkosť súboru súborov, ktoré musia prehliadače sťahovať. To samo osebe nie je zlý nápad, ale ja mám na to iný prístup. Z môjho pohľadu je oveľa lepšie ušetriť časť vašej komunikačnej šírky a odložiť úlohu doručovania používateľského rozhrania jQuery do prehliadačov do jednej zo sietí na distribúciu obsahu, o ktorej bude reč neskôr.

Na spustenie príkladov budete potrebovať všetky komponenty, takže sa uistite, že sú začiarknuté všetky políčka.

Medzi niektorými komponentmi v zozname existujú závislosti, ale pri vytváraní vlastnej verzie knižnice na to nemusíte myslieť. Ak vyberiete komponent, súčasne sa načítajú všetky komponenty, od ktorých závisí.

Ďalším krokom je výber témy. To sa vykonáva pomocou rozbaľovacieho zoznamu umiestneného v spodnej časti stránky, ako je znázornené na obrázku:

Máte tiež možnosť vybrať konkrétnu verziu knižnice používateľského rozhrania jQuery, ktorá sa má zahrnúť do archívu na stiahnutie. Budete si musieť stiahnuť stabilnú verziu, ktorá funguje so všetkými verziami knižnice jQuery od verzie 1.3.2.

Po výbere všetkých komponentov a výbere témy a stabilnej verzie si stiahnite archív na stiahnutie vlastnej knižnice používateľského rozhrania jQuery, ktorý ste vytvorili kliknutím na tlačidlo Stiahnuť.

Stiahnutie používateľského rozhrania jQuery obsahuje všetky súbory potrebné na používanie knižnice vo vývoji aj vo výrobe. Na prácu s príkladmi budete potrebovať súbory, ktoré obsahujú nekomprimovaný zdrojový kód a sú určené na použitie počas vývoja. Ak narazíte na nejaké problémy, môžete jednoducho preskúmať kód, aby ste sa oboznámili s vnútorným fungovaním knižnice používateľského rozhrania jQuery, čo bude neoceniteľné pri ladení vašich skriptov.

Do priečinka vzorových súborov by ste mali skopírovať nasledujúce súbory a priečinky:

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

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

priečinok development-bundle\themes\sunny\images.

Názvy súborov JavaScript a CSS zahŕňajú číslo verzie stiahnutého vydania knižnice. V mojom prípade ide o verziu 1.10.3. Knižnica používateľského rozhrania jQuery sa aktívne vyvíja a možno si budete môcť stiahnuť novšiu verziu ako 1.10.3.

Všetko, čo musíte urobiť, je zahrnúť knižnicu používateľského rozhrania jQuery do dokumentu HTML. Môžete to urobiť tak, že do dokumentu pridáte prvky skriptu a odkazu, ktoré obsahujú odkazy na nahrané súbory JavaScript a CSS, ako je uvedené v príklade nižšie:

knižnica jQuery

Nie je potrebné odkazovať priamo na priečinok obrázkov. Pokiaľ je priečinok s obrázkami a súbor CSS na svojom mieste, používateľské rozhranie jQuery bude schopné nezávisle nájsť všetky potrebné zdroje.

Knižnica používateľského rozhrania jQuery závisí od knižnice jQuery. Ak chcete použiť používateľské rozhranie jQuery v dokumente, musí byť k nemu najprv pripojené. Knižnica používateľského rozhrania jQuery nie je samostatná knižnica.

Dokument zobrazený v príklade vyššie obsahuje jednoduchý test na overenie, či je knižnica používateľského rozhrania jQuery zahrnutá správne. Ak sa stránka otvorí normálne, mali by ste vidieť tlačidlo podobné tomu, ktoré je znázornené na obrázku. Zatiaľ ignorujte volanie metódy button() na elemente skriptu. O tom, na čo je určený a ako funguje, sa dozviete v ďalšom článku.

Ak nesprávne napíšete cestu k jednej z dvoch knižníc, namiesto toho uvidíte jednoduchý odkaz.

Keď dokončíte vývoj svojej webovej aplikácie a ste pripravení na jej nasadenie, môžete použiť zmenšené verzie súborov v archíve na stiahnutie. Tieto súbory sú menšie, ale ich obsah nebude v prípade potreby na účely ladenia ľahko čitateľný. Ak chcete použiť nasadzovacie verzie súborov, skopírujte nasledujúce súbory a priečinky do adresára vášho webového servera:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

priečinok css\sunny\images

Priečinok s obrázkami a súbor CSS sú rovnaké ako vo vývojovej verzii; zmeny môžu ovplyvniť iba súbor JavaScript. Ak chcete vykonať čistú inštaláciu, jednoducho skopírujte tieto súbory do adresára servera.

Otázka použitia CDN na načítanie knižnice jQuery už bola spomenutá predtým. Ak ste fanúšikom tohto prístupu, potom vás poteší, že to isté môžete urobiť aj s knižnicou používateľského rozhrania jQuery. Google aj Microsoft poskytujú hosťovanie súborov používateľského rozhrania jQuery na svojich CDN. Pre náš základný príklad používam službu spoločnosti Microsoft, pretože poskytuje súbory JavaScript používateľského rozhrania jQuery aj štandardné vzhľady.

Ak chcete použiť CDN, musíte mať adresy URL súborov, ktoré potrebujete. Ak ide o službu spoločnosti Microsoft, prejdite na stránku Microsoft Ajax Content Delivery Network. Pri posúvaní stránky nadol uvidíte zoznam odkazov zodpovedajúcich rôznym verziám používateľského rozhrania jQuery. Kliknite na odkaz verzie, ktorú používate (v mojom prípade je to verzia 1.10.3). Zobrazia sa adresy URL pre bežné a minimizované verzie súboru knižnice používateľského rozhrania jQuery.

Na zvyšku stránky sa zobrazujú vopred pripravené témy s webovou adresou súboru CSS pod každou témou.

Ak chcete tieto súbory pripojiť k dokumentu prostredníctvom siete CDN, jednoducho umiestnite prvky skriptu a odkazu do príslušných adries URL, a nie do odkazov na miestne súbory používateľského rozhrania jQuery, ako je znázornené v príklade nižšie:

knižnica jQuery $(funkcia() ( $("a").button(); )); Navštívte webovú stránku www.professorweb.ru

Znakom, že adresy URL sú zadané správne, bude opäť zobrazenie tlačidla na stránke, ktorá sa otvorí, podobne ako na obrázku vyššie.

Úvod do knižnice používateľského rozhrania jQuery na vytváranie používateľských rozhraní. Stručný návod pre začiatočníkov.

jQuery UI (z angličtiny) Používateľské rozhranie jQuery) je knižnica miniaplikácií a interakcií postavená na knižnici JavaScript jQuery, ktorú možno použiť na vytváranie vysoko interaktívnych webových aplikácií.

Ak sa chcete vizuálne zoznámiť s možnosťami knižnice používateľského rozhrania jQuery, navštívte stránku: Ukážky a dokumentácia - na webovej lokalite jqueryui.com.

Teraz, keď ste pochopili, čo je používateľské rozhranie jQuery, môžete začať vyberať komponenty potrebné na načítanie: jadro používateľského rozhrania (hlavné funkcie používateľského rozhrania), interakcie (interakcie), miniaplikácie (miniaplikácie), efekty (efekty) a motív (témy dizajnu). - čím si vytvoríte vlastnú kópiu knižnice používateľského rozhrania jQuery. Ak to chcete urobiť, navštívte stránku: Zostavte si stiahnutie. Tam si môžete rýchlo stiahnuť najnovšiu stabilnú alebo staršiu verziu knižnice používateľského rozhrania jQuery.

Archív ZIP knižnice používateľského rozhrania jQuery, ktorú ste si stiahli, bude obsahovať:

Na pripojenie knižnice používateľského rozhrania jQuery zvyčajne stačia tri odkazy: CSS témy používateľského rozhrania, knižnica jQuery a používateľské rozhranie jQuery. Môže to vyzerať takto:

Po zahrnutí potrebných súborov môžete na svoju stránku začať pridávať potrebné miniaplikácie. Napríklad, ak chcete vytvoriť DatePicker (z angl. výber dátumu, pridajte textový modul:

A tiež kód JavaScript:

$(funkcia())( $("#dátum").výber dátumu(); ));

Výsledok interpretácie vyššie uvedeného príkladu prehliadačom bude vyzerať takto:

Používateľské rozhranie jQuery je prispôsobiteľné niekoľkými spôsobmi. Už viete, ako môžete načítať svoju kópiu knižnice používateľského rozhrania jQuery s komponentmi, ktoré potrebujete, ale existujú aj iné možnosti prispôsobenia tohto kódu na jeho implementáciu.

Používanie možností. Každý komponent v používateľskom rozhraní jQuery má niekoľko predvolených nastavení. Zároveň ich môžete kedykoľvek zmeniť pomocou „možnosti“ (z angl. možnosť), odovzdaním požadovanej hodnoty komponentu.

Napríklad, ak chcete nastaviť formát dátumu pre miniaplikáciu DatePicker, môžete použiť možnosť: dateFormat.

$("#dátum").datepicker(( formát dátumu: "rr-mm-dd" ));

Hodnotu možnosti môžete získať po spustení miniaplikácie takto:

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

Hodnotu voľby môžete zadať po spustení miniaplikácie takto:

$("#dátum").datepicker("možnosť", "formát dátumu", "rr-mm-dd");

Vizuálne prispôsobenie. Ak chcete prispôsobiť svoju vlastnú tému, používateľské rozhranie jQuery obsahuje ThemeRoller, ktorý vám umožňuje vizuálne prispôsobiť komponenty vášho rozhrania. Tento nástroj môžete použiť a dozvedieť sa o ňom viac na stránke:

Dlho som na blog nič nenapísal a konečne som si našiel čas na rozhovor o miniaplikácii Autocomplete, ktorá bola súčasťou používateľského rozhrania jQuery, doplnku pre knižnicu JavaScript jQuery.

Miniaplikácia Automatické dopĺňanie pomáha usporiadať zoznam zodpovedajúcich hodnôt, keď používateľ vypĺňa vstupné pole.

Najprv navštívime stránku na webovej lokalite používateľského rozhrania jQuery, aby sme získali súbory, ktoré potrebujeme. Klikneme na odkaz Zrušiť výber všetkých komponentov, aby sme nesťahovali nepotrebné veci, a potom vyberieme len to, čo potrebujeme – zaškrtneme políčko Automatické dopĺňanie a uvidíme, že spolu s ním sú začiarknuté aj políčka Core, Widget a Position. Funkcia miniaplikácie Automatické dopĺňanie závisí od týchto súborov.

Okrem toho je na pravej strane rozbaľovací zoznam, kde si môžete vybrať svoj obľúbený motív dizajnu. Ak je všetko pripravené, kliknite na tlačidlo Stiahnuť a získajte archív. Možnosti miniaplikácie je možné posúdiť na webovej stránke vývojára. Pokúsim sa v ruštine a čo najjednoduchším jazykom vysvetliť, ako to všetko funguje.

Takže najprv v sekcii HEAD budete musieť pripojiť niekoľko súborov, ktoré sú v archíve.

Najprv sme zahrnuli súbor so štýlom widgetu a potom súbor knižnice jQuery. Tretí zahrnutý súbor je potrebný na implementáciu automatického dopĺňania.

Miniaplikácia Automatické dopĺňanie nevyžaduje zložité značenie HTML. Stačí len pole na zadávanie textu, t.j. bežný vstupný prvok, ktorý má v atribúte typu textovú hodnotu. Dodatočné značenie je možné pridať na štýl podľa vami zvolenej témy.

Značky:

Najprv sa pozrime na najjednoduchší prípad použitia miniaplikácie – keď sa na generovanie zoznamu tipov použijú lokálne údaje.

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

V premennej availableTags bolo pripravené pole s radami. Potom sme vybrali vstupný prvok podľa jeho identifikátora a aplikovali metódu automatického dopĺňania, ktorej bol okamžite odovzdaný objekt s nastaveniami. Zatiaľ ide o objekt s jedinou vlastnosťou source , ktorá špecifikuje zdroj údajov. V našom prípade je zadané pole availableTags.

V skutočnosti si môžeme widget trochu prispôsobiť pomocou iných vlastností objektu nastavení. Tu je zoznam týchto vlastností:

zdroj – možnosť nemá predvolenú hodnotu a musí byť definovaná. Hodnota voľby môže byť reťazec, pole alebo funkcia. V každom prípade musí byť v tejto možnosti špecifikovaný zdroj údajov.
minLength – predvolená hodnota je 1. Táto možnosť určuje počet znakov, ktoré musia byť zadané do vstupného poľa pred aktiváciou popisov. Hodnota 0 je užitočná pri používaní lokálnych údajov pre zoznamy s viacerými pozíciami. Táto hodnota by sa mala zvýšiť pri použití požiadaviek na server na získanie údajov a pri použití veľkých zoznamov, kde jeden zadaný znak môže zodpovedať niekoľkým tisícom položiek.
oneskorenie – predvolená hodnota je 300. Táto možnosť určuje počet milisekúnd, ktoré musia uplynúť po stlačení ďalšieho klávesu, aby sa aktivovala požiadavka na príjem dát. Hodnota nula dáva zmysel pri použití lokálnych údajov. Pri použití serverových dotazov môže nulová hodnota v tejto voľbe spôsobiť vážne zaťaženie.
appendTo – predvolená hodnota 'body'. Hodnotou tejto možnosti môže byť selektor jQuery. Určuje, ku ktorému prvku sa má pridať rozbaľovací zoznam s popisom.
vypnuté – predvolená hodnota je false. Ak je nastavená na hodnotu true, funkcia miniaplikácie Automatické dopĺňanie nebude po inicializácii dostupná, ale možno ju povoliť neskôr, napríklad keď je splnená nejaká podmienka.

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

Tu sme pridali vlastnosť select, kde sme definovali funkciu, ktorá sa zavolá, keď používateľ vyberie hodnotu zo zoznamu tooltipov. funkcia má dva argumenty: prvý je objekt udalosti, druhý je špeciálny objekt ui. Usporiadaním prístupu k vlastnostiam týchto objektov môžete získať užitočné informácie (zobrazujeme ich v okne s upozornením).

Toto nie je jediná udalosť, na ktorú môže widget reagovať – tu je ich kompletný zoznam, ktorý zobrazuje názov vlastnosti v objekte s nastaveniami, názov udalosti v event.type a popis udalosti:

vytvoriť – Udalosť automatické dopĺňanie nastáva v momente inicializácie.
hľadanie – event automatické dopĺňanie nastane pred vykonaním požiadavky. Ak funkcia definovaná v tejto možnosti vráti hodnotu false, požiadavka nebude odoslaná.
otvorené – event autocompleteopen nastane v momente, keď sa otvorí rozbaľovací zoznam tipov.
zameranie – event automatické dokončovanie zaostrenia nastane vždy, keď sa zameria jedna z položiek zoznamu rád.
vybrať – udalosť automatické dopĺňanie nastane, keď je vybratá jedna z položiek zoznamu rád.
zavrieť – udalosť automatické dokončovanie nastane, keď je zoznam tipov uzavretý. Udalosť nastane bez ohľadu na to, či bola alebo nebola vybratá jedna z položiek.
zmena – udalosť automatické dopĺňanie nastane po výbere jednej z položiek zoznamu. Udalosť nastáva vždy po uzavretí.

Widget má tiež niekoľko metód, pomocou ktorých môžete ďalej rozširovať jeho funkčnosť.

Pridajte napríklad niekoľko tlačidiel do označenia HTML:

Hľadať "ako" Zavrieť značky:

A tu je kód JS:

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

Teraz kliknutím na tlačidlo Hľadať „ako“ môžeme simulovať akcie používateľa, ako keby do vstupného prvku zadával znaky „ako“. Kliknutím na tlačidlo Zavrieť zatvoríme zoznam tipov, ak bol predtým otvorený.

Nižšie sú uvedené popisy všetkých dostupných metód:

zničit – .autocomplete('destroy') úplne odstráni všetky funkcie miniaplikácie Automatické dopĺňanie. Vráti prvky do stavu pred inicializáciou.
vypnúť – .autocomplete(‘zakázať’) dočasne zakáže všetky funkcie miniaplikácie. Môžete ho znova povoliť pomocou metódy povolenia.
enable – .autocomplete('enable') umožňuje použitie všetkých funkcií miniaplikácie, ak bola predtým zakázaná pomocou metódy vypnutia.
option – .autocomplete('option', optionName, ) pomocou tejto metódy môžete nastaviť hodnotu ľubovoľnej možnosti widgetu po inicializácii.
option – .autocomplete('option', optionName) pomocou tejto metódy môžete získať hodnotu ľubovoľnej možnosti widgetu po inicializácii.
widget – .autocomplete('widget') Túto metódu možno použiť na prístup k objektu, ktorý predstavuje prvok s funkciou automatického dopĺňania.
search – .autocomplete(’search, ‘) Pomocou tejto metódy môžete otvoriť celý zoznam bez zadania druhého parametra. Ak v druhom parametri zadáte reťazec znakov, otvorí sa zoznam s vhodnými radami.
close – .autocomplete(‘zatvoriť’) zatvorí zoznam popisov, ak bol predtým otvorený.

Vo všeobecnosti teraz vieme, ako konfigurovať a spravovať widget, ale doteraz sme na generovanie zoznamu tipov používali výlučne lokálne údaje. Je vhodný na skúmanie možností, ale na skutočnú prácu je nepravdepodobný. V skutočnej práci budete pravdepodobne musieť generovať rady z údajov uložených na vašom vlastnom serveri a možno vôbec nie na vašom vlastnom.

Voľba zdroja, ktorá, pripomínam, je povinná a definuje zdroj údajov, môže akceptovať aj riadok obsahujúci adresu URL, na ktorú má byť požiadavka zaslaná. A v zdroji si môžete definovať svoju vlastnú funkciu, ktorá bude robiť to, čo potrebujete. Toto je možno najflexibilnejšia metóda, ktorú budeme analyzovať. Skúsme získať nejaké údaje zo servera geonames.org vo forme zoznamu rád

Poskytnem plne funkčný kód a pokúsim sa vysvetliť, ako a čo funguje.

example-17-8-4 .ui-autocomplete-loading ( background: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") vpravo uprostred no-repeat; ) #city ( šírka: 25em; ) #log ( výška: 200px; šírka: 600px; pretečenie: auto; ) $(funkcia() ( $("#mesto").autocomplete(( zdroj: funkcia(požiadavka,odpoveď) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: ( featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term ) , success: function(data) ( response($.map(data.geonames, function(item)) ( return ( label: item.name + ", " + item.countryName, value: item.name + " (" + item) .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, vyberte: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Nič nie je vybraté!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ) ));
Podporované geonames.org

Najprv sa pozrieme na značenie HTML. V prvom prvku div nás zaujíma len vstupný prvok s id city . Tu zadáme začiatočné písmená (v latinke) lokality, o ktorej by sme chceli dostávať informácie. Na zapísanie prijatých informácií doň používame prvok div s protokolom identifikátorov.

Ak sa pozrieme na kód JavaScript, uvidíme, že objekt nastavení obsahuje tri vlastnosti – požadovanú zdrojovú vlastnosť, ako aj vlastnosti minLength a select.
Budeme brať do úvahy iba zdrojovú vlastnosť, kde môžete napísať svoju vlastnú funkciu. Táto funkcia má dva argumenty. Prvým argumentom je request, objekt obsahujúci jedinú vlastnosť, term, ktorá ukladá reťazec zadaný používateľom do vstupného poľa. Druhým argumentom je odpoveď – funkcia, pomocou ktorej bude prijatá odpoveď spracovaná.

Vo vnútri funkcie definovanej vo vlastnosti source máme takmer neobmedzenú slobodu konania. A preto tam bez ďalších okolkov napíšeme ajax požiadavku na url http://ws.geonames.org/searchJSON, vo voľbe dataType označíme, že v odpovedi očakávame príjem údajov vo formáte JSON. Vo voľbe údaje definujeme objekt s parametrami požiadavky, ktorý bude odoslaný na zadanú url ( prečo sú parametre presne takéto - treba si pozrieť dokumentáciu API na serveri geonames.org). V poslednom parametri odovzdáme request.term – čo používateľ zadal.

V ďalšej voľbe ajax requestu - úspešná, voláme funkciu spracovania odpovede response . V argumente, ktorý odovzdávame tejto funkcii, môžeme spracovať údaje prijaté v odpovedi servera ľubovoľným spôsobom. Pomocou metódy $.map aplikujeme nejakú funkciu na každý prvok objektu odovzdaného v prvom argumente. Vo vnútri funkcie máme prístup k vlastnostiam objektu - item.countryName, item.lng, item.lat ( prečo sú vlastnosti také, aké sú - pozrite si dokumentáciu API poskytovanú webovou službou). Funkcia, ktorú sme napísali, pre každý prvok vracia objekt obsahujúci dve vlastnosti, ktoré sme si sami definovali pomocou prijatých údajov. Z výsledného poľa takýchto objektov sa vytvorí zoznam rád.

Vo všeobecnosti asi takto... Na záver veľká ľudská prosba - v komentároch, prosím, môžete zásadne pochváliť alebo pokarhať. Ak sa chcete opýtať na technickú otázku, opýtajte sa ju na