Mis on jquery kasutajaliides. Sissejuhatus jqueryui-sse

jQuery UI (kasutajaliidese) teek on mallielementide komplekt kasutajaliidese loomiseks ja on osa jQuery teegist. Kasutajaliides viitab suhtlusele kasutaja ja veebilehe vahel.

jQuery kasutajaliidese teegi peamine eesmärk on muuta veebiarendajate elu lihtsamaks, et nad ei raiskaks aega sama tüüpi ülesannete täitmisele. Veebisaitidelt levinumad JavaScripti skriptid on koondatud ühte teeki ning arendajatel tuleb vaid vajalikud parameetrid ja meetodid võtta ja rakendada. Kasutajaliideste arendamine on muutunud palju kiiremaks.

Veebisaitidel kasutatavad kalendrid, liugurid ja hüpikaknad on juba muutunud kohustuslikuks atribuudiks. Miks peab arendaja iga kord koodi nullist kirjutama? Millal ta saab valmis malli kohandada ja seda oma veebisaidil kasutada.

Ametlik veebisait: https://jqueryui.com/

jQuery kasutajaliidese teegi saab arvutisse alla laadida või ühendada CDN-i lingi kaudu.

Teegi allalaadimiseks on kaks võimalust.

Kindlasti ei pea te kogu teeki alla laadima, kui kavatsete kasutada ainult mõnda üksikut komponenti. Lehel Download Builder tühjendage kõik ruudud, välja arvatud vajalikud komponendid. Näiteks kui vajate ainult akordioni vidinat, siis märkige selle kõrval olevasse märkeruutu ja sait ütleb teile, milliseid elemente tööks vaja läheb. Märkeruudud paigutatakse vajadusel automaatselt ja te ei laadi alla mittevajalikke faile, millel on positiivne mõju saidi laadimiskiirusele.

Enne allalaadimisnupul klõpsamist valige komponentide kauni kujunduse jaoks sobiv teema. Valmis teemade visuaalset kujundust saad vaadata rubriigist Teema/galerii.

Komponentide juba stiliseeritud veebisaidile manustamiseks sobib teile rohkem teemakujundaja - ThemeRoller, minge jaotisse Teema. Kui muudate välimuse juhtpaneeli, näete kohe, kuidas kõik vidinad välja näevad. Kui olete elemendi välimuse loomise lõpetanud, klõpsake allalaadimisnupul ja laadige alla ainult valitud elemendid ja teema, mis on väga mugav.

Olukord, kus vajate kogu teeki, on ebatõenäoline, kui te ei vaata lähtekoodi. Uusima täisversiooni allalaadimiseks klõpsake nuppu: Stabiilne.

Allalaaditud teek ühendatakse samamoodi nagu CDN-i kaudu, ainsaks erinevuseks on see, et linkide URL-id suunavad kausta, kuhu need failid oma hostimisse paigutate.

Jaotises Demod näete selgelt, milliseid saidi ülesandeid (demonäited) saab raamatukogu abil lahendada.

Vaatame vidina näidet – Tööriistavihje. Selle vidina eesmärk on kaunilt avada pealkirja atribuudis määratud kohtspikker.

Loome HTML-i struktuuri nagu tavaliselt. Lõigus p asetame teie vanuse sisestamise sisestusvälja. Tekstiväljal määrame pealkirja atribuudi tekstiga "Palun märkige oma vanus". Rakendame sellele elemendile tööriistaspikri vidina.

Sinu vanus:

Pärast DOM-puu laadimist kutsume dokumendiobjektil tööriistavihje meetodit. Juurdepääseme kogu lehele (dokumendile) korraga, et seda meetodit saaks rakendada ka teistele leheelementidele. Pärast kohtspikri meetodi kutsumist kuvatakse pealkirja atribuudi väärtused kohtspikris.

Esimene küsimus, mis jQuery teegiga töötamist alustades tekib, on, kuidas seda ühendada? Kummaline, et ma sellest varem ei kirjutanud ja nüüd otsustasin selle tühimiku täita.

Selles artiklis räägin teile, kuidas jQuery õigesti lisada tavalisele html-veebisaidile ja populaarsetele mootoritele.

Kõige tavalisem viis raamatukogu ühendamiseks. Kõigepealt peate arendaja veebisaidilt alla laadima uusima versiooni. Allalaadimislehel on mitu teegi valikut, näiteks pakub see nüüd allalaadimist "Tihend, tootmisversioon jQuery 3.1.1" ja "Tihendamata, arendus jQuery 3.1.1". Esimene võimalus on teegi tihendatud versioon, sellest on kõik kommentaarid eemaldatud, sel juhul võtab teek palju vähem ruumi, seetõttu laaditakse kiiremini leht, millega see ühendatakse. Teine variant on jämedalt öeldes teegi lähtekood, see on üles ehitatud lihtsalt loetaval kujul koos kommentaaridega ja mõeldud eelkõige arendajatele. Seetõttu soovitan kasutada teegi tihendatud versiooni.

Pärast teegi allalaadimist peate selle paigutama serverisse, kus asuvad saidifailid. Tavaliselt loon saidi juurtes js-kausta, kuhu kopeerin vajalikud teegid ja asetan sinna faili oma funktsioonidega.

Nüüd saate otse jQuery ühenduse juurde minna. Selle veebilehe struktuur, millega jQuery ühendate, võib erineda. Kuid see peab sisaldama silte HTML, HEAD ja BODY. Nii et jQuery ühendamiseks peate HEAD sildi sees lisama SCRIPT-i sildi koos lingiga teegile.

Saidi pealkiri

Mõnel juhul lisatakse teek enne sulgevat body-märgendit, mis on seotud järjestusega, milles brauser HTML-lehte töötleb. Kuna brauser loeb ridu järjestikku, kuvab brauser faili lõpus jQuery ühendamisel esmalt saidi ja seejärel ühendab dünaamika. Aeglase ühenduse korral tagab selline lähenemine saidi laadimiskiiruse tõusu ning alles seejärel liugurite ja muu töö. Selle ühenduse kood näeb välja selline:

Saidi pealkiri

Tähelepanu!

jQuery ühendamine teie veebisaidi lehtedega välistest allikatest

See meetod on hea, kuna raamatukogu on veebisaidilt ühendatud ega asu teie kõvakettal. See kehtib eriti paljude väikeste projektide ja koolituste kohta.

Seda ühendusmeetodit nimetatakse "CDN-iga ühendamiseks". Sisu edastamise võrk või nagu seda sagedamini nimetatakse CDN (Content Delivery Network) on serverite võrk üle maailma. Need aitavad parandada teie veebiserveri jõudlust ja vähendada liikluse koormust.

Kõige populaarsemad CDN-id jQuery ühendamiseks:

Saidi pealkiri

Saidi pealkiri

jQuery ühendamine WordPressiga

jQuery kaasatakse WordPressi automaatselt, seega pole vaja teistest versioonidest teeke käsitsi kaasata. See juhtub mallis, kasutades php-koodi:

Kirjutamise ajal tarnitakse WordPressi versiooniga jQuery v1.12.4, kuid nagu näete, erineb teegi versioon ülaltoodud näidetes sisalduvast. Võimalik on ühendada teegi uusim versioon, kuid on olemas konflikti võimalus.

Konfliktide vältimiseks, kuid siiski vajaliku teegi versiooni kasutamiseks, peate jQuery faili functions.php kaasamiseks kasutama õiget viisi:

jQuery kasutajaliidese teegi installimine

jQuery kasutajaliidese teegi allalaadimine ja installimine on mõnes mõttes keerulisem kui teised JavaScripti teegid. See protsess ei ole just töömahukas, kuid vajab selgitust, millele see artikkel on pühendatud. Näidete läbitöötamiseks peate installima ainult teegi arendusversiooni, kuid järgnev kirjeldab ka tootmisjuurutamiseks mõeldud minifailide installimist ja jQuery kasutajaliidese kasutamist sisu jaotusvõrkude (CDN) kaudu.

