Cum să utilizați widget-ui iquery de autocompletare

În această lecție ne vom uita la una dintre noile componente ale jQuery UI 1.8 - widget Completare automată. câmpuri de formular AutoComplete poate fi o caracteristică foarte utilă pentru vizitatorii site-ul dvs., deoarece face mai ușor pentru a introduce informații. Această funcție poate fi utilizată, de exemplu, pentru câmpul, sau atunci când intră în țară, un oraș, sau așa ceva, care poate fi selectat din lista generală. jQuery UI Widget popular cu completare automată dezvoltatori, deoarece este ușor de utilizat, este destul de puternic și flexibil.

Una dintre proprietățile este de a trimite mesaje de la prieteni pe Facebook. Completarea automată este utilizat atunci când introduceți numele unui prieten. În acest tutorial, vom folosi jQuery UI Completarea automată pentru a crea un Widget sistem similar cu cel utilizat atunci când postați pe Facebook. Desigur, trimiterea mesajului nu va fi realizat. Asta ar trebui să se întâmple ca rezultat:

Cum să utilizați widget-ui iquery de autocompletare

Pasul 1 Noțiuni de bază

Trebuie să utilizați tema implicită (UI Ușurință) și asigurați-vă că versiunea 1.8 selectată în coloana din dreapta.

Pasul 2 HTML marcare

În primul rând, uita-te la

Acesta este un formular standard comun. Recipientul exterior

Este folosit pentru a seta stilul, iar elementul , la care este atașat Autocomplete, de asemenea, situate în interiorul celulei

. stil pentru este setat astfel încât acesta este un pic ascuns, dar stilul

Aceasta face să arate similar cu celelalte câmpuri de formular. recipient având în vedere clasa UI-helper-clearfix. Pentru a utiliza această clasă din mediul de lucru CSS jQuery UI.

Este necesar să se stabilească legături către fișierul despachetat din fișierul UI jQuery, precum și secțiunea foii de stil pagina:

Următoarele fișiere trebuie să fie conectat la secțiunea de capăt .

Pasul 3 stiluri de formă

Noi folosim o temă foarte simplu neutru în exemplul nostru. CSS este conținută în următorul fișier cu cod autocomplete.css (toate stilurile jQuery UI sunt setate în fișierul jquery-ui-1.8.custom.css):

Pentru a modela frontierele transparente minunate cu colțuri rotunjite utilizând RGBA reguli CSS3. -moz-border-radius. -webkit-border-radius și border-radius. IE nu are suport pentru oricare dintre aceste reguli, și, deși puteți utiliza un filtru pentru transparență germeni de redare, colturi rotunjite se poate face numai cu utilizarea de imagini. Eficiența Transparența RGBA nu sunt prezentate în acest exemplu în vigoare. Este probabil ca acest tip de formular pentru a fi folosit ca o fereastră modal plutitor peste conținutul paginii.

recipient

, care conține un câmp . care se vor alătura AutoComplete primește aceeași poziție și stil ca element . dar elementul în sine ascunde în interiorul recipientului. De asemenea, vom reduce dimensiunea sa și pentru a muta stânga. Pentru prin adăugarea numelui destinatarului este formatat în

. Nu supraîncărcați, și nu era nevoie să crească înălțimea

De asemenea, am stabilit stilul pentru numele destinatarului de a fi adăugat

, ca parte a . care conține un link. Practic stil se potrivește tema și, de asemenea, are colțuri rotunjite. Este important ca aceste elemente să aibă o structură de bloc și float, astfel încât acestea sunt completate corect. De asemenea, trebuie să rescrie unele stiluri de Automcomplete, a cerut să folosească tema jQuery UI.

Formularul ar trebui să arate în felul următor:

Pasul 4 Atașați Autocomplete

Acum trebuie să vă conectați la widget-ul de completare automată în

. Pentru a face acest lucru, utilizați următorul script:

Widget se alătură prin metoda autocomplete (). obiect este trecut ca un argument metodă literalmente care configurează opțiunea sursă și pentru a reveni selectați și schimbați funcția de evenimente.

