Apple is altijd God geweest in termen van de manier waarop ze zichzelf en hun producten presenteren. Ik ben dol op de zijbalk op de Apple Startpage en wilde de Accordion-plug-in gebruiken in jQuery UI om dit te bereiken! Alsof dat niet genoeg voor mij is, wil ik het ook graag kunnen laten zien en verbergen. Ik ga je laten zien hoe!

Voorwoord

Deze tutorial gaat ervan uit dat je een wordpress-engine hebt die draait op een server waartoe je toegang hebt om bestanden te uploaden, bestanden te downloaden en naar te browsen. Als u een lokale server op uw computer wilt uitvoeren met een WordPress-installatie, is hier een handleiding voor Windows en hier voor OS X.

Bestanden die je nodig hebt.

We hebben in totaal 6 bestanden nodig voor deze tutorial:

• functions.php - Dit bevat een kleine regel code die onze zijbalk registreert.
• index.php - We hebben dit bestand zeker nodig. Elke gissing waarom?
• jQuery - Hier is versie 1.2.6 voor jou.
• jQuery UI (accordeon) - We hebben alleen de Accordion-plug-in en de UI-kern nodig, niet de hele UI-bibliotheek.
• sidebar.js - Bevat alle jQuery-code voor de zijbalk.
• style.css - Nodig om het thema te activeren en bevat alle CSS.
• afbeeldingen map - Ik zal je een lijst met afbeeldingen geven om dit later te vullen, in het CSS-gedeelte. Voorlopig hebben we echter maar 1 afbeelding nodig die in de HTML staat - het RSS-pictogram! Plaats het in de map 'afbeeldingen' en laten we aan de slag gaan!

Vergeet niet om uw Wordpress-thema (dat toepasselijk de naam sidebarTheme heeft) te activeren in Dashboard! Rechts. Naar de tutorial! We beginnen met de HTML en Wordpress die we nodig hebben. Dit bevat het strcutre dat we nodig zullen hebben. Daarna vullen we het met de WordPress-code die berichten weergeeft en registreert en onze zijbalk weergeeft. Het zal er daarna nog steeds erg slecht uitzien, dus we zullen het oplossen met een paar mooie CSS, waardoor het enigszins lijkt op de startpagina van de Apple, en de zijbalk er ook uit zal zien. We doen dit vóór de JS zodat degenen zonder JS nog steeds het mooie ding zien. Ten slotte, mijn favoriet - de jQuery. We zullen het open en gesloten animeren en gebruiken accordeon() en zijn parameters om het zweefeffect te genereren.

Stap 1 - HTML

Ga snel open functions.php, en zet dit in:

 'AppleQuery')); ?>

functions.php wordt automatisch opgepikt door PHP / Wordpress en voert de functies uit. Deze functie vraagt ​​Wordpress om een ​​nieuwe zijbalk in het Dashboard te registreren om er widgets aan toe te voegen. Dat is niet alles ... We moeten dat in ons thema plaatsen! Ik zal dat na het HTML / WordPress-bit hierna uitleggen. De array noemt alleen de zijbalk, zodat we in Dashboard kunnen selecteren welke zijbalk moet worden bewerkt (niet echt een probleem ... Meer van een goede gewoonte in het geval van talrijke zijbalken).

Kopieer of typ dit in uw index.html:

            
 
 
 
   
 
 
 
  Topverhalen  "title =" RSS 2 feed "> 
  
  
"title ="">
 
  
 
   
 
  

Uitleg

Oké ... ik weet dat dat veel is. Heel veel. Maar deze tutorial is niet specifiek gericht op Wordpress en HTML, maar ik zal de interesses uitkiezen die je waarschijnlijk zou moeten begrijpen.

• Het hele zijbalksegment - Dit is het belangrijkste onderdeel van wat belangrijk is. Wat we vragen wordpress, is dat als, in de gehele lokale wordpress-engine, de functie dynamic_sidebar is aanwezig (waarin het zich bevindt functions.php), voer de functie uit. Het AppleQuery geeft de naam van de zijbalk aan die we hebben toegewezen (in functions.php, onthouden?).
• - Dit is wat onbewerkte PHP om de huidige datum en tijd van de gebruiker te herhalen. Het is alleen hier omdat het op Apple staat! Het heeft de notatie: (Maand DD, YYYY 00:00 AM GMT).
• - Kijk in de hoofd element ... Zie je hetzelfde? Nogmaals, het is op de website van Apple. Het is gewoon de XML-invoer voor de blog.
• - Niets geweldigs ... Dit is slechts de knop die de zichtbaarheid van de zijbalk schakelt. Ik heb het een span gemaakt, dus het is niet klikbaar voor JSless-browsers, maar met de .click () -functie van jQuery-mensen MET JS kan!

