Share
In deze zelfstudie gaan we bekijken hoe we eenvoudig een aantrekkelijke en ruimtebesparende inhoudskijker kunnen maken die zelfs werkt met JavaScript uitgeschakeld. We zullen een stevige kern van semantische HTML bouwen, gestileerd met wat standaard CSS en we zullen dan jQuery gebruiken om verdere verbeteringen toe te voegen in de vorm van overgangsanimaties.
De volgende schermafbeelding toont wat we tegen het einde van de tutorial zullen eindigen:
Laten we eerst de onderliggende HTML-pagina maken voor onze inhoudviewer; in een nieuw bestand in uw teksteditor maakt u de volgende pagina:
Bullet-proof Content Viewer
- Paneel 1
- Paneel 2
- Paneel 3
- Paneel 4
- Paneel 5
Supernova 1994D, zichtbaar als de lichtpunt linksonder, vond plaats aan de rand van het schijfstelsel NGC 4526.
Straling van hete sterren aan de bovenkant van de afbeelding verlicht en erodeert deze gigantische, gasvormige pilaar.
V838 Mon bevindt zich op ongeveer 20.000 lichtjaar verwijderd van de aarde aan de buitenrand van de Melkweg.
De Sombrero Galaxy is een ongebroken spiraalvormig sterrenstelsel in het sterrenbeeld Maagd, zo'n 30 miljoen lichtjaren verwijderd.
Dit gebied met actieve huidige stervorming maakt deel uit van een diffuse emissienevel op ongeveer 6.500 lichtjaar afstand.
Bewaar deze als contentviewer.html. We beginnen met een aantal zuivere en semantische HTML, waarbij we niet meer elementen gebruiken dan strikt noodzakelijk is. We hebben een buitenste container voor de kijker in zijn geheel, die een navigatiestructuur bevat om te selecteren welk inhoudspaneel moet worden bekeken en een tweede container voor de inhoudspanelen zelf.
Binnen de inhoudspaneelcontainer hebben we een andere container die wordt gebruikt om alle inhoudspanelen in te sluiten (dit is nodig om de inhoudspanelen correct weer te geven) en de inhoudspanelen zelf. Elk paneel bevat een afbeelding en een reeks die de afbeelding beschrijft.
De hoofdafbeeldingen worden als juiste HTML-afbeeldingen aan het document toegevoegd met behulp van de element - dit komt omdat ze inhoud bevatten en zichtbaar moeten zijn voor ondersteunende technologieën of gebruikers met zowel scripting en CSS uitgeschakeld of anderszins niet beschikbaar. De navigatiestructuur zal ook afbeeldingen bevatten, maar omdat deze niet als inhoud zijn geclassificeerd, hoeven ze niet in alle situaties zichtbaar te zijn en kunnen ze daarom worden toegevoegd met behulp van CSS, vandaar de extra klassenamen op de elementen.
Op dit moment zou de pagina er als volgt uit moeten zien:
Het ziet er niet geweldig uit, maar het document stroomt correct en de elementen zijn allemaal duidelijk zichtbaar en bruikbaar.
We kunnen nu CSS gebruiken om de inhoudviewer te transformeren in een functionerende interface die er niet slecht uitziet. W is al gekoppeld aan het stylesheet in de kop van onze pagina, dus laten we het nu maken; voeg in een nieuw bestand in je teksteditor de volgende selectors en regels toe:
#viewer width: 700px; margin: auto; #nav width: 200px; float: left; margin: 0; padding: 0; list-style-type: none; #nav li width: 200px; Hoogte: 100px; padding: 0; #nav li a display: block; Breedte: 100%; height: 100%; text-indent: -9999px; overloop verborgen; achtergrond: url (img / thumbs.png) no-repeat 0 0; #nav li a: hover, #nav li a.on background-position: -200px 0; #nav li.thumb2 a background-position: 0 -100px; #nav li.thumb2 a: hover, #nav li.thumb2 a.on background-position: -200px -100px; #nav li.thumb3 a background-position: 0 -200px; #nav li.thumb3 a: hover, #nav li.thumb3 a.on background-position: -200px -200px; #nav li.thumb4 a background-position: 0 -300px; #nav li.thumb4 a: hover, #nav li.thumb4 a.on background-position: -200px -300px; #nav li.thumb5 a background-position: 0 -400px; #nav li.thumb5 a: hover, #nav li.thumb5 a.on background-position: -200px -400px; #panels width: 500px; Hoogte: 500px; overloop verborgen; position: relative; float: left;
Bewaar deze als contentviewer.css in dezelfde map als de HTML-pagina. Ik heb het ontwerp minimaal gehouden, zodat we ons kunnen concentreren op wat ervoor zorgt dat het werkt; het navigatie- en weergavevenster worden naast elkaar weergegeven en de afzonderlijke lijstitems krijgen hun achtergrondafbeeldingen en zweeftoestanden. We hebben ook toegevoegd op Staten ook. Dit deel van de CSS is puur voor lay-out / presentatie en heeft geen invloed op de functionaliteit.
Wat belangrijk is, is hoe de containers en inhoudsafbeeldingen zijn gerangschikt. De buitenste container (#panels) krijgt een vaste grootte die overeenkomt met de hoogte en breedte van een afbeelding met één inhoud en waarvan de overloopeigenschap is ingesteld op verborgen om ervoor te zorgen dat slechts één afbeelding tegelijk wordt weergegeven. Dit is de enige echt vereiste CSS voor de inhoudviewer om naar een basisopleiding te werken. Als u nu naar de pagina kijkt, ziet u dat u op een van de miniaturen kunt klikken en de bijbehorende afbeelding op ware grootte in het kijkvenster wordt weergegeven:
Dit is geweldig omdat het functioneel en toegankelijk blijft zonder te vertrouwen op JavaScript. We gaan verder met het gebruik van jQuery om in een ogenblik enkele soepele overgangseffecten toe te voegen, maar eerst moeten we een paar meer stijlen toevoegen die nodig zijn voor de animaties en om de alinea's correct weer te geven. Voeg de onderstaande code toe onderaan contentviewer.css:
#slider width: 2500px; Hoogte: 500px; #slider div float: left; position: relative; #slider p position: absolute; bottom: 0; left: 0; color: # fff; lettertype: 16px "Trebuchet MS"; margin: 0; width: 90%; hoogte: 45 pixels; opvulling: 5px 5% 10px; background-color: # 000;
De binnencontainer (#Slider) krijgt een vaste hoogte die gelijk is aan een enkele afbeelding, maar een breedte die gelijk is aan alle afbeeldingen. Vervolgens worden de afzonderlijke containers met de afbeeldingen en alinea's naar links geduwd om ze horizontaal te laten stapelen. Ten slotte zijn de alinea's ook opgemaakt en gepositioneerd zodat ze elke afbeelding overlappen:
Het duwen van de afzonderlijke inhoudspanelen naar links en het instellen van de grootte van de schuifregelaar is niet strikt noodzakelijk, zonder deze zullen de afbeeldingen slechts verticaal opstapelen. Dit zou betekenen dat alle animaties die we hebben toegevoegd de inhoudspanelen ook verticaal zouden moeten verplaatsen, maar we zullen ze horizontaal animeren.
Een punt dat ik hier moet maken, is dat de code tot nu toe niet werkt in Opera; om wat voor reden dan ook, kan Opera de ankers op de pagina niet gebruiken om de verschillende inhoudspanelen te tonen wanneer op een van de navigatie-items wordt geklikt. Dit is een grote mislukking en lijkt een probleem te zijn in meer dan één versie van Opera. Er is blijkbaar een oplossing en iedereen die Opera als hun hoofdbrowser gebruikt, heeft deze mogelijkheid hopelijk al geïmplementeerd. Het is echter geen probleem wanneer JavaScript is toegevoegd.
Omdat de pagina nu op zichzelf staat, kunnen we JavaScript toevoegen dat dit van een functionele pagina omzet in een aantrekkelijke interface. We hebben een leeg gelateny
Accentsconagua