Apple au fost întotdeauna zei în ceea ce privește felul în care se prezintă și produsele lor. Îmi place doar bara laterală de pe Apple Startpage și am vrut să folosesc pluginul Accordion în jQuery UI pentru a realiza acest lucru! Ca și cum acest lucru nu este suficient pentru mine, vreau să-l arăt și să-l ascund și la plăcerea mea. Îți voi arăta cum!

Prefaţă

Acest tutorial presupune că aveți un motor wordpress care rulează pe un server pe care aveți acces pentru a încărca fișiere, a descărca fișiere și a naviga. Dacă doriți să rulați un server local pe computerul dvs. cu o instalare wordpress, există un tutorial pe care aici pentru Windows, și aici pentru OS X.

Fișierele de care aveți nevoie.

Avem nevoie de un total de 6 fișiere pentru acest tutorial:

• functions.php - Aceasta va conține o mică linie de cod care înregistrează bara noastră laterală.
• index.php - Avem cel mai mult nevoie de acest dosar. Orice ghicit de ce?
• jQuery - Iată versiunea 1.2.6 pentru dvs..
• jQuery UI (acordeon) - Avem nevoie doar de pluginul Accordion și de interfața UI, nu întreaga bibliotecă UI.
• sidebar.js - Conține tot codul jQuery pentru bara laterală.
• style.css - Este necesar pentru a activa tema și conține toate CSS-urile.
• imagini - Îți dau o listă de imagini pentru a umple acest lucru puțin mai târziu, în partea CSS. Pentru moment, totuși, avem nevoie doar de o imagine care este în HTML - pictograma RSS! Puneți-o în dosarul "imagini" și începeți!

Nu uitați să activați tema Wordpress (care ar trebui să fie denumită în mod corespunzător sidebarTheme) în tabloul de bord! Dreapta. Pentru tutorial! Vom începe cu HTML și Wordpress de care avem nevoie. Acest lucru va include stratarul de care avem nevoie, apoi îl vom umple cu codul Wordpress care va afișa posturile și se va înregistra și va afișa bara noastră laterală. Încă o să mai arătăm după asta, așa că o să rezolvăm cu niște CSS destul de asemănătoare cu cele ale startului mărului și să facem și bara laterală să arate mereu. Facem asta în fața JS, astfel încât cei fără JS să vadă încă lucrurile frumoase. Apoi, în cele din urmă, preferatul meu - jQuery. O vom anima deschis și închis și vom folosi acordeon() și este parametrii pentru a genera efectul de hover.

Pasul 1 - HTML

Deschideți rapid functions.php, și pune acest lucru în:

 'AppleQuery')); ?>

functions.php este preluat automat de PHP / Wordpress și execută funcțiile. Această funcție cere Wordpress să înregistreze o nouă bara laterală în tabloul de bord pentru a adăuga widget-uri către el. Nu e totul ... Trebuie să punem asta în tema noastră! Voi explica asta dupa ce urmeaza bitul HTML / Wordpress. Matricea doar numește bara laterală, astfel încât în ​​Tabloul de bord să putem selecta bara laterală pe care să o editați (nu este o problemă ... Mai mult despre un obicei bun incase de numeroase bare laterale).

Copiați-l sau tastați-l în index.html:

            
 
 
 
   
 
 
 
  Stiri de top  "title =" RSS feed 2 "> 
  
  
"title ="„>
 
  
 
   
 
  

Explicaţie

Ok ... Știu că sunt multe. Foarte multe. Dar acest tutorial nu se concentrează în mod special pe Wordpress și HTML, dar voi alege interesele pe care ar trebui să le înțelegeți probabil.

• Întregul segment al barei laterale - Aceasta este partea principală a ceea ce este important. Ceea ce cerem wordpress, este asta dacă, în întregul motor wordpress local, funcția dynamic_sidebar este prezent (în care se află functions.php), executați funcția. Aplicația appleQuery specifică numele barei laterale pe care l-am atribuit (în functions.php, tine minte?).
• - Aceasta este o bază PHP pentru a ecou data și ora curente ale utilizatorului. Este doar aici pentru că e pe Apple! Este în formatul: (Luna DD, YYYY 00:00 AM GMT).
• - Uită-te în cap element ... vedeți același lucru? Încă o dată, este pe site-ul Apple. Este doar feedul XML feed pentru blog.
• - Nimic uimitor ... Acesta este doar butonul care va schimba vizibilitatea barei laterale. Am făcut o perioadă de timp, astfel că nu se poate face clic pentru browserele JSless, dar folosind funcția .click () a persoanelor jQuery CU JS poate!

Deci, cu HTML și Wordpress tot, aș sugera să merg în Administratorul WP și să adaug câteva bloguri widget-uri. Din anumite motive, căutarea nu are un titlu, iar widget-ul cloud tag-ului nu dispare. Am folosit următoarele în a mea:

• Categorii
• Arhive
• Link-uri
• Pagini
• Meta

Și ar trebui să arate ceva de genul: Foarte urât, nu? Nu te teme, CSS este aici!

Pasul 2 - CSS

Da, fantasticul CSS este aici pentru a salva ziua! Vrem să creăm ceva oarecum remanisce de acest lucru (macheta Photoshop):

Cum ar fi efectul mic de estompare? M-am gândit că se potrivește ... Oricum. Blurul va fi JS, dar pentru moment dorim ca totul să fie extins și arătat, astfel încât pentru 1% din cookie-urile inteligente care nu au activat JS, bara laterală va fi în continuare vizibilă și încă arata destul. Foarte, foarte mare, dar totuși acolo. Este o bucată mare, așa că am pus-o într-un alt dosar, ca să nu umplem această pagină în sus - Nu mă ucide! Copiați sau tastați acest CSS în dvs. style.css. Veți avea nevoie de toate aceste imagini:

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

Unele lucruri de remarcat

• Am făcut tot ce mi-a stat pentru a rămâne la ems în ceea ce privește dimensiunea fonturilor, astfel că 75% doar scad tot textul la 12px care devine 1em. Asta pentru alt tutorial!
• În codul h1 am folosit text-shadow. Acesta este CSS3. Contribuie doar la aspectul merelor!
• #conţinut - Are o culoare de fundal albă. De ce intrebi? Fundalul va fi întotdeauna alb oricum, care este motivul? Ei bine, prietenii mei, când ajungem la jQuery de care avem nevoie #conţinut pentru a deveni o pătură pentru bara laterală, iar dacă nu există set de fundal, va fi transparent, arătând bara laterală.
• #sidebarToggleButton - Acesta este un nume de o dracu '... Acesta stabileste butonul care va schimba vizibilitatea bara laterala pentru a fi corect in pozitie, dar invizibil pentru oamenii JSless. Când ne mutăm pe JS, imaginile de fundal vor fi aplicate atunci, astfel încât acestea să apară doar pentru oamenii JS!

Aceste trei lucruri sunt doar despre singurele ciudățenii de acolo. Am testat codul în FF, Safari 3 și Opera 9 și totul arată perfect! Iată cum ar trebui să arate:

Înainte trebuie să-l clarificăm.

Pasul 3 - Timpul jQuery!

Îmi place jQuery! Îmi place că puteți traduce cuvintele în cod atât de ușor și întotdeauna încep prin a face cuvintele. Iată o idee de bază a ceea ce vrem să facă scriptul.

• Ascundeți bara laterală.
• Când faceți clic pe '.sidebarOpen', comutați următoarele:
  • Eliminați "bara laterală" a clasei.
  • Adăugați clasa "sidebarClose" (pe care o vom modela secțiunea următoare).
  • Animați bara laterală pentru a aluneca de sub (literal, folosind poziție: relativă;)
  • Animați (acest lucru) pentru a muta suma X de pixeli la stânga (astfel încât să rămână în linie cu bara laterală).
• Inițiați Accordionul.

Că totul pare a fi o mulțime (dar nu este într-adevăr ...), așa că te voi duce prin ea pas cu pas. Deschideți fișierul pe care l-ați creat numit sidebar.js și începeți să tastați!

Pasul 3.1

Ca întotdeauna, nu uitați să împachetați totul în documentul special al jQuery pregătit:

$ (document) .ready (function () // cod jQuery merge aici);

Pune totul aici între documentul pregătit!

Pasul 3.2

$ ("# bara laterală"). css (left: "205px");

Aceasta "ascunde" bara laterală prin manipularea nivelului CSS DOM. În realitate, nu este pur și simplu luată sub covor. Cutia literală fiind # Conținut div. Acest lucru nu va funcționa decât atunci când vom adăuga un pic mai mult CSS, dar voi acoperi după această secțiune.

Pasul 3.3

$ (("bară laterală deschisă")) .addClass ("sidebarClose") .animate (right: "205px", 500) bara laterală ") animați (left:" 0px ", 500); funcția () $ (this) .removeClass (" sidebarClose " , 500); $ ("# sidebar"); animați (left: "205px", 500););

OK, îți pot înțelege confuzia. Aceasta este o mulțime pentru o instruire pas cu pas corect ?! Ei bine, da ... Dar de fapt 2 lucruri foarte asemănătoare. Prima funcție în .comutare() voi:

• Elimină clasa "sidebarOpen" (clasele sunt pentru CSS în secțiunea următoare).
• Adaugă clasa de "sidebarClose".
• Animați butonul mic pentru a glisa spre stânga alături de:
• Bara laterală se alunecă în sine, fiind animată cu jQuery. Ambele sunt setate să iasă în timpul unei jumătăți de secundă, așa că ar trebui să se mute împreună.

Chestia e că funcția a doua este exact așa, dar în sens invers! Aceasta:

• Elimină clasa "sidebarClose".
• Adaugă clasa "sidebarOpen".
• Animalizează butonul mic pentru a aluneca înapoi spre dreapta alături de:
• Bara laterală alunecă înapoi.

Vedea! Nu atât de greu. Este doar o mulțime de cod pentru a citi.

Pasul 3.4

Timp de acordeon! Ura! În final, vom folosi interfața UI jQuery prezentă vreodată. Modul în care a fost proiectat widget-ul face foarte simplu să se impliment:

$ ("header": "h2", eveniment: "mouseover", activeClass: "selectat");

Este doar una .acordeon() funcție, aplicată la ul în cadrul #sidebar div. Parametrii (unul pe linie) sunt după cum urmează (destul de explicativă ... Dar eh):

• antet - Aceasta definește mânerele fiecărui sertar de acordeon - În cazul nostru, h2 al fiecărui widget.
• eveniment - Definește când să schimbați sertarele și dorim ca efectul de hovering ca Apple să aibă, așa că vom folosi mouse-ul peste
• activeClass - Acest lucru este util pentru micul extra CSS pe care suntem pe cale să-l îndurați. Acesta oferă sertarului extins o clasă de "selectat".

Acesta este tot codul JavaScript pe care îl vom avea nevoie. Este foarte simplu și ușor de modificat pentru a se potrivi oricare ai nevoie!

De ce este așa de fantastic

Simt că acest lucru nu a fost încă glorificat! Lucrul uimitor în privința pluginului pentru acordeon este că nu trebuie să editați niciunul dintre ele Wordpress generat cod, pe care nu ni-am formatat deloc (în afara ambalajului ul, dar este necesar indiferent). Nu numai că este 100% discret și 100% nesigur în codul HTML editat, dar este, de asemenea, o scurtă funcție rapidă. Accordion face toată munca murdară de selectare, animare, activare, schimbare de clase etc. Este minunat! Luați în considerare AccordionUI glorificat! Probabil că ar trebui să aveți ceva asemănător cu acest lucru (am pus acordeonul foarte ușor, astfel încât să puteți vedea unde ar trebui să fie):

Pasul 4 - jQuery CSS

Așa că, evident, vom avea nevoie de puțin CSS suplimentar pentru a satisface toate tăieturile și schimbarea jQuery nu pentru noi. Lucrurile care necesită un stil suplimentar sunt:

• #sidebarToggleButton - Folosind clasele pe care jQuery le alocă pentru noi, putem acum să păstrăm în siguranță stilul "sidebarClose.png" și "sidebarOpen.png" al imaginilor pe care l-am primit pentru a le salva mai devreme.
• Acordeonul are nevoie de ceva lucru. Trebuie să reparăm corturile pătrate cu unele CSS3 și stilul clasei active.

/ * jQUERY CSS * / #sidebar> ul limita-raza: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -opera-border-radius: 5px;  span.sidebarDeschide background: url (images / sidebarOpen.png) no-repeat center;  span.sidebarClose background: url (images / sidebarClose.png) centru de repetare;  h2.selected fundal: url (images / activeBg.png) repet-x! IMPORTANT; Culoare: alb IMPORTANT; 

Doar 2 lucruri de remarcat:

1. #sidebar> ul - Asta este, direct ul copilul lui #sidebar devine corseturile rotunde răcite - încă CSS3 beta. Dar funcționează în toate browserele bazate pe Mozilla, Opera și WebKit.
2. !IMPORTANT - Acest lucru este necesar pentru a suprascrie ceea ce a fost setat anterior - implicit, mânerul fundal gri.

Și așa, acum, produsul dvs. final arată să fie ceva destul de genul acesta: (Faceți clic pentru versiunea HTML)

Înfășurați-vă

Așa că am trecut peste niște lucruri în acest tutorial. Ne-am uitat la barele laterale dinamice, o mulțime de jQuery pentru a arăta și a ascunde bara laterală care este un acordeon în sine! Acest tutorial vizează utilizarea pluginurilor suplimentare pentru jQuery implicit (am conectat jQuery UI în) și funcția dynamic_sidebar.