JQuery kasutajaliidese teegi laadimisprotsess on pisut keerulisem kui teised JavaScripti teegid, kuid tulemused on pingutust väärt. jQuery kasutajaliidese teek hõlmab viit funktsionaalsuse valdkonda ja teile antakse võimalus alglaadimisarhiivi ise seadistada, kaasates ainult vajalikud komponendid. See osa tutvustab teile kõiki jQuery kasutajaliidese teegi funktsioone, kuid tõeliste veebirakendustega töötades saate eemaldada mittevajalikud komponendid, et vähendada brauserite laaditud teegi suurust.

Enne oma jQuery kasutajaliidese teegi loomise alustamist peate valima teema. jQuery kasutajaliidese teek pakub hulgaliselt valikuid ja konfiguratsioonivalikuid, mis muudab kasutatavate tööriistade välimuse muutmise lihtsaks. Tegelikult on saadaolevate valikute arv nii suur, et mõnikord on see tõesti tohutu.

jQuery kasutajaliidese veebisaidil saate kasutada spetsiaalse rakenduse - teemakohandaja (Themeroller) - teenuseid, kuid lisaks on olemas terve galerii eelmääratletud teemadest, mis on täielikult kasutusvalmis, millest saate valida endale sobiva. ja seeläbi teie elu lihtsamaks.

Alustage saidi jqueryui.com külastamisega ja klõpsake nuppu Teemad. See avab ThemeRolleri lehe, kus kuvatakse jQuery kasutajaliidese vidinad ja nendest vasakul asuv seadete paneel, mille abil saate määrata teemavalikuid, nagu on näidatud joonisel:

Kui teil on juba konkreetne visuaalne stiil, millest peate kinni pidama ja soovite, et JQuery kasutajaliidese tööriistade visuaalne liides oleks kooskõlas ülejäänud saidi või rakendusega, siis vahekaart Roll Your Own (mis on vaikimisi valitud ) on just see vajalik. Saate muuta kujunduse mis tahes aspekti, kasutades jQuery kasutajaliidese teegis kasutatavat CSS-stiilikomplekti.

Ühe valmisteema hankimiseks minge vahekaardile Galerii. Artikli kirjutamise ajal on galeriis 24 teemat, mis hõlmavad laia valikut värvivalikuid – alates summutatud ja peentest toonidest kuni heledate ja provokatiivsete toonideni. Kui klõpsate galerii teemadel, värskendatakse ülejäänud lehel kuvatavate vidinate välimust vastavalt, andes teile ülevaate sellest, milline rakendus välja näeb:

jQuery kasutajaliidese jaoks kasutatavat vaiketeemat nimetatakse UI kerguseks, kuid sellel teemal pole piisavalt kontrasti, seega kasutan Sunny teemat, mis näeb veidi parem välja. Ainus, mida teilt praegu nõutakse, on teile sobiva teema nime meeldejätmine.

Kui olete teema valinud, võite alustada oma jQuery kasutajaliidese teegi allalaadimist. Download Builderi lehele minemiseks klõpsake lehe ülaosas nuppu Laadi alla. Näete jQuery kasutajaliidese komponentide loendit, mis on jagatud nelja funktsionaalse rühma: kasutajaliidese põhi, interaktsioonid, vidinad ja efektid.

Valides ainult need funktsioonid, mida teie projekt tegelikult vajab, vähendate brauserite allalaaditavate failide hulka. See pole iseenesest halb mõte, kuid ma lähenen teistsugusele. Minu arvates on palju parem säästa osa oma side ribalaiusest ja laadida jQuery kasutajaliidese brauseritesse edastamise ülesanne mõnda sisu levitamisvõrku, mida arutatakse hiljem.

Näidete käitamiseks vajate kõiki komponente, seega veenduge, et kõik ruudud oleksid märgitud.

Mõne loendi komponendi vahel on sõltuvusi, kuid te ei pruugi sellele teegi versiooni loomisel mõelda. Kui valite komponendi, laaditakse kõik komponendid, millest see sõltub, korraga.

Järgmine samm on teema valimine. Seda tehakse lehe allosas asuva ripploendi abil, nagu on näidatud joonisel:

Samuti on teil võimalus valida jQuery kasutajaliidese teegi konkreetne versioon, mis lisatakse allalaadimisarhiivi. Peate alla laadima stabiilse versiooni, mis töötab kõigi jQuery teegi versioonidega alates versioonist 1.3.2.

Pärast kõigi komponentide valimist ning teema ja stabiilse versiooni valimist laadige alla kohandatud jQuery UI teegi allalaadimisarhiiv, mille olete loonud, klõpsates nuppu Laadi alla.

jQuery kasutajaliidese allalaaditav fail sisaldab kõiki faile, mis on vajalikud teegi kasutamiseks nii arenduses kui ka tootmises. Näidetega töötamiseks vajate faile, mis sisaldavad tihendamata lähtekoodi ja on mõeldud kasutamiseks arenduse ajal. Kui teil tekib probleeme, saate koodi hõlpsalt uurida, et tutvuda jQuery kasutajaliidese teegi sisemistega, mis on teie skriptide silumisel hindamatu väärtusega.

Peaksite kopeerima järgmised failid ja kaustad näidisfailide kausta:

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

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

kausta arenduspakett\teemad\päikselised\pildid.

JavaScripti ja CSS-i failinimed sisaldavad allalaaditud teegi versiooni versiooni. Minu puhul on see versioon 1.10.3. jQuery kasutajaliidese teek on aktiivses arenduses ja teil võib olla võimalik alla laadida uuem versioon kui 1.10.3.

Kõik, mida pead nüüd tegema, on lisada jQuery kasutajaliidese teek oma HTML-dokumenti. Seda saate teha, lisades oma dokumendile skripti- ja lingielemendid, mis sisaldavad linke teie üleslaaditud JavaScript- ja CSS-failidele, nagu on näidatud allolevas näites.

jQuery teek

Pole vaja linkida otse piltide kausta. Kuni piltide kaust ja CSS-fail on paigas, suudab jQuery kasutajaliides iseseisvalt leida kõik vajalikud ressursid.

jQuery kasutajaliidese teek sõltub jQuery teegist. Dokumendis jQuery kasutajaliidese kasutamiseks tuleb see esmalt sellega ühendada. jQuery kasutajaliidese teek ei ole iseseisev teek.

Ülaltoodud näites näidatud dokument sisaldab lihtsat testi, et kontrollida, kas jQuery kasutajaliidese teek on õigesti kaasatud. Kui leht avaneb normaalselt, peaksite nägema nuppu, mis sarnaneb joonisel kujutatule. Ignoreeri praegu skriptielemendi meetodi button() kutset. Milleks see mõeldud on ja kuidas see toimib, saate teada järgmisest artiklist.

Kui kirjutate kummagi teegi tee valesti, näete selle asemel lihtsat linki.

Kui olete oma veebirakenduse arendamise lõpetanud ja selle juurutamiseks valmis, saate kasutada allalaadimisarhiivis sisalduvate failide minimeeritud versioone. Need failid on väiksema suurusega, kuid nende sisu ei ole silumise eesmärgil lihtne lugeda. Failide juurutusversioonide kasutamiseks kopeerige järgmised failid ja kaustad oma veebiserveri kataloogi:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

kausta css\sunny\images

Piltide kaust ja CSS-fail on siin samad, mis arendusversioonis; muudatused võivad mõjutada ainult JavaScripti faili. Puhta installi tegemiseks kopeerige need failid lihtsalt serveri kataloogi.

CDN-i kasutamise probleemi jQuery teegi laadimiseks on juba varem käsitletud. Kui olete selle lähenemisviisi fänn, on teil hea meel teada saada, et saate sama teha ka jQuery kasutajaliidese raamatukoguga. Nii Google kui ka Microsoft pakuvad oma CDN-ides jQuery kasutajaliidese failide hostimist. Meie põhinäite puhul kasutan Microsofti teenust, kuna see pakub nii jQuery UI JavaScript-faile kui ka standardseid nahkasid.

