În această lecție vom acorda atenție unui plugin foarte interesant, facilitate, bibliotecă - numiți ceea ce vrei. Pentru a înțelege mai bine lucrul plug-in-ului, îl vom aplica într-un mic proiect.
În calitate de dezvoltatori web, ne ocupăm în fiecare zi cu câteva caracteristici gata făcute, indiferent dacă este vorba de un mic fragment sau de un cadru întreg. Dacă ideea dvs. nu are cerințe specifice, este posibil să găsiți cipuri deja pregătite pentru a rezolva problema. Dar, de regulă, astfel de descoperiri sunt concepute pentru o audiență largă.
De aceea, vom continua seria de lecții despre unele plug-in-uri, efecte și tehnici avansate. Dacă pluginurile sunt mici, le vom distruge și vom vedea cum se întâmplă magia. În caz contrar, vom crea proiecte mici pentru a înțelege cum pot fi folosite în lumea reală.
Cunoașteți stickyFloat
Iată câteva informații:
Dar hai să facem față, această opțiune nu va funcționa la fel în toate browserele. Cu această problemă puteți foarte mult namuchatsya, sortarea tot felul de opțiuni și în cele din urmă veți ajunge în continuare la ideea că, în aceste scopuri, este mai bine să utilizați scenariul.
De asemenea, avem nevoie de conținut pentru a pluti în jurul paginii atunci când ne deplasăm în sus și în jos, dar în interiorul containerului părinte.
Deoarece domeniul web este foarte larg, puteți găsi cu ușurință un instrument pentru a rezolva această problemă. Să considerăm unul dintre ei, în opinia mea, mai practic și mai fiabil.
Deconstruiți logica
Logica acestui plugin este destul de simplă. Permiteți-mi să vă dovedesc asta. Amintiți-vă ce funcționalitate este implementată de acest plugin? Creează un element plutitor:
Să ne uităm la un mic machet care demonstrează structura paginii noastre:
Lucrarea acestui plugin poate fi delimitată în următorii pași:
- Se calculează poziția curentă a părintelui elementului plutitor în raport cu documentul. Imaginea este marcată ca 1.
- Obținem înălțimea părintelui - așa că vom ști când să oprim elementul plutitor, astfel încât să nu depășească părintele. Marcat ca 2.
- Calculăm cât de mult am coborât - pentru asta avem nevoie de date despre părinte - astfel încât să fim siguri că nu am depășit limitele. În imaginea de mai sus, linia orizontală servește ca limită superioară ipotetică a afișajului curent. În acest caz, distanța va fi distanța de la punctul la punctul care formează linia. Este marcat ca 3.
- Folosind valorile pe care le-am calculat mai sus, putem afla cu ușurință în ce poziție avem nevoie pentru a muta elementul plutitor.
Dacă nu înțelegi nimic, nu-ți face griji. Să examinăm următorul exemplu:
- Elementul plutitor se află la o distanță de 10px față de marginea superioară a părintelui său.
- Înălțimea părintelui este de 100 pixeli.
- Utilizatorul a coborât la 50px într-un caz și 150px în celălalt.
Cunoscând aceste informații, puteți calcula că:
În primul caz, elementul plutitor nu trebuie să se miște. De ce? Deoarece nu suntem adânc în adâncurile paginii și avem încă un spațiu care este afișat pe ecran.
În al doilea caz, vom trece deja. Când ajungem la 150px, 10 se obține din distanța dintre elementul plutitor și părinte, restul fiind obținut din diferența dintre cele două puncte menționate anterior.
Dacă tot nu înțelegi nimic, nu te supăra. Veți avea o altă șansă când ne uităm la cod.
Dezasamblam codul
Acest plugin durează doar 30 de linii de cod. Acum, aș dori să detaliem fiecare linie și să explic explicația ei. Codul pluginului:
Pasul 1 - începutul obișnuit al plugin-ului pe jQuery. După cum știți, parametrul opțiuni este un obiect special care conține datele de inițializare pentru plugin. lockBottom, determină dacă elementul plutitor va fi în partea de jos a părintelui sau va dispărea. Aici totul.
Pasul 2 - Accesați elementul. În acest context, acest lucru se referă la elementul DOM pe care l-am transferat la funcție. De exemplu, dacă ați trecut la metoda #menu, acest lucru va indica elementul de pagină cu acest cod.
Pasul 3 - Calculați indentarea interioară de la elementul părinte și salvați aceste date pentru o utilizare ulterioară.
Pasul 4 - Aici am calculat poziția elementului părinte folosind offsetul metodei jQuery încorporate. Va trebui să ne referim la acest element de mai multe ori. Variabila $ obj conține un element plutitor. Citiți documentația API-ului jQuery dacă nu sunteți familiarizat cu aceste metode.
Pasul 5 - aceste acțiuni pot fi adesea observate la dezvoltarea unui plug-in pe jQuery. În general, este o practică bună să dați variabilelor o valoare implicită.
Pasul 6 - Plug-in-ul va folosi adesea valoarea CSS de vârf, deci trebuie să alocăm poziționarea absolută elementului plutitor în cazul în care nu am făcut-o înainte.
Pasul 7 - de mai sus am explicat de ce este nevoie de LockBottom. Dacă este adevărat, atunci începem să facem calcule. Calculam punctul la care trebuie să poziționăm elementul.
În general, acest lucru se poate face calculând înălțimea părintelui, blocul plutitor cu toate indicele, dar această opțiune poate duce la consecințe imprevizibile.
Pasul 9 - În primul rând, trebuie să oprim animația prezentă pe pagină. Pentru aceasta, folosim metoda stop.
Pasul 10 - aceste trei variabile conțin valori pe care le vom avea nevoie în viitor.
- trecutStartOffset verifică dacă am depășit limita superioară a elementului părinte. Rețineți că folosim metoda offset pentru a găsi distanța dintre începutul paginii și elementul părinte. Pentru a afla cât de mult am coborât, folosim metoda scrollTop. Aceasta este distanța dintre începutul documentului și poziția curentă a blocului plutitor.
- objFartherThanTopPos verifică dacă elementul plutitor este în poziția prevăzută implicit - în partea superioară a elementului părinte. Dacă ridicăm pagina depășim limitele părintelui, atunci în acest caz nu pornim mișcarea.
- objBiggerThanWindow verifică dacă înălțimea elementului plutitor depășește dimensiunea ferestrei. Dacă este așa, atunci nu are nici un rost să aplicăm acest efect.
Pasul 11 - Acesta este locul în care pluginul calculează dacă trebuie să mutați elementul. Procesul este următorul:
- Se efectuează o verificare pentru a determina dacă utilizatorul se află în intervalul elementului părinte. De asemenea, verificăm poziția elementului plutitor: dacă este mai sus sau mai jos.
- Așa cum am menționat deja, vom folosi plug-in-ul doar dacă dimensiunea elementului plutitor nu depășește dimensiunea ferestrei.
Începem animația dacă ambele condiții sunt adevărate.
Pasul 12 - Aici definim variabila newpos, care va stoca poziția la care avem nevoie pentru a traduce elementul plutitor. După cum ați înțeles deja, calculele sunt mai ușor de înțeles dacă studiați cu atenție imaginea la începutul lecției. Obținem distanța la care suntem deplasați, adăugăm distanța dintre indentarea părintelui și scădem distanța de la începutul paginii la părinte - asta e. Aceste calcule ne vor ajuta să obținem distanța în pixeli, în ce poziție avem nevoie pentru a plasa un element plutitor.
Pasul 13 - Dacă am coborât sub intervalul prescris, pur și simplu plasăm acest element în poziția de la marginea inferioară.
Pasul 14 - Dacă suntem dincolo de limitele superioare, atunci facem același lucru doar cu valori diferite.
Pasul 15 - Asta este! Noi facem animație doar prin metoda jQuery animate, trecând valoarea la început.
utilizarea
Dacă nu ați dat seama încă cum să utilizați acest plugin, iată un exemplu:
Acum vom scrie un mini-proiect în care vom folosi acest plugin.
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați 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!
Articole similare
Trimiteți-le prietenilor: