jQuery pentru începători (Partea 6) - jQuery UI și citirea în continuare

În ultima noastră lecție jQuery pentru începători tutoriale, vom examina pe scurt jQuery UI - cel mai folosit plugin jQuery pentru adăugarea de interfețe grafice pentru utilizatorii web. De la forme fanteziste și efecte vizuale, la widget-uri draggable, spinners și casete de dialog - jQuery UI vă oferă puterea de a crea web-uri bogate de web.

Dacă nu ați făcut-o deja, asigurați-vă că citiți articolele anterioare din seria:

• Introducere: Ce este jQuery și de ce ar trebui să vă pese? Efectuarea interacțiunii pe Web: o introducere în jQuery Efectuarea Interactivității pe Web: o introducere în jQuery jQuery este o bibliotecă de scripting pe partea clientului pe care aproape orice site web modern o folosește - face site-urile interactive. Nu este singura bibliotecă Javascript, dar este cea mai dezvoltată, cea mai utilizată și cea mai utilizată ... Read More
• 1: selectori și elemente de bază jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator de web modern și de ce e minunat. În această săptămână, cred că este timpul să ne murdărim mâinile cu un cod și să învățăm cum ... Citiți mai multe
• 2: Metode Introducere La jQuery (Partea 2): Metode și funcții Introducere JQuery (Partea 2): Metode și funcții Aceasta este o parte a unei introduceri incipiente a serverelor de programare web jQuery. Partea 1 a acoperit elementele de bază ale jQuery cu privire la modul de includere a acestora în proiect și selectori. În partea a doua, vom continua cu ... Citește mai mult
• 3: În așteptarea încărcării de pagină și a funcțiilor anonime Introducere În jQuery (Partea 3): Așteptare pentru pagină Pentru încărcare și funcții anonime Introducere În jQuery (Partea 3): Așteptarea paginii Funcții de încărcare și anonime jQuery este o abilitate esențială pentru dezvoltatorul web modern și, în această scurtă mini-serie, sper să vă dau cunoștințele pentru a începe să o utilizați în propriile proiecte web. În ... Citește mai mult
• 4: Evenimente jQuery Tutorial (Partea 4) - Ascultarea participantilor jQuery Tutorial (Partea 4) - Ascultarea evenimentelor Astazi o sa-i dam o nota si sa aratam unde jQuery straluceste - evenimente. Dacă ați urmat tutorialele trecute, acum ar trebui să aveți o înțelegere destul de bună a codului de bază ... Read More
• Depanarea cu instrumentele de dezvoltator Chrome Aflați problemele site-urilor Web cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Imaginează-ți problemele site-ului cu ajutorul instrumentelor pentru dezvoltatori Chrome sau Firebug Dacă ați urmat tutorialele mele jQuery până acum, este posibil să fi întâlnit deja unele probleme de cod și să nu știi cum să le repare. Atunci când se confruntă cu un bit non-funcțional de cod, este foarte ... Citește mai mult
• 5: AJAX jQuery Tutorial (Partea 5): AJAX-le pe toate! jQuery Tutorial (Partea 5): AJAX-le pe toate! Pe măsură ce ne apropiem de sfârșitul seriei mini-tutorial jQuery, este timpul să ne uităm la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site să comunice cu ... Citește mai mult

Ce este jQuery UI și de ce ar trebui să-l folosesc?

jQuery UI vă oferă toate componentele necesare unei aplicații web moderne cu o interfață grafică. Din lipsă de o descriere mai bună, este o colecție de widget-uri.

Pentru o idee rapidă despre ceea ce puteți face cu ea, pur și simplu navigați în jurul MakeUseOf. În conținutul nostru, conținutul este de fapt doar separat divs cu o listă neordonată pentru a acționa ca un index. Rulați funcția jQuery tabs pe ele, și se transformă în magice în taburi. Minunat! Puteți chiar încărca conținutul fila prin AJAX dacă doriți.

Pagina Recompense utilizează, de asemenea, a “modal popup” caseta de dialog pentru a confirma acțiunea utilizatorului și pentru a returna mesajele. Pentru a focaliza atenția utilizatorului, aveți posibilitatea ca caseta de dialog să diminueze restul conținutului paginii până când interacțiunea sa terminat.

Pe site-ul nostru de răspunsuri, folosim simpla tooltip caracteristică pentru a oferi sugestii asupra butoanelor.

jQuery UI excelează atunci când vine vorba de formulare, oferind acces la o multitudine de glisoare și pickers. Sunt un mare fan al lui DatePicker widget-ul meu, pe care îl puteți încărca peste o casetă de introducere obișnuită a textului în care utilizatorul trebuie să introducă o dată.

Pare complicat, nu-i așa? Vă puteți imagina codarea ceva de genul asta în JavaScript pur? Acesta este modul în care faceți acest lucru cu jQuery UI:

$ ( "# DateField") DatePicker ().;

Nu voi mai petrece timp să explic cât de minunat este faptul că demo-urile oficiale jQuery UI oferă o imagine de ansamblu bună a tuturor caracteristicilor disponibile, precum și a mostrelor de cod simple. Du-te să citești.

Adăugarea jQuery UI

Cea mai simplă modalitate de a începe cu jQuery UI este de a adăuga următoarele linii în antetul dvs. - dar asigurați-vă că acestea sunt adăugate AFTER referința principală jQuery, deoarece jQuery UI necesită jQuery pentru a fi preîncărcat. Aveți nevoie atât de o referință la script-ul plugin-ului, cât și de a stylesheet care conține descrierea vizuală a acelor elemente UI.

>