CDN-i kasutamiseks peavad teil olema vajalike failide URL-id. Kui see on Microsofti teenus, minge lehele Microsoft Ajax Content Delivery Network. Lehte alla kerides näete jQuery kasutajaliidese erinevatele versioonidele vastavate linkide loendit. Klõpsake kasutatava versiooni lingil (minu puhul on see versioon 1.10.3). Näete jQuery kasutajaliidese teegifaili tava- ja miniversioonide URL-e.

Ülejäänud lehe osas kuvatakse eelvalmistatud teemad koos CSS-faili URL-iga iga teema all.

Nende failide ühendamiseks oma dokumendiga CDN-i kaudu lihtsalt asetage skript ja lingielemendid vastavatesse URL-idesse, mitte linkides kohalikele jQuery kasutajaliidese failidele, nagu on näidatud allolevas näites.

jQuery teek $(function() ( $("a").button(); )); Külastage veebisaiti www.professorweb.ru

Jällegi on märk sellest, et URL-id on õigesti määratud, avaneval lehel nupu kuvamine, mis on sarnane ülaltoodud joonisel näidatud nupuga.

Sissejuhatus jQuery UI teegisse kasutajaliideste loomiseks. Lühikesed juhised algajatele.

jQuery kasutajaliides (inglise keelest) jQuery kasutajaliides) on vidinate ja interaktsioonide teek, mis on ehitatud jQuery JavaScripti teegile, mida saab kasutada väga interaktiivsete veebirakenduste loomiseks.

JQuery kasutajaliidese teegi võimalustega visuaalselt tutvumiseks külastage veebisaiti: Demod ja dokumentatsioon - veebisaidil jqueryui.com.

Nüüd, kui saate aru, mis on jQuery kasutajaliides, võite hakata valima laadimiseks vajalikke komponente: UI Core (kasutajaliidese põhifunktsioonid), interaktsioonid (interaktsioonid), vidinad (vidinad), efektid (efektid) ja teema (kujundusteemad). - luues seeläbi oma jQuery kasutajaliidese teegi koopia. Selleks külastage lehte: Looge oma allalaadimine. Seal saate kiiresti alla laadida jQuery kasutajaliidese teegi uusima stabiilse või pärandversiooni.

Allalaaditud jQuery kasutajaliidese teegi ZIP-arhiiv sisaldab järgmist.

jQuery kasutajaliidese teegi ühendamiseks piisab tavaliselt kolmest lingist: kasutajaliidese teema CSS, jQuery teek ja jQuery kasutajaliides. See võib välja näha selline:

Kui olete vajalikud failid kaasanud, võite hakata oma lehele vajalikke vidinaid lisama. Näiteks DatePickeri tegemiseks (inglise keelest. kuupäeva valik, lisage tekstipakett:

Ja ka JavaScripti kood:

$(funktsioon())( $("#kuupäev").kuupäevavalija(; ));

Ülaltoodud näite brauseri tõlgenduse tulemus näeb välja järgmine:

jQuery kasutajaliidest saab mitmel viisil kohandada. Teate juba, kuidas saate laadida oma jQuery kasutajaliidese teegi koopia koos vajalike komponentidega, kuid selle koodi rakendamiseks on ka teisi võimalusi.

Valikute kasutamine. Igal jQuery kasutajaliidese komponendil on mitmeid vaikesätteid. Samal ajal saate neid alati muuta, kasutades "valikut" (inglise keelest. valik), edastades komponendile vajaliku väärtuse.

Näiteks DatePickeri vidina kuupäevavormingu määramiseks võite kasutada valikut dateFormat.

$("#kuupäev").datepicker(( dateFormat: "yy-mm-dd" ));

Valiku väärtuse saate pärast vidina käivitamist järgmiselt.

var dateFormat = $("#kuupäev").datepicker("valik", "dateFormat");

Pärast vidina käivitamist saate määrata valiku väärtuse järgmiselt.

$("#kuupäev").datepicker("valik", "dateFormat", "yy-mm-pp");

Visuaalne kohandamine. Oma teema kohandamiseks sisaldab jQuery kasutajaliides ThemeRollerit, mis võimaldab teil oma liidese komponente visuaalselt kohandada. Saate seda tööriista kasutada ja selle kohta lisateabe saamiseks külastada lehte:

Ma pole pikka aega blogisse midagi kirjutanud ja lõpuks võtsin natuke aega, et rääkida vidinast Autocomplete, mis oli lisatud jQuery UI-sse, jQuery JavaScripti teegi lisandmoodulisse.

Automaatse täitmise vidin aitab korraldada sobivate väärtuste loendit, kui kasutaja täidab sisestusvälja.

Kõigepealt külastame jQuery kasutajaliidese veebisaidi lehte, et hankida vajalikud failid. Klõpsame lingil Tühista kõigi komponentide valik, et mitte tarbetuid asju alla laadida, ja seejärel valime ainult selle, mida vajame - märkige ruut Automaatne täitmine ja vaadake, et koos sellega on märgitud ka ruudud Core, Widget ja Position. Automaatse täitmise vidina toimimine sõltub nendest failidest.

Lisaks on paremal rippmenüü, kus saate valida oma lemmikkujunduse teema. Kui kõik on valmis, klõpsake nuppu Laadi alla ja hankige arhiiv. Vidina võimalusi saab hinnata arendaja veebisaidil. Püüan lihtsalt vene keeles ja võimalikult lihtsas keeles selgitada, kuidas see kõik toimima panna.

Niisiis, kõigepealt peate jaotises HEAD ühendama mitu arhiivis olevat faili.

Esmalt lisasime vidina stiilifaili, seejärel jQuery teegi faili. Kolmas kaasatud fail on vajalik automaatse täitmise rakendamiseks.

Automaatse täitmise vidin ei vaja keerulist HTML-märgistust. Piisab vaid tekstisisestusväljast, s.t. tavaline sisendelement, mille atribuudis type on tekstiväärtus. Selle kujundamiseks vastavalt valitud teemale saab lisada täiendavaid märgistusi.

Sildid:

Kõigepealt vaatame vidina kasutamise lihtsaimat juhtumit – kui näpunäidete loendi koostamiseks kasutatakse kohalikke andmeid.

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

Muutujas availableTags on koostatud vihjetega massiiv. Seejärel valisime sisendelemendi identifikaatori järgi ja rakendasime automaatse täitmise meetodit, mis edastas kohe seadistustega objekti. Praegu on see ühe atribuudiga objekt allikas , mis määrab andmete allika. Meie puhul on määratud massiiv availableTags.

Tegelikult saame vidinat veidi kohandada, kasutades sätteobjekti muid atribuute. Siin on nende atribuutide loend:

allikas – valikul ei ole vaikeväärtust ja see tuleb määratleda. Suvandi väärtus võib olla string, massiiv või funktsioon. Igal juhul tuleb selles valikus määrata andmeallikas.
minLength – vaikeväärtus on 1. See suvand määrab märkide arvu, mis tuleb sisestada sisestusväljale enne tööriistaspikrite aktiveerimist. Väärtus 0 on kasulik kohalike andmete kasutamisel mitme positsiooniga loendite jaoks. Seda väärtust tuleks suurendada, kui kasutate andmete hankimiseks päringuid serverile ja kui kasutate suuri loendeid, kus üks sisestatud märk võib vastata mitmele tuhandele üksusele.
viivitus – vaikeväärtus on 300. See suvand määrab millisekundite arvu, mis peab mööduma pärast järgmise klahvi vajutamist, et andmete saamise taotlus aktiveeritaks. Väärtus null on kohalike andmete kasutamisel mõistlik. Serveripäringute kasutamisel võib selle suvandi nullväärtus põhjustada tõsist koormust.
appendTo – vaikeväärtus 'body'. Selle valiku väärtus võib olla jQuery valija. Määrab, millisele elemendile tööriistavihje rippmenüü lisada.
keelatud – vaikeväärtus on väär. Kui see on seatud väärtusele Tõene, pole automaatse täitmise vidina funktsioon lähtestamisel saadaval, kuid selle saab hiljem lubada, näiteks kui mõni tingimus on täidetud.

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "skeem"]; ("#sildid").autocomplete(( allikas: saadavalTags, valige: function(event, ui) ( alert("Sündmus: " + event.type + ",\nvalue: " + ui.item.value); ) ) ));