Opțiunea sursă este utilizată pentru a specifica o sursă de propuneri de meniu Completarea automată. Noi folosim funcția ca o valoare pentru această opțiune, care are două argumente. Primul este un termen introdus în . iar al doilea - o funcție de apel invers, care este folosit pentru a transmite propunerile înapoi la widget-ul.

În această funcție, vom folosi metoda jQuery getJSON () pentru a transfera termenul într-un fișier PHP pe partea de server. fișier PHP utilizează termenul pentru a prelua numele persoanelor de contact similare din baza de date MySQL. Noi folosim JSONP pentru a returna datele înapoi la proces. O funcție de apel invers, care este trecut ca a doua opțiune sursă argument implică obținerea de date în matrice. Astfel, necesitatea de a crea un array gol și de a folosi jQuery fiecare metodă () pentru a gestiona fiecare element JSON matrice, care este returnat de server. Iterație se realizează pe fiecare element din matrice și adăugați fiecare propoziție într-o nouă matrice. De îndată ce o nouă matrice va fi construit, vom trece-l o funcție de apel invers pentru a afișa meniul widget.

În continuare, handler eveniment pentru select fi completate automat. Această funcție este realizată de către widget-ul de fiecare dată când o propunere este eliberată în meniul Completare automată. Această caracteristică are în mod automat două argumente - obiectul evenimentului, iar interfața de utilizare obiect, care conține propoziția selectată. Noi folosim această funcție pentru a formata numele destinatarului și adăugați-l la

. Doar creați un element pentru text și link-ul de element, care este utilizat pentru a elimina destinatarului. După ce numele formatată destinatarului este creat, acesta este introdus direct în fața camuflat .

Apoi vom adăuga un handler eveniment de modificare. Această funcție se numește atunci când valoarea . care este Autocomplete asociată. Pur și simplu eliminați valoarea . pentru că am adăugat deja o versiune formatată a containerului

Acest întreaga configurație care este necesară pentru o anumită aplicație, dar există o serie de caracteristici care sunt necesare pentru a face corectitudinea codului. După metoda autocomplete () pentru a adăuga următorul cod:

, care este atașat la completare automată noastre, aproape ascunse și containere

Are un stil care face sa arate ca celelalte forme ale câmpului. Pentru a completa înșelăciune vom adăuga un eveniment container handler click

, apăsând astfel butonul mouse-ului oriunde doriți concentrează validă . Acum, vizual și funcțional

Ea nu diferă de domeniul normal.

Pasul 5 cod și resurse suplimentare

Pentru a stoca o listă a tuturor numelor destinatarilor folosind baza de date MySql. Fișierul următor PHP primește datele trimise de getJSON () și trage numele corespunzătoare din baza de date:

Pentru a rula proba nevoie de un server de web PHP instalat și configurat, MySql și server și baza de date corespunzătoare și de masă. Atunci când un caracter este introdus în câmpul „To“, este transmis srever și este utilizată pentru a evacua din baza de date de orice nume care începe cu caracterul. Numele adecvate sunt apoi transmise înapoi la pagina și afișează meniul oferă:

concluzie

Formularul nostru este, în realitate, nimic nu se va trimite. Funcționalitatea este ușor de implementat cu procesarea eveniment legat de butonul „Send“.

jQuery UI Completarea automată widget face simplu pentru a se conecta la orice sursă de date și include un set bogat să se ocupe de evenimente pe care le putem folosi pentru a răspunde la câmpul de introducere a textului într-o entitate asociată sau o selecție de sugestii din meniu. Widget stilizat folosind un mediu de lucru CSS jQuery UI și poate fi ușor configurat pentru a se asigura că se potrivi cu tema site-ului. În general, widget descris este foarte ușor de utilizat și oferă o mare funcționalitate.

5 lecții coloana ultima „jQuery“

Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.

jQuery plug-in pentru a crea o cronologie.

jQuery plugin pentru a crea o diagramă Gantt.

Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.

Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!

Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!

Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.

Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!