Dus met de HTML en WordPress helemaal up, zou ik voorstellen om naar je WP-beheerder te gaan en een paar widgets toe te voegen aan je blog. Om een ​​of andere reden heeft Zoeken geen titel en de tagwolk-widget verdwijnt niet - Ga naar figuur! Ik gebruikte het volgende in de mijne:

• Categorieën
• archief
• Links
• Pages
• meta

En het zou er ongeveer zo uit moeten zien: Nogal lelijk hè? Nooit vrezen, CSS is er!

Stap 2 - CSS

Ja, fantastische CSS is er om de dag te redden! We willen iets enigszins remenisce van dit (photoshop mockup) creëren:

Vind je mijn kleine vervagingseffect leuk? Ik dacht dat het paste ... Hoe dan ook. De vervaging is de JS, maar voor nu willen we dat alles wordt uitgebreid en weergegeven, zodat voor de 1% slimme cookies waarvoor geen JS is ingeschakeld, de zijbalk nog steeds zichtbaar is en er nog steeds mooi uitziet. Heel, heel groot, maar toch daar. Het is een grote brok, dus ik heb het in een ander bestand gestopt om deze pagina niet te vullen - Dood me niet! Kopieer of typ deze CSS in uw style.css. Je hebt al deze afbeeldingen nodig:

• activeBg.png
• h1.png
• inactiveBg.png
• sidebarClose.png
• sidebarOpen.png
• topStoriesBg.png

Sommige dingen om op te merken

• Ik heb mijn best gedaan om ems aan te houden in termen van lettertype-dimensionering, dus de 75% verkleint alle tekst naar 12px en wordt 1em. Dat is voor een andere tutorial echter!
• In de h1-code heb ik 'text-shadow' gebruikt. Dit is CSS3. Het draagt ​​gewoon bij aan de appelachtige look!
• #inhoud - Heeft een achtergrondkleur van wit. Waarom vraag je dat? De achtergrond zal hoe dan ook altijd wit zijn, wat is het punt? Welnu, mijn vrienden, als we bij het jQuery komen dat we nodig hebben #inhoud om een ​​deken te worden voor de zijbalk en als er geen achtergrond is ingesteld, is deze transparant en wordt de zijbalk weergegeven.
• #sidebarToggleButton - Dat is een hel van een naam ... Hiermee wordt de knop ingesteld die de zichtbaarheid van de zijbalk schakelt om correct in positie te zijn, maar onzichtbaar voor de JSless-mensen. Wanneer we naar de JS gaan, worden de achtergrondafbeeldingen dan toegepast, zodat ze alleen voor de JS-mensen worden weergegeven!

Die 3 dingen zijn zowat de enige eigenaardigheden daar. Ik heb die code getest in FF, Safari 3 en Opera 9 en het ziet er allemaal perfect uit! Hier is hoe het eruit zou moeten zien:

Vervolgens moeten we het jQueryfy.

Stap 3 - jQuery Time!

Ik hou van jQuery! Ik vind het geweldig dat je zo gemakkelijk woorden kunt coderen om te coderen, en ik begin altijd met het doen van de woorden. Hier is een basisidee van wat we willen dat het script doet.

• Verberg de zijbalk.
• Als u op '.idebarOpen' klikt, schakelt u het volgende om:
  • Verwijder de klasse 'sidebarOpen'.
  • Voeg de klasse 'sidebarClose' toe (wat we in de volgende sectie zullen stylen).
  • Animeer de zijbalk om van onder naar buiten te schuiven (letterlijk, met positie: relatief;)
  • Animeer (dit) om het X-aantal pixels naar links te verplaatsen (zodat het in lijn blijft met de zijbalk).
• Start de accordeon.

Dat lijkt allemaal veel (maar het is echt niet ...) dus ik zal je stap voor stap doornemen. Open het bestand dat je hebt gemaakt met de naam sidebar.js en begin met typen!

Stap 3.1

Vergeet zoals altijd niet alles in jQuery's speciale document in te pakken:

$ (document) .ready (function () // jQuery-code gaat hier);

Zet alles hier tussen het document klaar!

Stap 3.2

$ ("# sidebar"). css (left: "205px");

Dit 'verbergt' de zijbalk door het DOM-niveau CSS te manipuleren. Het is niet echt, het wordt gewoon geveegd onder het tapijt. Het letterlijke kleed dat is div # content. Dit werkt niet echt totdat we een beetje meer CSS hebben toegevoegd, maar ik zal na dit gedeelte behandelen.

Stap 3.3

$ (". sidebarOpen"). toggle (function () $ (this) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .anim (right: "205px", 500); $ ("# zijbalk "). animeren (left:" 0px ", 500);, function () $ (this) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .anim (right:" 0px ") , 500); $ ("# sidebar"). Animeren (left: "205px", 500););

OK Ik begrijp je verwarring. Dit is veel voor een stapsgewijze instructie toch ?! Nou ja ... Maar het zijn eigenlijk 2 zeer vergelijkbare dingen. De eerste functie in de .knevel () zullen:

• Verwijdert de klasse van 'sidebarOpen' (de klassen zijn voor CSS in de volgende sectie).
• Voegt de klasse 'zijbalk sluiten' toe.
• Laat onze kleine knop animeren om naar links te schuiven naast:
• De zijbalk verschuift zelf en wordt geanimeerd met jQuery. Beide zijn ingesteld om gedurende een halve seconde uit te komen, dus ze moeten samen bewegen.

Het punt is, is dat de tweede functie precies dat is, maar dan omgekeerd! Het:

• Verwijdert de klasse 'zijbalk sluiten'.
• Voegt de klasse van 'sidebarOpen' toe.
• Animeert onze kleine knop om weer naar rechts te schuiven naast:
• De zijbalk glijdt terug naar binnen.

Zien! Niet zo moeilijk. Het is gewoon veel code om te lezen.

Stap 3.4

Accordeitietijd! Yay! We kunnen eindelijk de altijd aanwezige gebruikersinterface van jQuery gebruiken. De manier waarop ze de widget hebben ontworpen maakt het supereenvoudig om te gebruiken:

$ ("# sidebar ul"). accordeon (header: 'h2', event: 'mouseover', activeClass: 'selected');

Het is precies die ene .accordeon() functie, toegepast op de ul binnen de #sidebar div. De parameters (één per regel) zijn als volgt (mooie zelfverklarende ... Maar eh):

• hoofd - Dit definieert de handvatten van elke accordeon 'lade' - in ons geval de h2 van elke widget.
• evenement - Bepaalt wanneer de laden moeten worden verwisseld en we willen het hovereffect zoals Apple heeft, dus we gebruiken het mouseover
• activeClass - Dit is handig voor de kleine extra CSS die we gaan verduren. Het geeft de uitgevouwen lade een klasse van 'geselecteerd'.

Dat is alle JavaScript-code die we nodig hebben. Het is allemaal vrij eenvoudig en gemakkelijk aan te passen aan wat je maar nodig hebt!

Waarom dit zo fantastisch is

Ik heb het gevoel dat dit nog niet genoeg is verheerlijkt! Het verbazingwekkende aan de accordeon-plug-in is dat je geen van de bewerkingen hoeft te bewerken Wordpress gegenereerd code, die we helemaal niet hebben geformatteerd (afgezien van de verpakking ul, maar dat is noodzakelijk, ongeacht). Niet alleen is het 100% onopvallend en 100% onbetrouwbaar op bewerkte HTML-code, maar het is ook een korte snelle functie. Accordeon doet al het vieze werk van het selecteren, animeren, activeren, van lessen veranderen, etc. Het is geweldig! Overweeg AccordionUI verheerlijkt! Je zou waarschijnlijk iets vergelijkbaars moeten hebben (ik heb de accordeon heel licht gezet, zodat je kunt zien waar hij moet zijn):

Stap 4 - jQuery CSS

Het is dus duidelijk dat we een beetje extra CSS nodig hebben voor alle hakkende en veranderende jQuery voor ons. Dingen die extra styling nodig hebben, zijn:

• #sidebarToggleButton - Met behulp van de klassen die jQuery voor ons toewijst, kunnen we nu veilig de afbeeldingen 'sidebarClose.png' en 'sidebarOpen.png' stijlen die ik u eerder liet opslaan.
• De accordeon heeft zeker wat werk nodig. We moeten de vierkante corders repareren met wat CSS3 en de actieve klasse stylen.

/ * jQUERY CSS * / #sidebar> ul border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-border-radius: 5px;  span.sidebarOpen background: url (images / sidebarOpen.png) no-repeat center;  span.sidebarClose background: url (images / sidebarClose.png) no-repeat center;  h2.geselecteerd background: url (images / activeBg.png) repeat-x! BELANGRIJK; kleur: wit! BELANGRIJK; 

Slechts 2 dingen om op te merken:

1. #sidebar> ul - Dat wil zeggen, het directe ul kind van #sidebar krijgt de cool afgeronde corders - nog steeds beta CSS3. Maar werkt in alle browsers van Mozilla, Opera en WebKit.
2. !BELANGRIJK - Dit is nodig om te vervangen door wat eerder is ingesteld: de standaard grijze achtergrond voor de grepen.

En dus, nu is je uiteindelijke product iets dat er ongeveer zo uitziet: (klik voor HTML-versie)

Afsluiten

Daarom hebben we in deze tutorial een aantal dingen behandeld. We hebben gekeken naar dynamische zijbalken, veel jQuery om de zijbalk die eigenlijk een accordeon is, te laten zien en verbergen! Deze zelfstudie was gericht op het gebruik van extra plug-ins voor de standaard jQuery (We plugged jQuery UI in), en ook de dynamic_sidebar-functie.