Siia lisasime valiku atribuudi, kus määratlesime funktsiooni, mida kutsutakse välja, kui kasutaja valib tööriistavihjete loendist väärtuse. funktsioon võtab kaks argumenti: esimene on sündmuse objekt, teine ​​on spetsiaalne ui objekt. Organiseerides juurdepääsu nende objektide omadustele, saate kasulikku teavet (kuvame selle hoiatusaknas).

See ei ole ainuke sündmus, millele vidin reageerida suudab – siin on nende täielik loetelu, mis näitab objekti atribuudi nime koos seadistustega, sündmuse nime failis event.type ja sündmuse kirjeldust:

luua – Sündmus automaatne lõpetamine toimub initsialiseerimise hetkel.
otsing – sündmus automaatne otsing toimub enne päringu täitmist. Kui selles suvandis määratletud funktsioon tagastab vale, siis päringut ei saadeta.
avatud – üritus automaatne lõpetamine toimub hetkel, kui avaneb näpunäidete rippmenüü.
fookus – sündmus automaatne teravustamine tekib siis, kui üks vihjeloendi üksus fookusesse saab.
vali – sündmus automaatne lõpetamine ilmneb siis, kui on valitud üks vihjeloendi üksus.
sule – sündmus automaatne lõpetamine tekib siis, kui vihjete loend suletakse. Sündmus toimub olenemata sellest, kas üks üksustest on valitud või mitte.
muutus – sündmus automaatne lõpetamine toimub pärast ühe loendiüksuse valimist. Sündmus toimub alati pärast sulgemist.

Vidinal on ka mõned meetodid, mille abil saate selle funktsionaalsust veelgi laiendada.

Näiteks lisage HTML-i märgistusele paar nuppu:

Otsi "as" Sulge sildid:

Ja siin on JS kood:

