Conținut interactiv, descrescător pe site.
Paginile interactive ale site-urilor sunt populare pentru utilizatori, preiau site-ul web la un nou nivel, dar în plus pot să facă paginile web mai convenabile. În această lecție vă voi arăta modul în care putem utiliza conținutul drop-down interactiv pe site-uri web.
De exemplu, în cazul în care site-ul nostru Web conține un director, care presupune existența unor fotografii și orice informații care descriu fiecare dintre acestea, utilizatorul este mult mai convenabil pentru a vedea aceste informații pe aceeași pagină, decât tot timpul pentru a trece la unul nou, și apoi din nou reveniți pentru a vedea alte instanțe din directorul web. Dar pentru a se potrivi totul pe o pagină web este foarte problematică: atunci pagina web va deveni foarte lungă și, cred că nu este foarte convenabilă. În astfel de situații, vom contribui la conținutul web interactiv de pe site, care va apărea într-un moment în care utilizatorul va avea nevoie de el și va dispărea din nou, atunci când utilizatorul paginii web o dorește. Acesta este sensul interactivității site-urilor web - utilizatorul efectuează acțiuni, iar site-ul interactiv își îndeplinește dorințele. Acest lucru poate fi valabil și pentru catalogul de produse, unele fotografii cu o descriere și chiar și doar atunci când o pagină web trebuie să fie situat într-o mulțime de conținut (astfel încât să nu facă prea mult timp), pentru notele ascunse, care pot să apară și să dispară. Cred că veți găsi mai multe cazuri pentru utilizarea unei astfel de interactivități web. Și cel mai important lucru este să îl faci suficient de simplu. Să trecem de la cuvinte la fapte și să începem!
1. Deci, vom crea o pagină web pentru o companie care se ocupă cu un ambalaj frumos de cadouri. Pe pagina noastră web interactivă va fi un catalog cu fotografii, pe care vizitatorul poate vedea conținutul interactiv cu informații despre acest pachet. Apăsând din nou, se va închide fila web interactivă. Deci, fără a merge la un nou site web, utilizatorul poate vizualiza confortabil toate opțiunile. În plus, imaginea deschisă va schimba stilul și va arăta puțin diferit. Și toate astea vom face doar cu câteva șiruri de cod jQuery. Vom începe cu un design simplu al paginii web în sine. Creați fișiere html și css și le numiți index.html și style.css. Nu voi crea un design complicat, deoarece scopul acestei lecții este puțin diferit: vă arată cum să creați o pagină web cu conținut interactiv. Vom crea o pagină simplă cu secțiunea antet, de navigare și de conținut, unde vor fi imaginile noastre interactive. Pentru aceasta, în index.html, scrieți următorul cod:
Cadou "Zi și Noapte"
Un cadou magnific în hârtie neagră, cu un trandafir alb.
Clasice și eleganță
Cadou "Tenderness"
Culorile luminoase și florile blânde de primăvară vă vor transmite toate sentimentele tale delicioase!
Cadou "Zi și Noapte"
Un cadou magnific în hârtie neagră, cu un trandafir alb.
Clasice și eleganță
Cadou "Tenderness"
Culorile luminoase și florile blânde de primăvară vă vor transmite toate sentimentele tale delicioase!
Cadou "Zi și Noapte"
Un cadou magnific în hârtie neagră, cu un trandafir alb.
Clasice și eleganță
Cadou "Tenderness"
Culorile luminoase și florile blânde de primăvară vă vor transmite toate sentimentele tale delicioase!
Cadou "Zi și Noapte"
Un cadou magnific în hârtie neagră, cu un trandafir alb.
Clasice și eleganță
Cadou "Tenderness"
Culorile luminoase și florile blânde de primăvară vă vor transmite toate sentimentele tale delicioase!
Aici totul este extrem de simplu. Eticheta antetului site-ului web, eticheta de navigare de top, eticheta secțiunii cu conținut interactiv și eticheta subsolului. În eticheta cu conținutul există opt poze, fiecare având propria sa imagine (le puteți găsi în materiale suplimentare). După fiecare etichetă a imaginii există o etichetă div, în care este scrisă descrierea corespunzătoare pentru fiecare imagine interactivă (am două tipuri de descrieri, dar veți avea cu toții diferite, desigur). . Toate aceste etichete div din aceeași clasă de clasă = „Descriere De asemenea, am conectat deja la dosarul nostru cu stilurile de pagină, dar noi încă stiluri încă, astfel încât în această pagină etapă arată astfel:
Aici trebuie să fim atenți la faptul că ascundem blocurile cu o descriere a imaginilor, atribuind tuturor divizilor afișarea descrierii clasei: nici una. Acesta este stilul care va schimba ulterior codul nostru jQuery, deschizând și re-ascunzând conținutul interactiv din drop-down.
După aplicarea acestor stiluri, pagina noastră web va arăta astfel:
3. Este timpul să ne angajăm în interactivitatea paginii noastre web. În primul rând, trebuie să descărcați și să conectați biblioteca jQuery la pagina web. Puteți să o descărcați de la jquery.com sau să o găsiți în fișierele de materiale suplimentare pentru această lecție. Creez un folder separat de scripturi pentru toate scripturile. De asemenea, creați un astfel de dosar, puneți fișierul bibliotecii jquery acolo și conectați-l în documentul index.html între etichetele capului.
4. Creați un nou fișier de script Java și salvați-l și în folderul de script-uri cu numele myscript.js. Îl conectăm la documentul index.html. Fac asta înainte de eticheta de închidere a corpului.
De ce în cele din urmă? Deoarece în acest fel pagina noastră se va încărca mai repede decât dacă am conectat acest fișier la început.
5. Mergeți la fișierul nou creat și începeți să creați interactivitate pentru pagina noastră web.
Vor fi doar câteva linii care vor face ca conținutul nostru interactiv să fie deschis și închis, iar elementul activ își schimbă stilul.
6. Când pagina noastră este gata, funcția este lansată. Funcția este un ascultător de evenimente care răspunde la un clic pe un element din clasa "cadouri" (această clasă este atribuită tuturor imaginilor).
Când are loc un clic, executați o funcție care găsește următorul div, care apare după imaginile (acest div cu o descriere a imaginii) și „atârnă“ pe comutator ei slideToggle. Acest comutator funcționează după principiul "deschiderii conținutului când faceți clic și închideți primul când faceți clic din nou".
Următorul rând "se blochează" pe imaginea toggleClass, care va atribui clasa "activ" imaginii când faceți clic pentru prima dată pe ea și o ștergeți atunci când o repetați.
Asta e tot, rămâne doar să alocăm clasei "activ" în document cu stilurile. Să facem acest lucru: mergeți la style.scc și scrieți următoarea linie:
Puteți vedea cum funcționează scriptul în browser prin reîncărcarea paginii.
Pentru a obține noi lecții despre modul în care puteți utiliza în continuare jQuery (și nu numai), abonați-vă la actualizarea blogului. Îți promit lecții interesante și utile! Vă mulțumesc pentru atenție și noroc!
Trimiteți-le prietenilor: