Un vizualizator de conținut pentru proba bullet-proof

În acest tutorial, ne vom uita la modul în care putem crea cu ușurință un vizualizator de conținut atractiv și cu economie de spațiu care funcționează chiar și cu JavaScript dezactivat. Vom construi un nucleu solid de HTML semantic, în stil cu câteva CSS de bază și vom folosi apoi jQuery pentru a adăuga îmbunătățiri suplimentare sub forma animațiilor de tranziție.

Următoarea imagine a ecranului arată ce vom termina până la sfârșitul tutorialului:

Noțiuni de bază

Mai întâi, să creăm pagina HTML care stă la baza pentru vizualizatorul nostru de conținut; într-un fișier nou din editorul dvs. de text, creați următoarea pagină:

    Bullet-proof Content Viewer      Panoul 1
 Panoul 2
 Panoul 3
 Panoul 4
 Panoul 5
 
     Supernova 1994D, vizibilă ca loc luminos în stânga jos, a avut loc la periferia galaxiei discului NGC 4526.
 
   Radiația stelelor fierbinți din partea de sus a imaginii iluminează și erodează acest pilon gigant, gazos.
 
   V838 Mon este situat la aproximativ 20.000 de ani-lumină distanță de Pământ la marginea exterioară a Calei Lactee.
 
   Galaxia Sombrero este o galaxie spirală fără barbă din constelația Fecioară, la aproximativ 30 milioane de ani lumină distanță.
 
   Această regiune a formării actuale de stele este parte a unei nebuloase cu emisii difuze, la aproximativ 6500 de ani-lumină distanță.

Salvați ca contentviewer.html. Vom începe cu un HTML curat și semantic, fără a folosi mai multe elemente decât este strict necesar. Avem un container exterior pentru spectator în întregime, care conține o structură de navigare pentru a selecta ce panou de conținut pentru a vizualiza și un al doilea container pentru panourile de conținut.

În interiorul containerului panoului de conținut, avem un alt container utilizat pentru a închide toate panourile de conținut (acest lucru este necesar pentru afișarea corectă a panourilor de conținut) și panourile de conținut în sine. Fiecare panou conține o imagine și un interval care descrie imaginea.

Imaginile principale sunt adăugate în document ca imagini HTML adecvate folosind element - aceasta se datorează faptului că acestea sunt mulțumite și ar trebui să fie vizibile pentru tehnologiile de asistență sau pentru utilizatorii cu scripting și CSS dezactivat sau nu sunt disponibili în alt mod. Structura de navigare va conține de asemenea imagini, dar deoarece acestea nu sunt clasificate ca conținut, acestea nu trebuie să fie vizibile în toate situațiile și, prin urmare, pot fi adăugate utilizând CSS, deci numele de clasă suplimentare pe

element.

Acum pagina ar trebui să apară astfel:

Nu arată minunat, dar documentul curge corect, iar elementele sunt toate vizibile și ușor de utilizat.

Cum funcționează cu CSS

Acum putem folosi CSS pentru a transforma vizualizatorul de conținut într-o interfață funcțională care nu pare teribilă. W deja legat de foaia de stil din capul paginii noastre, asa ca sa o creem acum; într-un fișier nou din editorul dvs. de text, adăugați următorii selectori și reguli:

#viewer width: 700px; margin: auto;  #nav width: 200px; plutește la stânga; margin: 0; padding: 0; list-style-type: none;  #info li width: 200px; height: 100px; padding: 0;  #nav li a afișare: bloc; lățime: 100%; înălțime: 100%; text-liniuță: -9999px; overflow: ascuns; fundal: url (img / thumbs.png) no-repeat 0 0;  #nav li a: hover, #info a.on background-position: -200px 0;  #nav li.thumb2 o background-position: 0 -100px;  #nav li.thumb2 a: hover, #info li.thumb2 a.on background-position: -200px -100px;  #nav li.thumb3 o background-position: 0 -200px;  #nav li.thumb3 a: hover, #info li.thumb3 a.on background-position: -200px -200px;  #nav li.thumb4 o background-position: 0 -300px;  #nav li.thumb4 a: hover, #info li.thumb4 a.on background-position: -200px -300px;  #nav li.thumb5 o background-position: 0 -400px;  #nav li.thumb5 a: hover, #info li.thumb5 a.on background-position: -200px -400px;  #panels width: 500px; height: 500px; overflow: ascuns; Poziția: relativă; plutește la stânga;