$(function())( var availableTags = ["ActionScript","AppleScript","Asp","BASIC", "C","C++","Clojure","COBOL","ColdFusion","Erlang" , "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "skeem"]; ("#sildid").autocomplete(( allikas: saadavalSildid, minPikkus: 0 )); $("#otsing").click(function())( $("#sildid").autocomplete("otsing", " as "); )); $("#sulge").click(function())( $("#sildid").autocomplete("sulge"); )); ));

Nüüd, klõpsates nuppu Otsi "nagu", saame simuleerida kasutaja tegevust nii, nagu oleks ta sisestanud sisestuselemendis "nagu" märgid. Klõpsates nupule Sule, suleme vihjete loendi, kui see oli varem avatud.

Allpool on kõigi saadaolevate meetodite kirjeldused:

hävita – .autocomplete('destroy') eemaldab täielikult kõik automaatse täitmise vidina funktsioonid. Tagastab elemendid nende initsialiseerimiseelsesse olekusse.
disable – .autocomplete('disable') keelab ajutiselt kõik vidinafunktsioonid. Saate selle uuesti lubada, kasutades lubamismeetodit.
enable – .autocomplete('enable') võimaldab kasutada kõiki vidina funktsioone, kui see oli eelnevalt keelamismeetodiga keelatud.
option – .autocomplete('suvand', valikuNimi, ) seda meetodit kasutades saate määrata mis tahes vidina suvandi väärtuse pärast lähtestamist.
option – .autocomplete('suvand', valikuNimi) seda meetodit kasutades saate pärast initsialiseerimist mis tahes vidina suvandi väärtuse.
vidin – .autocomplete('vidin') Seda meetodit saab kasutada objektile juurde pääsemiseks, mis esindab automaatse täitmise funktsiooniga elementi.
otsing – .autocomplete('search,') Seda meetodit kasutades saate avada kogu loendi ilma teist parameetrit edastamata. Kui sisestate teises parameetris märgijada, avaneb sobivate vihjetega loend.
close – .autocomplete(‘sulge’) sulgeb vihjeloendi, kui see oli eelnevalt avatud.

Üldiselt teame nüüd, kuidas vidinat konfigureerida ja hallata, kuid seni oleme näpunäidete loendi koostamiseks kasutanud ainult kohalikke andmeid. See sobib võimaluste uurimiseks, kuid ebatõenäoline reaalseks tööks. Tõenäoliselt peate oma serverisse salvestatud andmete põhjal vihjeid looma ja võib-olla üldse mitte.

Allika valik, mis, ma tuletan meelde, on kohustuslik ja määrab andmeallika, võib aktsepteerida ka rida, mis sisaldab URL-i, millele päring tuleb saata. Ja allikas saate määratleda oma funktsiooni, mis teeb seda, mida vajate. See on võib-olla kõige paindlikum meetod, mida analüüsime. Proovime saada geonames.org serverist mõned andmed vihjete loendi kujul

Esitan täielikult töötava koodi ja püüan selgitada, kuidas ja mis töötab.

example-17-8-4 .ui-autocomplete-loading ( taust: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") parem keskel no-repeat; ) #city ( laius: 25 em; ) #log ( kõrgus: 200 pikslit; laius: 600 pikslit; ületäitumine: automaatne; ) $(function() ( $("#linn").autocomplete(( allikas: function(request,sponse)) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", andmetüüp: "jsonp", andmed: ( funktsiooniklass: "P", stiil: "täis", maxRiud: 12, nimi_algusWith: taotlus.term ) , edu: funktsioon(andmed) ( vastus($.map(andmed.geonames, function(item)) ( return ( silt: item.name + ", " + item.countryName, value: item.name + " (" + item) .countryName + ")" + " [" + item.lat + ", " + item.lng + "]" ) ) )), minLength: 3, valige: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Midagi pole valitud!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ) ));
Toetab geonames.org

Kõigepealt vaatame HTML-i märgistust. Esimeses div elemendis huvitab meid ainult sisendelement, mille id city . Siia sisestame selle paikkonna algustähed (ladina keeles), mille kohta soovime teavet saada. Saadud teabe sisestamiseks kasutame elementi div koos tunnuslogiga.

Kui vaatame JavaScripti koodi, siis näeme, et seadete objekt sisaldab kolme atribuuti – nõutavat lähteomadust ning atribuute minLength ja select.
Arvestame ainult lähtevaraga, kuhu saate kirjutada oma funktsiooni. Sellel funktsioonil on kaks argumenti. Esimene argument on päring, ühte omadust, terminit sisaldav objekt, mis salvestab kasutaja poolt sisestusväljale sisestatud stringi. Teine argument on vastus – funktsioon, millega saadud vastust töödeldakse.

Lähteatribuudis määratletud funktsiooni sees on meil peaaegu piiramatu tegevusvabadus. Ja seetõttu kirjutame sinna ilma pikema jututa ajaxi päringu URL-ile http://ws.geonames.org/searchJSON, suvandis dataType näitame, et ootame vastuses andmeid JSON-vormingus. Andmevalikus määratleme päringuparameetritega objekti, mis saadetakse määratud URL-ile ( miks parameetrid täpselt sellised on – pead vaatama geonames.org serveri API dokumentatsiooni). Viimases parameetris edastame request.term – see, mida kasutaja sisestas.

Ajaxi päringu järgmises valikus - edusuvandis - kutsume vastuse töötlemise funktsiooni vastuseks . Sellele funktsioonile edastatavas argumendis saame serveri vastuses saadud andmeid töödelda mis tahes viisil. Me kasutame $.map meetodit, et rakendada igale esimeses argumendis edastatud objekti elemendile mingi funktsioon. Funktsiooni sees pääseme ligi objekti omadustele - item.countryName, item.lng, item.lat ( miks atribuudid on sellised, nagu nad on – vaadake veebiteenuse pakutavat API dokumentatsiooni). Funktsioon, mille me iga elemendi jaoks kirjutasime, tagastab objekti, mis sisaldab kahte omadust, mille me ise saadud andmete abil määratlesime. Saadud selliste objektide massiivist koostatakse vihjete loend.

Üldiselt midagi sellist... Kokkuvõtteks suur inimlik palve - kommentaarides, palun, saab põhimõtteliselt kiita või noita. Kui soovite esitada tehnilist küsimust, siis esitage see aadressil