Există o versiune în limba engleză a acestui articol disponibilă.
In acest articol voi vorbi despre modul în care doar 10 minute folosind jScrollPane - bibliotecă pentru jQuery - puteți face o bară de defilare personalizată pe site-ul dvs. și cum să-l stil și configurat.
Informații de bază
Mai devreme sau mai târziu, web designer se confruntă cu faptul că bara de defilare de pe site-ul, pe care îl creează, uita-te neorganichno (și fiecare browser-le afișează în felul său). În multe cazuri, acest lucru nu este o problemă, cu toate acestea, veni peste acei clienți care plătesc pentru acest moment o atenție și cer ca barele de derulare au fost pictate într-o anumită culoare, au, de exemplu, margini rotunjite și săgețile (sus-jos, stânga-dreapta) nu afișat. Se pune o întrebare simplă: cum să faceți acest lucru? Poate CSS să ne ajute în acest caz? De fapt, mulți ani în urmă pe unele site-uri am văzut instrucțiuni CSS, care de fapt repictate scrollbar, dar funcționează numai atunci când toate dvs. de browser-ul IE preferat de la versiunea 6, iar în cazul nostru acest lucru nu este o opțiune. Cu toate acestea, dacă cineva este interesat, atunci a fost implementat aproximativ în felul următor:
Este suficient să setați lățimea și înălțimea, potrivite pentru cazul dvs. Se va întâmpla așa ceva:
Iată ce sa întâmplat ca rezultat:
Hooray, a funcționat. Acum rămâne doar să aplicăm stilurile necesare barei noastre de derulare. Să facem în tonuri gri și mai înguste (apropo, pentru jScrollPane există o temă predefinită pentru design):
Configurarea jScrollPane
Este posibil să observați că derularea cu rotița mouse-ului este prea lentă. Ei bine, este ușor de repara - jScrollPane vă permite să transferați o mulțime de parametri pentru personalizare (pentru o listă completă a se vedea aici):
Viteza de derulare de 70, în opinia mea, este optimă, dar puteți să experimentați pe cont propriu (valoarea implicită este de 10).
Un alt parametru important este responsabil dacă blocul nostru cu bara de defilare va fi actualizat automat. În ce caz este util acest lucru? De exemplu, atunci când blocul de defilare nu are o lățime fixă, ci una relativă (specificată în procente, em sau rem). În acest caz, dacă utilizatorul redimensionează fereastra, blocul nostru va schimba lățimea și va trebui să schimbați corect bara de derulare. Acest lucru se poate face folosind API-ul, care este disponibil în jScrollPane (mai multe despre aceasta mai târziu), dar este mai ușor să scrieți acest lucru:
În acest caz, bara de defilare va fi redefinită automat. Un alt scenariu pentru utilizarea acestui parametru este adăugarea dinamică a conținutului în blocul de defilare. În cazul în care un supracontrol automată nu, atunci când adăugați bara de defilare de conținut nu va fi actualizat și noul conținut nu va fi capabil să meargă (acesta va rămâne în afara blocului și nu va fi vizibil) - autoReinitialise de proprietate, pentru a evita această problemă. Rețineți că, în mod prestabilit, suprascrierea automată este efectuată foarte des - la fiecare jumătate de secundă. În cazul în care este suficient să actualizați bara de defilare fiecare, să zicem, 5 secunde, atunci trebuie să treci un alt parametru pentru autoReinitialiseDelay:
Valoarea este specificată în milisecunde.
De asemenea, rețineți că dacă focalizarea este setată pe un bloc cu o bară de defilare, utilizatorul poate derula cu săgețile sus și jos de pe tastatură. Dacă doriți să dezactivați această funcție, setați parametrul enableKeyboardNavigation la false.
API pentru lucrul cu jScrollPane
Ultimul lucru despre care voi vorbi este API-ul pentru gestionarea jScrollPane. Accesul la API este foarte simplu:
Acum puteți utiliza variabila api pentru a accesa funcțiile jScrollPane. De exemplu, acest cod
va începe o actualizare forțată a barei de derulare (nu uitați că puteți utiliza parametrul autoReinitialise pentru actualizarea automată). O altă metodă API interesantă este scrollToElement. care vă permite să derulați forțat la un element specific în container; acest element este trecut ca primul argument și poate fi definit fie ca un obiect jQuery, fie ca un nod DOM, fie ca un selector jQuery. Al doilea argument este o valoare booleană a adevărului sau a falsului. care determină dacă elementul la care suntem defilați ar trebui să fie chiar în partea de sus a containerului; dacă este setat la false. atunci jScrollPane va încerca să efectueze o derulare minimă astfel încât elementul să apară pur și simplu în zona vizibilă. Al treilea parametru trece de asemenea o valoare Booleană care indică dacă să derulați animat. Să demonstram această metodă cu un exemplu. Pentru a face acest lucru, vom face unele mici modificări la markup-ul nostru, care a fost folosit mai devreme:
Aici mai întâi declarăm variabila api. cu care vom efectua metodele jScrollPane și apoi leagăm manipulatorul evenimentului de clic la referința cu clasa .scroll_to_element. Când faceți clic pe un link, veți fi mai întâi împiedicat să procesați comportamentul standard folosind metoda prevenDefault (). astfel încât browserul să nu încerce să urmeze linkul. Apoi, se efectuează defilarea forțată și am setat ambii parametri logici la adevărat. astfel încât elementul se află în partea de sus a zonei vizibile și că derularea este animată.
Există mai multe metode care execută sarcini similare: scrollTo (scroll până la un anumit punct care este definit ca coordonatele x și y ale colțul din stânga sus al containerului); scrollToX și scrollToY (defilați la un anumit punct de-a lungul axei x sau y); scrollToPercentX și scrollToPercentY (derulați pe axa corespunzătoare pentru un anumit procent) și altele. În plus, API permite interoga jScrollPane: getIsScrollableH și getIsScrollableV (dacă este posibil pentru a derula pe orizontală și pe verticală); getContentPositionX și getContentPositionY (primi poziția x și, respectiv axa y); getPercentScrolledX și getPercentScrolledY (câte procente sunt derulate de-a lungul axelor x și y) și un număr de altele. Și, în sfârșit, pentru a readuce bara de derulare obișnuită în container, eliminând funcția jScrollPane, puteți folosi metoda distrugerii API.
Pe aceasta, probabil, voi termina revizuirea acestei biblioteci, care se poate dovedi folositoare pentru mulți dezvoltatori. După cum am văzut, acesta oferă nu numai o interfață pentru configurarea flexibilă, ci și metode API pentru gestionarea ulterioară. Biblioteca se află într-o stare de dezvoltare constantă; dacă găsiți o eroare sau doriți să sugerați implementarea unor funcționalități suplimentare, deschideți o nouă aplicație în depozitul de pe GitHub. Dacă raportați o eroare detectată, nu uitați să-l descrie în detaliu (versiunea utilizată a bibliotecii, versiunea jQuery pe site-ul dvs., utilizați scriptul JScrollPane).
Pentru dezvoltatorii Ruby on Rails
Vă mulțumim pentru înțelegerea și munca bună.
Urmați-mă pe Twitter pentru a obține actualizări despre articole noi >>
Autorizați, prin intermediul uneia dintre următoarele rețele sociale, să lăsați un comentariu:
Trimiteți-le prietenilor: