Share
În acest tutorial vom folosi widgetul glisorului jQuery UI pentru a crea un cursor de conținut atractiv și funcțional. Vom avea un container, care are o serie de elemente fiecare conținând diferite blocuri de conținut. Vor exista prea multe dintre aceste elemente pentru a fi afișate simultan, astfel încât să putem utiliza cursorul pentru a muta diferitele blocuri de conținut în și din vedere.
jQuery UI este biblioteca oficială de widget-uri și utilități construite pe partea de sus a jQuery; este foarte usor de folosit, extrem de configurabil si robust si extrem de usor de utilizat. Pentru a urma tutorialul, veți avea nevoie de o copie a celei mai recente versiuni a bibliotecii; acesta poate fi descărcat utilizând constructorul de descărcări jQuery UI la http://jqueryui.com/download. Deși putem alege oricare dintre temele disponibile, aș recomanda utilizarea temei implicite de netezime. jQuery UI include o copie a versiunii curente a jQuery, deci nu este nevoie să descărcați acest lucru separat.
Creați un dosar nou undeva la îndemână și îl numiți glisor. În acest director, creați două foldere noi; unul numit jqueryui și unul numit imagini. Despachetați arhiva descărcată a bibliotecii în dosarul jqueryui; în Explorer sau Finder, ar trebui să ajungeți la următoarea structură de directoare:
Să începem mai întâi pagina de bază și mai întâi codul HTML; în editorul dvs. de text creați următoarea pagină:
jQuery UI Slider Unele nebuloase galactice bine cunoscute și statisticile lor vitale
Nebuloasa Omega
- Distanța de la Pământ:
- 5000 - 6000 de ani
- Diametru:
- 15 ani lumina
- Masa:
- 800 de mase solare
- Numar catalog:
- M17 / NGC6618
- Descoperit în:
- 1764
- Descoperitor:
- Philippe Loys de Chéseaux
Salvați aceasta ca slider.html în folderul glisant. În capul paginii, facem legătura cu foaia de stil jQuery UI, care conține toate CSS-urile necesare pentru fiecare componentă a bibliotecii. Poate părea o pierdere; în unele moduri este așa cum folosim doar o singură componentă, dar folosind o foaie de stil de 26KB. Cu toate acestea, folosind un instrument cum ar fi YUICompressor, putem schimba cu ușurință acest lucru, și cu GZipping prea putem scăpa și mai mult. De asemenea, ne facem legatura cu propria noastra coloana personalizata, pe care o vom crea ulterior.
Nu am adăugat niciun stil, dar pentru referință, următoarea captură de ecran afișează widgetul glisant implicit:
Pe pagina pe care o avem este marcajul pentru conținut și cursorul; avem un element exterior de rezervă pe care l-am dat numele de clasă ui-corner-toate. Aceasta este una dintre clasele vizate de foaia de stil jQuery UI și va da containerului nostru (și celorlalte elemente pe care le oferim) colțuri frumoase rotunjite. Utilizează CSS3 pentru a realiza acest lucru, astfel încât nu toate browserele sunt suportate, dar utilizatorii Firefox, Safari sau Chrome îi vor vedea.
În interiorul containerului avem un element de titlu care descrie conținutul, urmat de un alt element container (care va avea, de asemenea, coloane rotunjite în browserele de suport); când vom veni să adăugăm CSS, acest element va primi o regulă de depășire a ascunsei care va ascunde majoritatea blocurilor de conținut individuale și ne va permite să le glisăm în vedere folosind glisorul. Acest element va funcționa ca vizualizator.
În cadrul vizualizatorului avem un element final al containerului; motivul pentru aceasta este performanța - atunci când ajustăm proprietatea CSS din stânga cu jQuery, vom selecta și manipula un element doar în loc de multe blocuri de conținut. Utilizăm un alt nume de clasă din biblioteca UI pe acest element - clasa ui-helper-clearfix, care elimină automat elementele plutitoare în cadrul fiecărui element pe care este aplicat.
În continuare, este un exemplu de bloc de conținut; Am arătat doar unul din ele în exemplul de cod de mai sus, pentru a arăta mai multe ar fi o repetare inutilă. În fișierul sursă există șapte dintre ele, dar puteți pune cât mai multe în ceea ce vă place și glisorul va funcționa în continuare așa cum ar trebui. Fiecare bloc de conținut conține o rubrică, o imagine și o listă de definiții, care semantic este probabil cea mai bună alegere pentru acest exemplu, dar nu neapărat necesară în alte implementări. Blocurile de conținut pot conține destul de mult ceea ce au nevoie, cu condiția ca fiecare container să aibă o dimensiune fixă; veți vedea de ce este important să ajungem să adăugăm JavaScript mai târziu.
După ce elementul de vizualizare a venit un container gol, care va fi transformat în widget-ul glisorului odată ce vom invoca biblioteca UI. Acesta este tot conținutul HTML de care avem nevoie. În urma acestui lucru, facem legătura cu jQuery și cu fișierele sursă ale jQuery UI; din nou, acest fișier conține toate JavaScript necesare pentru a rula întreaga bibliotecă UI, care pentru acest tutorial este mai mult decât avem nevoie. Există fișiere individuale pentru miez și fiecare component separat, care pot reduce amprenta bibliotecii. Atât fișierele JS jQuery cât și jQuery UI sunt deja minime.
În adevăr, nu trebuie să ne facem griji cu privire la stilul widget-ului slider în sine; tema pe care am descărcat-o împreună cu biblioteca va face asta pentru noi. CSS pe care urmează să-l adăugăm este destul de arbitrar în scopul acestui tutorial, să ordonăm lucrurile și să-i oferim un aspect minimal de bază. Atâta timp cât blocurile individuale de conținut (dat un nume de clasă al elementului) au o lățime fixă și sunt flotate la stânga în interiorul elementului transportor și dacă spectatorul are setul de suprapunere setat la ascuns totul ar trebui să funcționeze conform așteptărilor.
Într-un fișier nou în editorul de text adăugați următorul cod:
h2 text-aliniere: centru; font: normal 150% Georgia; #sliderContent width: 650px; margin: auto; padding: 0 50px 50px; culoare de fundal: #ebebeb; frontieră: 1px solid # 898989; .viewer width: 607px; height: 343px; margine: 0 auto 40px; padding: 1px; overflow: ascuns; Poziția: relativă; frontieră: 1px solid # 898989; .conținător de conținut width: 610px; height: 335px; Poziția: relativă; .item width: 304px; plutește la stânga; font-family: Tahoma; text-align: center; culoare de fundal: #ebebeb; .item h2 font-size: 100%; margine: 10px 0; .itr dl margine: 10px 0; .itm dt, .item dd float: left; lățime: 149px; text-align: dreapta; margin: 0; font-size: 70%; .itm dt font-weight: bold; marja de-dreapta: 5px; .item dd text-aliniat: stânga; .it img border: 1px solid # 898989; culoare de fundal: #FFFFFF; padding: 1px;
Salvați acest lucru ca slider.css în folderul glisant. Pagina noastră ar trebui să arate astfel:
Tot ce trebuie să facem acum este să adăugăm JavaScript care va inițializa cursorul și va controla blocurile noastre de conținut. Imediat după ce elementul script care leagă jQuery UI în slider.html adăugați următorul cod:
Este un fragment foarte scurt, simplu, de cod, cu foarte puține lucruri; haideți să aruncăm o privire la ea liniară; În termen scurt, document.ready am setat câteva variabile astfel încât să putem arhiva elementele din pagina pe care o vom manipula din motive de performanță; acest lucru face ca codul nostru să ruleze mai repede, deoarece traversăm DOM și selectând fiecare element o singură dată.
Selectăm elementul transportorului, în primul rând prin direcționarea numelui său de clasă; deoarece utilizarea unui selector de clasă este ineficientă, oferim selectorului un context al elementului sliderContent. Contextul este furnizat cu ajutorul unui selector id, astfel încât întreg DOM nu trebuie să fie traversat. De asemenea, selectăm colecția de blocuri de conținut în același mod.
Odată ce am stocat selectorii, putem stabili lungimea elementului transportor; în CSS a fost setat la lățimea a două dintre blocurile de conținut, dar pentru a funcționa corect, casetele de conținut trebuie să plutească alături unul de celălalt, astfel încât transportorul trebuie să fie suficient de larg pentru a se adapta tuturor.
Pentru a nu restricționa numărul de blocuri de conținut care pot fi introduse în widget-ul, nu avem un hardcode cu o lățime stabilită în acesta; în schimb, obținem numărul de blocuri de conținut și înmulțim cu lățimea fiecărui bloc. Acesta este motivul pentru care este important să setați o lățime fixă pe blocuri. Trebuie să folosim funcția parseInt a JavaScript când extragem lățimea blocurilor deoarece metoda jQuery css returnează o valoare de șir în modul getter.
Apoi vom crea un obiect de configurare literală care va fi trecut în metoda glisorului jQuery UI și folosit pentru a seta unele proprietăți ale widgetului glisorului. Obiectul de configurare are două proprietăți, max și diapozitiv. Valoarea maximă a proprietății este un întreg care reprezintă lățimea elementului transportor minus lățimea spectatorului. Aceasta va fi valoarea maximă pe care mânerul glisorului poate atinge.
Valoarea proprietății diapozitivului este o funcție anonimă care va primi automat două argumente; obiectul inițial al evenimentului și un obiect pregătit care conține proprietăți utile referitoare la widget. Nu folosim deloc primul argument, pe care îl definim ca e, dar trebuie să îl includem pentru a avea acces la cel de-al doilea argument pe care îl numim ui.
Evenimentul de diapozitive este un eveniment personalizat expus de API-ul cursorului, iar funcția pe care o stabilim ca valoare va fi apelată de fiecare dată când apare o interacțiune de diapozitive. Ori de câte ori evenimentul este declanșat, pur și simplu manipulam proprietatea stilului stâng al elementului transportor negativ cu aceeași valoare ca și glisorul. Putem obține valoarea pe care glisorul este mutat la utilizarea proprietății valorii obiectului ui.
Am setat valoarea maximă a cursorului la lungimea elementului transportor, în acest exemplu ajunge la 2128 pixeli, deci valoarea maximă este 2128. Aceasta nu este în pixeli, după cum veți vedea în următoarea captură de ecran, cursorul în sine este de aproximativ 650 de pixeli în lungime. Dar, dacă mutăm cursorul la aproximativ jumătatea drumului, valoarea raportată în obiectul ui va fi în jurul valorii de 1064, așa că mișcăm marginea din stânga a transportorului acești mulți pixeli la stânga sau la dreapta.
Nu trebuie să ne facem griji pentru a detecta direcția în care a fost deplasat cursorul; dacă mânerul glisorului a fost deja deplasat spre dreapta, proprietatea CSS din stânga dacă transportorul va avea deja o valoare negativă. Când diminuăm un număr negativ de la un număr negativ, rezultatul este, desigur, un număr pozitiv, astfel că transportorul se va deplasa înapoi așa cum ar trebui. Pagina de completare ar trebui să apară acum cu glisorul:
Ar trebui să găsiți că funcționează așa cum era de așteptat și că diferitele blocuri de conținut pot fi mutate în și din vedere utilizând widget-ul glisorului. Pe lângă interacțiunea standard de tragere, de asemenea, încorporată în cursor este adăugarea utilă a unei interacțiuni de clicuri; dacă faceți clic oriunde pe pistă, mânerul este mutat automat în poziția respectivă și funcția de redirecționare a diapozitivelor este executată.
În acest tutorial am analizat modul în care codul HTML utilizat pentru glisor (un container simplu gol), stilul implicit aplicat de bibliotecă și modul în care poate fi configurat și inițializat cu codul nostru.
Glisorul este un plus mare pentru orice interfață; este ușor de configurat și ușor de folosit de către vizitatorii noștri, este tactil și interactiv și poate fi folosit într-o varietate de situații, de la mutarea conținutului în jur, ca în acest exemplu sau, de exemplu, un control al volumului pe o aplicație web streaming.
Accentsconagua