Share
Apple har alltid varit gudar när det gäller hur de presenterar sig och deras produkter. Jag älskar bara sidfältet på Apples startsida och ville använda Accordion-plugin i jQuery-gränssnittet för att uppnå detta! Som om det inte räcker för mig, vill jag kunna visa och gömma det också till mitt nöje. Jag ska visa dig hur!
Denna handledning förutsätter att du har en wordpress-maskin som körs på en server som du har tillgång till att ladda upp filer, ladda ner filer och bläddra till. Om du vill köra en lokal server på din dator med en WordPress-installation finns det en handledning om det här för Windows, och här för OS X.
Vi behöver totalt 6 filer för denna handledning:
Glöm inte att aktivera ditt Wordpress-tema (vilket ska vara lämpligt namnet sidebarTema) i Dashboard! Höger. Till handledningen! Vi ska börja med HTML och Wordpress som vi behöver. Detta kommer att inkludera den strutre vi behöver, då fyller vi upp den med Wordpress-koden som visar inlägg och registrerar och visar sidofältet. Det kommer fortfarande att se icky efter det här, så vi fixar det med några söta CSS som gör att den liknar det som äppels startsida, och gör sidebaret även apple-y. Vi gör detta före JS så att de utan JS fortfarande ser den vackra utseendet. Då äntligen min favorit - jQuery. Vi kommer att animera det öppet och stängt och använda dragspel() och det är parametrar för att generera svängningseffekten.
Snabbt öppna upp functions.php, och sätta in det här:
'AppleQuery')); ?>
functions.php hämtas automatiskt av PHP / Wordpress och kör funktionerna. Den här funktionen ber Wordpress att registrera ett nytt sidofält i instrumentpanelen för att lägga till widgets till den. Det är inte allt men ... Vi måste sätta det i vårt tema! Jag förklarar det efter HTML / Wordpress-biten nästa. Arrayen heter bara sidofältet, så att vi i Dashboard kan välja vilket sidofält som ska redigeras (egentligen inte ett problem ... Mer av en bra vana ibland av många sidor).
Kopiera eller skriv det här till ditt index.html:
<?php bloginfo('name'); ?><?php wp_title(); ?>
Mest lästa artiklar "title =" RSS 2 feed ">; ?>/images/rssIcon.gif )
"title ="">
Ok ... Jag vet att det är mycket. Mycket mycket. Men denna handledning fokuserar inte specifikt på Wordpress och HTML, men jag väljer ut de intressen som du borde troligen förstå.
Så med HTML och Wordpress allihopa, föreslår jag att du går in i din WP-administratör och lägger till några widgets till din blogg. Av någon anledning har sökningen ingen titel, och taggmugg widgeten försvinner inte - gå figur! Jag använde följande i min:
Och det borde se ut så här: 
Killar okej va? Frykt aldrig, CSS är här!
Ja, fantastiskt CSS är här för att spara dagen! Vi vill skapa något något remenisce av detta (photoshop mockup):
Gilla min lilla oskärpaffekt? Jag trodde det passade ... Hur som helst. Blurningen kommer att vara JS, men för närvarande vill vi att allt ska utvidgas och visas, så att 1% smarta cookies som inte har JS aktiverat, kommer sidofältet fortfarande att vara synligt och ser fortfarande ganska ut. Mycket, väldigt stort, men ändå där. Det är en stor bit, så jag har lagt den i en annan fil, för att inte fylla den här sidan - Död inte mig! Kopiera eller skriv denna CSS i din style.css. Du behöver alla dessa bilder:
Dessa 3 saker handlar bara om de enda ryckarna där inne. Jag har testat den koden i FF, Safari 3 och Opera 9, och allt ser perfekt ut! Så här ska det se ut:
Nästa behöver vi jQueryfy det.
Jag älskar jQuery! Jag älskar det så att du kan översätta ord för att koda så enkelt, och jag börjar alltid med att göra orden. Här är en grundläggande ide om vad vi vill att manuset ska göra.
Det verkar som om mycket (men det är verkligen inte ...) så jag tar dig igenom det steg för steg. Öppna filen du skapade kallad sidebar.js och börja skriva!
Som alltid glöm inte att paketera allt i jQuery specialdokument redo:
$ (dokument) .ready (funktion () // jQuery-koden går här);
Sätt allt här mellan dokumentet klart!
Accentsconagua
; ?>/images/rssIcon.gif )
$ ("# sidebar"). css (vänster: "205px"); Detta "döljer" sidofältet genom att manipulera DOM-nivån CSS. Det blir inte riktigt, det blir bara svepat under mattan. Den bokstavliga mattan är div # innehåll. Det går inte att fungera förrän vi har lagt till lite mer CSS, men jag täcker efter det här avsnittet.
$ ("sidebarOpen"). växla (funktion () $ (detta) .removeClass ("sidebarOpen") .addClass ("sidebarClose") .animate (höger: "205px", 500); $ sidobar "). animera (vänster:" 0px ", 500);, funktion () $ (detta) .removeClass (" sidebarClose ") .addClass (" sidebarOpen ") .animate (höger:" 0px " , 500); $ ("# sidebar"). Animera (vänster: "205px", 500);); OK Jag kan förstå din förvirring. Det här är mycket för en stegvis instruktion rätt ?! Jo ja ... Men det är faktiskt 2 mycket liknande saker. Den första funktionen i .toggle () kommer:
Saken är, att den andra funktionen är exakt det, men i omvänd! Det:
Se! Inte så svårt. Det är bara en massa kod att läsa över.
Accordion tid! Jippie! Vi får äntligen använda det jQuery-gränssnittet som finns. Hur de har utformat widgeten gör det super enkelt att implimenta:
$ ("# sidebar ul"). dragspel (header: 'h2', händelse: 'mouseover', activeClass: 'selected'); Det är bara den .dragspel() funktion, applicerad på ul inom #sidebar div. Parametrarna (en per rad) är följande (ganska självförklarande ... men eh):
Det är all JavaScript-koden vi behöver. Det är allt ganska enkelt och enkelt anpassat för att passa vad du behöver!
Jag tycker att detta inte har blivit förhärligat nog än! Det fantastiska med ackordspelet är att du inte behöver redigera någon av Wordpress genererade kod, som vi inte har formaterat oss alls (bortsett från omslaget ul, men det är nödvändigt oavsett). Det är inte bara 100% obegränsande och 100% oberoende av redigerade HTML-koden, men det är också en kort snabb funktion. Accordion gör allt det smutsiga arbetet med att välja, animera, aktivera, byta klasser etc. Det är fantastiskt! Överväga AccordionUI glorified! Du borde troligen ha något liknande det här (jag har lagt dragspelet i mycket lätt så att du kan se var det borde vara):
Så klart vi kommer att behöva lite extra CSS för att tillgodose alla chopping och förändring jQuery gör för oss. Saker som behöver ytterligare styling är:
/ * jQUERY CSS * / #sidebar> ul gränsstråle: 5px; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; -opera-gränsen-radie: 5px; span.sidebarOpen background: url (images / sidebarOpen.png) no-repeat center; span.sidebarClose background: url (images / sidebarClose.png) no-repeat center; h2.selected background: url (images / activeBg.png) repeat-x! VIKTIGT; färg: vit! VIKTIGT;
Bara 2 saker att notera:
Och så nu är din slutliga produktvisning något som här: (Klicka för HTML-version) 
Så vi har gått över lite saker i den här handledningen. Vi har tittat på dynamiska sidfält, Mycket jQuery för att visa och gömma sidofältet som är infact ett dragspel i sig! Denna handledning syftar till att använda ytterligare plugins för standard jQuery (vi pluggar jQuery UI in) och även dynamic_sidebar-funktionen.
