Noțiuni de bază cu jQuery UI

link ce este jQuery UI?

jQuery UI este o bibliotecă widget și interacțiune construit pe partea de sus a Bibliotecii Jquery JavaScript pe care le puteți utiliza pentru a construi aplicatii web extrem de interactive. Acest ghid este conceput pentru a vă pune la curent cu modul în care funcționează jQuery UI. Urmați de-a lungul de mai jos pentru a începe.

link începeți prin verificarea demo-uri

pentru a obține o simt pentru ceea ce jQuery UI este capabil de, a verifica afară demo-uri UI.

în secțiunea demo-uri, navigarea listează toate interacțiunile și widget-urile oferite de jQuery UI. Alegeți o interacțiune sau widget și veți fi prezentat cu mai multe configurații demo pentru acel plugin special. Fiecare demo vă permite să vizualizați codul sursă, teme schimbare, și URL-ul poate fi întotdeauna marcată. De exemplu, consultați pagina demo a spațiului de umplere a widgetului acordeon.

link construi personalizat jQuery UI Download

odată ce aveți o înțelegere de bază a ceea ce jQuery UI este și ceea ce face, sunteți gata să-l încercați! Este timpul să mergeți la constructorul de descărcări de pe site-ul jQuery UI pentru a descărca o copie a jQuery UI. Download Builder jQuery UI vă permite să alegeți componentele pe care doriți să descărcați și să obțină o versiune personalizată a bibliotecii pentru proiectul dumneavoastră. Există trei pași simpli pentru construirea personalizat jQuery UI download:

link Pasul 1: Alegeți ce Componente ai nevoie

coloana principală a download Builder listează toate componentele JavaScript în jQuery UI clasificate în grupuri: core, interacțiuni, widget-uri, și efecte. Unele componente din jQuery UI depind de alte componente. Doar bifați casetele pentru widget-urile pe care doriți să le descărcați și orice dependențe necesare vor fi verificate automat, de asemenea. Componentele selectate vor fi combinate într-un fișier JavaScript personalizat jQuery UI.

link Pasul 2: Selectați o temă (sau rola propria temă personalizată)

în coloana din dreapta a download Builder, veți găsi un câmp în care puteți alege dintr-un număr de teme pre-proiectate pentru widget-urile jQuery UI.Puteți alege fie din diferitele teme pe care le oferim, sau puteți proiecta propria temă personalizată folosind ThemeRoller (mai multe despre asta mai târziu).

Setări tematice avansate: secțiunea temă a constructorului de descărcări oferă, de asemenea, câteva setări avansate de configurare pentru tema dvs. Dacă intenționați să utilizați mai multe teme pe o singură pagină, aceste câmpuri vor fi utile. Dacă intenționați să utilizați o singură temă pe o pagină, puteți sări peste aceste setări în întregime.

link Pasul 3: Alege o versiune de jQuery UI

ultimul pas în Download Builder este de a selecta un număr de versiune. Asigurați-vă că verificați nu numai ce versiune de jQuery UI alegeți, ci și versiunea de Jquery Core pe care Versiunea o acceptă, deoarece diferite versiuni ale bibliotecii acceptă diferite versiuni de jQuery. Pentru mai multe informații despre noutățile din fiecare versiune de jQuery UI, consultați ghidurile de actualizare și jurnalele de modificări ale proiectului.

link Faceți clic pe Descărcare!

ai terminat cu Download Builder! Faceți clic pe butonul Descărcare și veți obține un fișier zip personalizat care conține tot ce ați selectat.

link Prezentare generală de bază: Folosind jQuery UI pe o pagină Web

apoi, deschidețiindex.html din zip descărcat într-un editor de text. Veți vedea că se referă la tema dvs., jQuery și jQuery UI. În general, va trebui să includeți aceste trei fișiere pe orice pagină pentru a utiliza widget-urile și interacțiunile jQuery UI:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

după ce ați inclus fișierele necesare, puteți adăuga câteva widget-uri jQuery pe pagina dvs. De exemplu, pentru a crea un widget datepicker, veți adăuga un element de introducere a textului la pagina dvs. și apoi veți apela .datepicker() pe acesta. Ca aceasta:

HTML:

<input type="text" name="date">

JavaScript:

$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

link personalizarea jQuery UI la nevoile dumneavoastra

jQuery UI vă permite să-l personalizați în mai multe moduri. Ați văzut deja cum Download Builder vă permite să personalizați copia jQuery UI pentru a include doar porțiunile dorite, dar există modalități suplimentare de a personaliza acel cod pentru implementarea dvs.

link jQuery UI bazele: folosind opțiuni

fiecare plugin în jquery UI are o configurație implicită, care este furnizat la cazul cel mai de bază și comune de utilizare. Dar dacă doriți ca un plugin să se comporte diferit de configurația sa implicită, puteți suprascrie fiecare dintre setările sale implicite folosind „opțiuni”. Opțiunile sunt un set de proprietăți a trecut într-un widget UI jQuery ca un argument. De exemplu, widgetul glisor are o opțiune de orientare, care vă permite să specificați dacă glisorul trebuie să fie orizontal sau vertical. Pentru a seta această opțiune pentru un glisor pe pagina dvs., trebuie doar să o transmiteți ca argument, astfel:

$( "#mySliderDiv" ).slider({
 orientation: "vertical"
});

You can pass as many different options as you’d like by following each one with a comma (except the last one):

$( "#mySliderDiv" ).slider({
 orientation: "vertical",
 min: 0,
 max: 150,
 value: 50
});

doar amintiți-vă să înconjoare opțiunile cu paranteze buclat { }, și tu ești bine pe Mod. Desigur, exemplul de mai sus abia atinge ceea ce puteți face cu jQuery UI. Pentru a obține informații detaliate cu privire la întregul set de widget-uri jQuery UI, vizitați documentația jQuery UI.

link personalizare vizuală: Proiectarea unei teme jQuery UI

Dacă doriți să proiectați propria temă, jquery UI are o aplicație foarte șmecher pentru doar acest scop. Se numește ThemeRoller și puteți ajunge oricând la el fie făcând clic pe linkul „teme” din navigarea jQuery UI, fie pur și simplu mergând la jQuery UI ThemeRoller.

ThemeRoller oferă o interfață personalizată pentru proiectarea toate elementele utilizate de widget-uri jQuery UI. Pe măsură ce modificați „pârghiile” din coloana din stânga, widget-urile din dreapta vă vor reflecta designul. Fila Galerie a ThemeRoller oferă o serie de teme pre-proiectate (aceleași oferite de download Builder) pe care le puteți modifica sau descărca așa cum sunt.

link descărcarea tema

când faceți clic pe butonul „Download tema” în ThemeRoller, veți fi direcționat către Download Builder și tema personalizat va fi auto-selectat în meniul vertical Tema. Puteți configura pachetul de descărcare mai departe de acolo. După ce descărcați, veți vedea că pagina example.html este stilată folosind tema personalizată.

sfat rapid: dacă aveți nevoie vreodată pentru a edita tema, pur și simplu deschideți fișierul CSS și pentru a găsi în cazul în care se spune „pentru a vizualiza și modifica această temă, vizitați …”Această adresă URL va deschide tema Înmeroller pentru editare.

suport link: unde pot obține ajutor?