Nøyaktig hvordan du oppretter en tilpasset jQuery-aksept

Det ser ut til at vi må legge til noen ekstra CSS for IE6 for å regne for whitespace bug:

ul # trekkspill float: left; bredde: 300px;  ul # trekkraft li float: left; bredde: 298px;  ul # trekkraft a.heading bredde: 298px;  ul # trekkraft ul li float: none; bredde: auto; 

JQuery UI Accordion

Deretter må vi initialisere trekkspillet på vår uordnede liste med et trekkspill:

Og der har du det, et fungerende trekkspill.

For å gjøre det nåværende åpne trekkspillet skiller seg ut, la jeg til litt ekstra CSS:

ul # trekkspill li.ui-trekkspill-valgt a.heading bakgrunn: # 025185; farge: #fff; 

Klassenavnet til ui-trekkspill-utvalgt blir automatisk lagt til den nåværende trekkspilldelen.

Vår Custom jQuery Accordion

Nå som vi har gjort jQuery UI-trekkspillet, er det på tide å lage vår egen. En ting som jeg ikke nødvendigvis liker om jQuery UI-versjonen er måten den viser når JavaScript er deaktivert. Jeg foretrekker å ha det slik at bare en seksjon er åpen om gangen.

For å oppnå dette, skal jeg legge til i et lite PHP. Du kan enkelt oppnå dette med hvilket som helst programmeringsspråk også.

Tanken bak dette er at vi skal passere en variabel i nettadressen, og hvis variabelen faller sammen med hver seksjon, tildeler vi en klasse av nåværende til den delen. Det er mye lettere å se dette i koden, så ta en titt:

 
 > Nylige innlegg 
 
01.19.2009 Nylig oppføringstitel
 
01.15.2009 Nylig oppføringstitel
 
01.13.2009 Nylig oppføringstitel
 
01.11.2009 Nylig oppføringstitel
 
01.10.2009 Nylig oppføringstitel
 
  > Populære innlegg 
 
08.16.2008 Populær oppføringstitel
 
06.12.2008 Populær oppføringstitel
 
04.12.2008 Populær oppføringstitel
 
06.12.2007 Populær oppføringstitel
 
03.12.2007 Populær oppføringstitel
 
  > Kategorier 
 
kategori navn 7
 
kategori navn 4
 
kategori navn 15
 
kategori navn 29
 
kategori navn 8
 
  > Arkiv 
 
Januar 2009 4
 
Desember 2008 14
 
November 2008 12
 
Oktober 2008 8
 
September 2008 18
 
  

Du bør også legge merke til at jeg endret nettadressen til hver av koblingene, skift trekkspillets seksjoner for å matche opp med if-setningen for seksjonen. Så i utgangspunktet, hvis JavaScript er deaktivert, blir du tatt til en ny side med den delen åpen.

Vi må også fjerne jQuery UI-trekkspillet, og inkludere vår egen:

Ekstra CSS

Med denne lille endringen i markeringen må vi legge til litt ekstra CSS. Vi har ikke lenger ui-trekkspill-utvalgt Klassen blir tilordnet listelistene; det er nå en klasse av nåværende. Vi må også ta hensyn til denne klassenavnendringen i on-state for trekkspillet:

ul # accordion li.current a.heading bakgrunn: # 025185; farge: #fff; 

Så det vi vil gjøre er å skjule alle de uordnede lister, med mindre de er en etterkommer av listeposten med en klasse av nåværende. Jeg har også lagt til et id til denne demonstrasiden, slik at vi kan bruke det samme stilarket for begge eksemplene.

body # customAccordion ul # accordion li ul display: none;  body # customAccordion ul # trekkspill li.current ul display: block; 

Den egendefinerte JavaScript

Først vil vi utføre skriptet når dokumentet er lastet, så vi starter med dette:

$ (dokument) .ready (funksjon () );

Vi vil at trekkspillet skal fungere når overskriftslinjene klikkes, men vi ønsker ikke å forlate siden, så vi må sørge for og returner falsk:

$ (dokument) .ready (funksjon ()  $ ('ul # accordion a.heading'). klikk (funksjon () return false;); );

Deretter liker jeg ikke omrisset som dukker opp rundt koblingene når de klikkes, så jeg setter det til ingen:

$ (dokument) .ready (function () $ ('ul # accordion a.heading'). klikk (funksjon ()  $ (Denne) CSS ( 'disposisjon', 'ingen'); returner falsk; ); );

Det er to forskjellige tilfeller for dette skriptet.

1. Koblingen som klikkes, er delen som allerede er åpen.
2. Koblingen som klikkes på er ikke delen som allerede er åpen.

Det første tilfellet

