Share
Een van de grootste uitdagingen voor webontwerpers is het vinden van manieren om veel informatie op een pagina te plaatsen zonder de bruikbaarheid te verliezen. Inhoud met tabbladen is een prima manier om dit probleem aan te pakken en is de laatste tijd op grote schaal gebruikt door blogs. Vandaag gaan we een eenvoudig informatievenster met tabbladen bouwen in HTML, het vervolgens laten functioneren met een eenvoudige Javascript, en dan zullen we uiteindelijk hetzelfde bereiken met de jQuery-bibliotheek.
Eerst en vooral moeten we iets hebben dat er geweldig uitziet. Dus een korte trip naar Photoshop en voila, we hebben een mooie mockup van hoe onze component met tabs eruit zou moeten zien. Het is vrij rechttoe rechtaan met een paar extra hellingen om het nettuts geweldig te maken. Je kunt het Photoshop PSD-bestand voor deze afbeelding pakken als je het van dichterbij wilt bekijken, maar het is vrij eenvoudig en we kunnen het echt van de flat JPG bouwen.
Het eerste dat je moet doen bij het bouwen is natuurlijk om een globaal idee te krijgen hoe je het gaat doen. Dit wordt eenvoudiger naarmate je meer dingen hebt ontwikkeld. Als ik naar deze afbeelding kijk, zou ik zeggen dat het het beste is om te doen:
DUS om samen te vatten, het is zoiets als dit:
Maak je geen zorgen als het kijken naar die afbeelding je niet meteen aan die structuur doet denken. Soms moet je dingen gewoon doen met vallen en opstaan. In mijn geval heb ik deze kleine tabjes een paar keer gemaakt en ik weet dat dit een mooie eenvoudige manier is om ze te maken.
Het is ook leuk om na te denken over de structuur, voordat je veel klassenamen en id's en inhoud hebt, omdat het moeilijk kan worden om later het bos van de bomen te zien. Vooral als je de inhoud toevoegt voor alle verschillende tabbladen.
Dus nu we een beeld hebben van hoe we onze structuur kunnen opbouwen, gaan we er maar naar toe!
Als je nu mijn tutorials op PSDTUTS hebt gevolgd, weet je dat ik hou van een goede verloopachtergrond. Dus voordat we zelfs beginnen met de structuur met tabbladen, laten we een mooie achtergrond voor onszelf maken!
Open Photoshop, maak een document van 1000 x 1000 pixels en teken een mooie (subtiele) radiale overgang zoals hieronder wordt weergegeven. Merk op dat ik uit het midden / de bovenkant heb getrokken en ervoor zorgde dat het verloop voltooid was tegen de tijd dat ik bij de rand van het document kwam. Dat betekent dat ik de achtergrondkleur in HTML kan instellen als de donkerdere kleur en als iemand zijn browservenster uitrekt, is deze naadloos.
Dus maak een nieuwe map voor het project en maak vervolgens een tweede directory daarbinnen genaamd afbeeldingen en sla die afbeelding op als background.jpg. Bij gebruik opslaan Bestand> Opslaan voor web en apparaten en selecteer JPG met een kwaliteitsinstelling van ongeveer 70. Dat komt neer op een bestandsgrootte van 16 kb, wat niet slecht is. Er was een tijd dat je echt moest scrimpen en sparen, maar nu wil je er gewoon zeker van zijn dat je niet stuply verspilt met je bestandsgroottes.
Nu maken we een HTML-document en schrijven we in een code:
Structuur met tabbladen - Normaal
Dat zal dus de basis van onze HTML zijn. Nu maken we de style.css documenteer en schrijf in het volgende:
body background-image: url (images / background.jpg); background-repeat: no-repeat; achtergrond-positie: midden bovenaan; background-color: # 657077; margin: 40px;
Een paar dingen om op te merken hier:
U kunt het resulterende HTML-document hier bekijken. Merk op dat als je het formaat van je venster aanpast, het een mooie naadloze gegradueerde achtergrond is. Wunderbar!
Vervolgens voegen we onze structuur toe aan de pagina, zodat we deze kunnen gaan stylen.
Structuur met tabbladen - Normaal Blader door de site Selecteer een tabblad
Zoals u kunt zien, heb ik in feite dezelfde structuur gebruikt als die ik in stap 2 heb genoemd. Ik heb er een paar toegevoegd ids en klassen en wat daadwerkelijke inhoud. Dit is de redenering achter wat ik heb gedaan:
Accentsconagua
.tabbed_area ul maar dit kan in de war raken met de toekomst OK, dus zonder stijlen lijkt het nog niet echt veel ... tot nu toe!
Nu met het opleven van elementen, denk ik dat het het beste is om vanuit het externe element in te werken. Dus we beginnen met dit element -
#tabbed_box margin: 0px auto 0px auto; Breedte: 300 pixels;
Nu gaan we het rubriekgebied doen. We kunnen de kop als volgt stylen:
.tabbed_box h4 font-family: Arial, Helvetica, sans-serif; font-size: 23px; color: #ffffff; letter-spacing: -1px; margin-bottom: 10px; .tabbed_box h4 small color: # e3e9ec; font-weight: normal; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: in hoofdletters; position: relative; top: -4px; left: 6px; letter-spacing: 0px;
Een paar dingen om op te merken hier:
Vervolgens geven we ons innerlijk
.tabbed_area border: 1px solid # 494e52; background-color: # 636d76; padding: 8px;
Dit geeft het een beetje een definitie en ruimt de interieurelementen weg van de zijkanten. Je kunt zien waar we aan toe zijn in de onderstaande afbeelding.
Door van buiten naar binnen te werken, hebben we ons element een beetje vorm gegeven en is het een stuk gemakkelijker om te zien hoe het eruit zal zien. Ook zullen er vaak beperkingen van buitenaf komen, de doos moet bijvoorbeeld in een kolom van bepaalde breedte passen. Eindelijk is het ook een goed idee om naar buiten te gaan, want dan is elke stijlvererving duidelijk. Als je bijvoorbeeld de andere kant op ging en eerst de interieurelementen deed, konden latere stijlen die interieurelementen beïnvloeden en zou je toch terug moeten gaan en opnieuw moeten aanpassen.
Nu komen we bij de goede dingen - de tabbladen! Als we dit kleine stukje CSS toevoegen, gaan we een lange weg naar het maken van de tabbladen lijken meer op tabbladen:
ul.tabs margin: 0px; padding: 0px; ul.tabs li list-style: none; weergave: inline;
Deze code zegt dat de
Er zijn eigenlijk andere weergavewaarden die u kunt lezen in Quirksmode.
Natuurlijk zien onze 'tabbladen' er nog steeds vrij waardeloos uit, dus laten we ze wat stijl geven. We hebben de
ul.tabs li a background-color: # 464c54; color: # ffebb5; opvulling: 8px 14px 8px 14px; text-decoration: none; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-transform: in hoofdletters; rand: 1px vast # 464c54; ul.tabs li a: hover background-color: # 2f343a; border-color: # 2f343a; ul.tabs li a.active background-color: #ffffff; color: # 282e32; rand: 1px vast # 464c54; border-bottom: 1px solid #ffffff;
Dus wat we hier hebben gedaan is:
Er zijn twee dingen die we moeten doen om de inhoud te laten werken. Ten eerste moeten we de tweede twee gebieden laten verdwijnen en de tweede is om ze op de juiste manier gestyled te laten lijken.
.inhoud achtergrondkleur: #ffffff; padding: 10px; rand: 1px vast # 464c54; # content_2, # content_3 display: none;
Je zult zien dat het eerste deel van de CSS de browser vertelt dat alle elementen bij class = "content" moet wit zijn met opvulling en een rand (dezelfde kleur als de tabbladen). Het tweede deel zegt dat de elementen met id = "content_2" en id = "content_3" zou een display moeten hebben: geen of anderszins zou onzichtbaar moeten zijn.
Later wanneer we wat Javascript toevoegen, kunnen we het script gebruiken om af te wisselen tussen weergave: geen en weergeven: blokkeren om ze te laten weergeven en verbergen.
Dus hier ziet u hoe onze tabbladen eruit zien, u kunt ook een HTML-versie zien van waar we ons bevinden. Zoals u kunt zien, ziet het er nu vrij dichtbij uit, maar we moeten de spatiëring repareren en wat daadwerkelijke inhoud toevoegen.
Het oplossen van het probleem van de afstand is eigenlijk gewoon een kwestie van het toevoegen van marges aan de
ul.tabs margin: 0px; padding: 0px; margin-top: 5px; margin-bottom: 6px;
Om eerlijk te zijn, weet ik niet zeker waarom dit probleem zich voordeed. Soms raadt HTML me aan, maar pas ik de instellingen aan totdat de dingen zelf goed zijn. Soms zoek ik in het proces uit wat de oorzaak was, soms niet. Ik denk dat wat ik bedoel is, tenzij je echt in de details van de w3-specificaties zult duiken, vroeg of laat zul je wat problemen tegenkomen die je niet kunt uitleggen. Laat het je niet naar beneden halen, pas het aan totdat je een oplossing of een oplossing vindt.
Nu voegen we wat inhoud toe aan het inhoudsgebied. Ik heb dit eerder vermeden omdat ik de HTML er simpel uit wilde laten zien. Hier zijn wat:
Blader door de site Selecteer een tabblad
Dus hier heb ik zojuist een aantal ongeordende lijsten toegevoegd aan de drie inhoudsgebieden. Overigens bespot ik dit alsof het op een WordPress-blog zou worden gebruikt. Maar eigenlijk zou je dit voor allerlei dingen kunnen gebruiken. De nieuwe FlashDen-startpagina waar ik een paar dagen geleden aan heb gewerkt, maakt gebruik van gebieden met tabs om verschillende soorten recente bestanden weer te geven.
Nu voegen we wat styling toe om die er een beetje mooier uit te laten zien:
.inhoud ul margin: 0px; opvulling: 0px 20px 0px 20px; .content ul li list-style: none; border-bottom: 1px solid # d6dde0; padding-top: 15px; padding-bottom: 15px; font-size: 13px; .content ul li a text-decoration: none; color: # 3e4346; .content ul li a small color: # 8b959c; font-size: 9px; text-transform: in hoofdletters; font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; left: 4px; top: 0px;
We zijn opnieuw onze lijsten aan het vormgeven. Deze keer in plaats van het geven van de
Andere zaken om op te merken:
Dus dit is hoe onze pagina eruit ziet:
Over het algemeen is het redelijk goed, behalve dat we een te veel grenzen hebben. Maar dat is OK, we kunnen het repareren met een magische pseudo-selector genaamd 'laatste kind' zoals dit:
.inhoud ul li: last-child border-bottom: none;
Deze stijl is alleen van toepassing op het laatste element van zijn soort - dat wil zeggen dat laatste element
Nu is er nog maar één stap om onze HTML af te maken, en dat is om enkele mooie achtergrondafbeeldingen voor onze elementen te maken. Zoals je zult opmerken, hadden sommige elementen in mijn originele PSD-bestand subtiele verlopen. Dus nu is het tijd om die toe te voegen. Er zijn drie gegradueerde bits: (a) op het actieve tabblad (b) op de inactieve tabbladen en (c) onderaan het inhoudsgebied. Dit zijn de drie afbeeldingen die we nodig hebben:
Ze zijn een beetje moeilijk te zien, maar eigenlijk zijn het kleine stukjes verloop die we instellen als herhalende achtergrondafbeeldingen. Hier is een close-up van die voor het tabblad (merk op dat ik er een dunne rand om heb toegevoegd, dus het is een beetje duidelijker.) Merk op dat er bovenaan een witte lijn van 1 px staat, waardoor het tabblad er echt scherp uitziet.
We moeten dus een paar aanpassingen aan de CSS-code aanbrengen om achtergrondafbeeldingen toe te voegen, zoals deze:
ul.tabs li a background-image: url (images / tab_off.jpg); background-repeat: repeat-x; background-position: bottom; ul.tabs li a.active background-image: url (images / tab_on.jpg); background-repeat: repeat-x; background-position: top; .content background-image: url (images / content_bottom.jpg); background-repeat: repeat-x; background-position: bottom;
Merk op dat ik deze extra bits eigenlijk heb ingevoegd bij de rest van hun klassedefinities, maar voor het belang van de beknoptheid zojuist in uittreksels gekopieerd. Zoals u in alle drie gevallen kunt zien, herhalen we alleen een achtergrondafbeelding langs de x-as. In het geval van twee (het off-tab en het inhoudsgebied) doen we het onderaan, en in de andere is het langs de bovenkant.
En daarmee hebben we het HTML / CSS-deel van deze tutorial officieel voltooid. U kunt de afgewerkte gestileerde pagina hier bekijken.
Het volgende dat we moeten doen, is wat Javascript toevoegen om ervoor te zorgen dat onze tabbladen iets doen. Eerst gaan we dit met de hand doen en dan laat ik je zien hoe je een Javascript-bibliotheek gebruikt om hetzelfde te bereiken. Nu moet ik erop wijzen dat ik geen JS-expert ben, en ik hoop een aantal echte programmamasters in te voeren om zelf tutorials te maken, dus als je merkt dat ik iets doe wat een beetje dubieus is, voel je dan vrij om een reactie achter te laten en Ik zal de tutorial bijwerken en een beetje meer best practices maken!
Dus laten we eerst eens aangeven wat we willen doen als iemand op een tabblad klikt. We willen ons huidige tabblad uitschakelen, de nieuwe inschakelen, het huidige inhoudsgebied verbergen en het nieuwe weergeven.
Nu kunnen we iets slims hebben dat uitzoekt welk tabblad op dat moment aan staat en het uitschakelt, maar het is eenvoudiger om alles door te nemen en allemaal uit te schakelen, en dan degene aan te zetten die we willen. Op dezelfde manier voor de inhoudsgebieden kunnen we ze alle drie verbergen en vervolgens degene weergeven die we willen. Dit bespaart ons dat we de huidige stand van zaken moeten uitwerken.
De elementen waarmee we werken zien er als volgt uit:
Nu kunnen we in Javascript een element vinden door simpelweg de id en de document.getElementById () -methode te gebruiken. Dus document.getElementById ('content_1') zou ons het eerste inhoudsgebied geven. We kunnen dan de weergavestijl instellen op none met deze regel:
document.getElementById ('content_1'). style.display = 'none';
Evenzo om een les te zien die we gebruiken:
document.getElementById ('tab_1'). className = 'active';
Dus dan een werkelijk eenvoudige benadering zou zijn om te schrijven:
function tabSwitch (new_tab, new_content) document.getElementById ('content_1'). style.display = 'none'; document.getElementById ('content_2'). style.display = 'none'; document.getElementById ('content_3'). style.display = 'none'; document.getElementById (new_content) .style.display = 'block'; document.getElementById ('tab_1'). className = "; document.getElementById ('tab_2'). className ="; document.getElementById ('tab_3'). className = "; document.getElementById (new_tab) .className = 'active'; Dit zou in een bestand worden geplaatst, laten we het functions.js noemen. We zouden dit script dan noemen door onze tabbladen te wijzigen in:
En ja hoor, hier is een voorbeeld van ons supereenvoudige javascript-voorbeeld. Het werkt!
Nu zijn er enkele zeer voor de hand liggende problemen met dit script. Niet het minst is dat als je een ander tabblad toevoegt, je je functie moet wijzigen. En als u meer dan één set tabbladen op een pagina had, hebt u twee functies nodig! Dus laten we het een beetje verbeteren:
functie tabSwitch_2 (actief, nummer, tab_prefix, content_prefix) for (var i = 1; i < number+1; i++) document.getElementById(content_prefix+i).style.display = 'none'; document.getElementById(tab_prefix+i).className ="; document.getElementById(content_prefix+active).style.display = 'block'; document.getElementById(tab_prefix+active).className = 'active';
Onze tweede versie van de tab-schakelfunctie vergt nog een paar argumenten, maar is een beetje slimmer. Er wordt van uitgegaan dat we een reeks tabbladen en een reeks inhoudsgebieden hebben en id's hebben met een voorvoegsel en een reeks oplopende getallen. D.w.z. tab_1, tab_2 ... en content_1, content_2 ...
Het eerste argument dat onze functie neemt, 'actief', is het nummertabblad / de inhoud die we willen hebben. Het tweede argument, 'nummer', is het aantal tabbladen dat wordt gebruikt. De derde en vierde argumenten zijn de voorvoegsels die worden gebruikt in de id's van onze elementen.
De functie heeft dan een for-lus die doorloopt van 1 naar het aantal tabbladen en schakelt ze allemaal uit, en schakelt vervolgens de twee die we willen terug aan het einde. Met andere woorden, het is hetzelfde script als voorheen, maar we hebben het net iets slimmer gemaakt.
Dus in ons voorbeeld om de functie te noemen, zouden we deze code hebben:
Dit betekent dat we later, als we een tweede set tabbladen hadden, verschillende ID prefixen zouden kunnen geven en dezelfde functie keer op keer zouden kunnen gebruiken.
Bekijk het tweede javascript-voorbeeld.
De laatste tijd zijn er veel Javascript-bibliotheken verschenen en in feite zijn er (ten minste) twee die speciaal zijn gemaakt om dit tab-effect te bereiken: MooTabs en DomTab. Ik heb ook geen gebruik gemaakt, maar in een korte oogopslag zagen ze er redelijk bruikbaar uit.
Omdat ik echter veel over de jQuery-bibliotheek heb gehoord, besloot ik om hetzelfde tabblad te schakelen met jQuery. Ik heb het gevoel dat mijn oplossing wat werk kan gebruiken, maar het is nog steeds interessant om er doorheen te kijken.
Dus ga eerst naar de jQuery-site en download de nieuwste versie van hun scriptbibliotheek.
jQuery biedt een aantal functies waarmee u groepen van dingen kunt selecteren. Als u bijvoorbeeld elk element op de pagina wilt selecteren dat een koppeling is (d.w.z.. elementen) en maak ze dan verdwijnen, zou je dit in je plaatsen Gebied:
De eerste regel voegt de jQuery-scriptbibliotheek toe. Het hoofdscriptgebied bevindt zich in een stuk code dat er als volgt uitziet: $ (Document) .ready (function () ); Dit vertelt je browser in feite om alles binnen uit te voeren wanneer het de pagina raakt. Dus in ons geval geven we het de opdracht:
$ ( "A") slideUp (.);
Dit zegt alles vinden wat een is en voer slideUp () erop uit. Of met andere woorden: vind alle links en zorg dat ze verdwijnen met een sliding-effect. Probeer dat script aan een pagina toe te voegen en laad het en je zult zien dat al je links verdwijnen. Heel netjes he?
Hoe dan ook, er zijn veel manieren om dingen te selecteren, en je kunt erover lezen in de API en documentatie. Je kunt dingen doen zoals elk element vinden met een bepaalde klasse, een bepaalde id enzovoorts. Op een gegeven moment zal ik hier een goede inleiding tot de jQuery-tutorial schrijven, maar voorlopig zal die kleine intro het doen - behalve dat ik slechts een uur ervaring heb met jQuery, vermoed ik dat het voor mij een beetje een travestie zou zijn om een intro ernaar!
Dus na een beetje experimenteren kwam ik op een manier om jQuery te gebruiken om mijn tabbladen in en uit te laten schuiven. Om dit te doen heb ik eerst mijn links aangepast om geen Javascript te hebben, maar eerder om een titel attribuut en een extra class = "tab". Merk op dat je een element twee klassen kunt geven door dit te doen: class = "tabblad actief".
Nu ik deze twee elementen gebruik, kan ik in principe alle links met de klasse 'tab' krijgen en ik kan ook elk element vinden waarvan de id gelijk is aan het titelkenmerk van de link waarop zojuist is geklikt. Hier is het script (geplaatst in de
), wat dit een beetje beter verklaart:Dus ik heb opmerkingen toegevoegd om te helpen verklaren. Kortom, wanneer op een link met de klasse 'tab' wordt geklikt, doen we alles binnen die functie.
En om het laatste werkende voorbeeld met jQuery te zien, klik hier!