Salvați ca contentviewer.css în același director ca și pagina HTML. Am păstrat designul minimal astfel încât să ne putem concentra asupra a ceea ce face să funcționeze; panoul de navigare și vizionare sunt flotate unul lângă celălalt și elementele de listă individuale sunt date cu imaginile de fundal și cu stările de hover. Am adăugat și noi pe și state. Această parte a CSS este exclusiv pentru aspect / prezentare și nu afectează funcționalitatea.

Ce este important este modul în care sunt aranjate containerele și imaginile de conținut. Containerul exterior (#panels) are o dimensiune fixă care se potrivește cu înălțimea și lățimea unei imagini cu conținut unic și are proprietatea de depășire setată la ascuns pentru a se asigura că numai o singură imagine este afișată la un moment dat. Acesta este singurul CSS cu adevărat necesar ca vizualizatorul de conținut să lucreze la un nivel de bază. Dacă vă uitați la pagină acum, veți vedea că puteți face clic pe oricare dintre miniaturi și imaginea corespunzătoare de dimensiune completă va fi afișată în panoul de vizualizare:

Acest lucru este minunat deoarece rămâne funcțional și accesibil fără a se baza pe JavaScript. Vom continua să folosim jQuery pentru a adăuga câteva efecte tranziționale netede într-un moment, dar mai întâi ar trebui să adăugăm câteva stiluri suplimentare necesare pentru animații și să afișăm corect paragraful. Adăugați următorul cod în partea de jos a paginii contentviewer.css:

#slider width: 2500px; height: 500px;  #slider div float: stânga; Poziția: relativă;  #slider p poziție: absolută; bottom: 0; stânga: 0; Culoare: #fff; font: 16px "Trebuchet MS"; margin: 0; lățime: 90%; înălțime: 45px; umplutura: 5px 5% 10px; background-color: # 000;

Containerul interior (#slider) are o înălțime fixă egală cu o imagine de conținut unică, dar o lățime egală cu toate imaginile. Apoi containerele individuale care dețin imaginile și paragrafele sunt flotate în stânga pentru a le face să se înalțe pe orizontală. În cele din urmă, paragrafele sunt șablonate și poziționate, astfel încât să suprapună fiecare imagine:

Deplasarea panourilor individuale de conținut spre stânga și stabilirea dimensiunii glisorului nu sunt strict necesare, fără acestea imaginile vor fi doar stivuite vertical. Acest lucru ar însemna că orice animație pe care am adăugat-o ar trebui să mute și panourile de conținut pe verticală, dar le vom anima orizontal.

Un punct pe care ar trebui să-l fac aici este că codul nu funcționează până acum în Opera; dintr-un motiv oarecare, Opera nu poate folosi ancorele din pagină pentru a afișa panourile de conținut diferite când se face clic pe unul dintre elementele de navigare. Acesta este un eșec mare și pare a fi o problemă în mai multe versiuni ale Opera. Există un remediu aparent și oricine care folosește Opera ca browser principal va fi implementat, sperăm, această remediere deja. Nu este o problemă când a fost adăugat JavaScript.

Adăugarea efectelor jQuery

Deoarece pagina funcționează acum singură, putem adăuga JavaScript care va transforma această pagină dintr-o pagină funcțională într-o interfață atractivă. Am lăsat un goly

Cod