Dette er ikke funksjonalitet som jQuery UI-versjonen har, men jeg tror at en bruker skal kunne lukke alle seksjoner hvis de vil. Hvis koblingen klikket har en forelder som har en klasse av nåværende, ønsker vi å skyve opp den uordnede listen og fjerne klassen av nåværende.

$ (dokument) .ready (funksjon () $ ('ul # accordion a.heading'). klikk (funksjon () $ (dette) .css ('disposisjon', 'ingen'); hvis ($) .parent (). hasClass ('current')) $ (dette) .siblings ('ul'). slideUp ('slow', funksjon () $ (dette) .parent removeClass ('current'););  returner falsk; ); );

En annen ting som feiler meg om jQuery UI-versjonen, er at du kan bla i trekkspillet, så det er nesten ute av syne, klikk på det, og så skjer samspillet over det du kan se. Rull ned på jQuery UI-eksemplet og prøv det.

Så min løsning er å bruke dette fantastiske lille skriptet kalt jQuery ScrollTo. Det er et veldig lite skript som gir jevn siderulling.

La oss legge til det i hodet av dokumentet før vårt trekkspillskript:

Når seksjonen ruller opp, vil jeg bla vinduet til toppen av trekkspillet:

$ (dokument) .ready (funksjon () $ ('ul # accordion a.heading'). klikk (funksjon () $ (dette) .css ('disposisjon', 'ingen'); ) .parent () .Class ('current')) $ (dette) .siblings ('ul'). slideUp ('slow', funksjon () $ (dette) .parent ); $ .ScrollTo ( '# trekkspill', 1000); );  returner falsk; ); );

Den første parameteren til funksjonen er målet å bla til, og det andre er hvor lang tid det skal ta.

Det andre tilfellet

Denne saken oppstår når delen som klikker ikke er åpen for øyeblikket. Så det første vi vil gjøre er å skjule den nåværende delen og fjerne klassen av nåværende (denne delen av koden er veldig lik det første tilfellet):

$ (dokument) .ready (funksjon () $ ('ul # accordion a.heading'). klikk (funksjon () $ (dette) .css ('disposisjon', 'ingen'); ) .parent () .Class ('current')) $ (dette) .siblings ('ul'). slideUp ('slow', funksjon () $ (dette) .parent ); $ .scrollTo ('# accordion', 1000);); else  $ ('ul # accordion li.current ul'). slideUp ('slow', funksjon () $ (dette) .parent (). removeClass ('current'););  returner falsk; ); );

Deretter ønsker vi å åpne delen vi klikket på og legge til klassen av nåværende:

$ (dokument) .ready (funksjon () $ ('ul # accordion a.heading'). klikk (funksjon () $ (dette) .css ('disposisjon', 'ingen'); ) .parent () .Class ('current')) $ (dette) .siblings ('ul'). slideUp ('slow', funksjon () $ (dette) .parent ); $ .scrollTo ('# accordion', 1000);); else $ ('ul # accordion li.current ul'). slideUp ('slow', funksjon () $ (dette) .parent ) .removeClass ('current');); $ (dette) .siblings ('ul'). slideToggle ('slow', funksjon () $ (dette) .parent (). toggleClass ('nåværende'););  returner falsk; ); );

Til slutt, la oss bla vinduet til toppen av trekkspillet, akkurat som vi gjorde i det første tilfellet:

$ (dokument) .ready (funksjon () $ ('ul # accordion a.heading'). klikk (funksjon () $ (dette) .css ('disposisjon', 'ingen'); ) .parent () .Class ('current')) $ (dette) .siblings ('ul'). slideUp ('slow', funksjon () $ (dette) .parent ); $ .scrollTo ('# accordion', 1000);); else $ ('ul # accordion li.current ul'). slideUp ('slow', funksjon () $ (dette) .parent ) .removeClass ('current');); $ (dette) .siblings ('ul'). slideToggle ('slow', funksjon () $ (dette) .parent (). toggleClass ('current'); ); $ .ScrollTo ( '# trekkspill', 1000);  returner falsk; ); );

Det er det. Alvor. Tror du å skape et trekkspill kunne det være så enkelt?

Konklusjon

La oss nå sammenligne JavaScript-filstørrelsene ved hjelp av nettfanen i Firebug.

I jQuery UI-eksemplet er JavaScript-filene totalt om 73 kb. I vårt egendefinerte eksempel, med tilleggsrulling av vinduet, er JavaScript-filene totalt om 57 kb. Nå kan det ikke virke som mye, men tenk hvis du har et veldig høyt trafikksted. Det kan være mange byte lagret. Plus, nå forstår du mer om jQuery.

Gå nå og skriv din egen jQuery.