Morsomt med jQuery-plugin-dummies

JQuery-biblioteket er imponerende på egenhånd, og når du legger til biblioteker som jQuery UI og jQuery Mobile, kan du se nøyaktig hvor kraftig dette verktøyet er. Men det er ikke alt. Utviklerne av jQuery bygget inn en utrolig utvidelsesmekanisme som gjør det enkelt for tredjeparter å legge til nye utvidelser kalt plug - ins til jQuery.

Detaljer om hver plugin er forskjellige, men generelt må du gjøre følgende for å få dem til å fungere:

1. Link til jQuery.

   Alle disse plugin-modulene utvider funksjonaliteten til jQuery, så de begynner med antagelsen om at du bruker jQuery på nettstedet ditt.

2. Last ned et ekstra bibliotek.

   Plugin-modulene er alle primært JavaScript-filer, så du kan enten installere dem på din egen server eller lage en kobling. Noen av programtilleggene inneholder flere filer og instruksjoner, så husk å sjekke detaljene på plugin-hovedsiden.

3. Legg til en init () -funksjon.

   De fleste jQuery-sidene har noen form for initialisering, og nesten alle plugin-moduler må initialiseres. Pass på å legge til en init () -funksjon på vanlig måte.

4. Ring den aktuelle jQuery-funksjonen.

   De fleste av programtilleggene legger ganske enkelt til nye funksjoner til jQuery. For det meste krever kjøring av en plugin bare å bruke nye jQuery-funksjoner til en node eller noder på siden din.

Det finnes bokstavelig talt hundrevis og hundrevis av flotte plugin-moduler. Du kan se en haug med dem på Andy's Books. Du finner mange flere plugin-moduler på jQuery Plugin Registry.

ipwEditor

Denne kule plugin-modulen gjør en del av websiden din redigerbar. Du kan enten velge en enkel form for redigering eller noe mer sofistikert med FCKedit-verktøyet. (Etter at du begynner å spille med dette verktøyet, vil du umiddelbart gjenkjenne det fordi du sikkert har brukt det dusinvis av ganger som bruker.) IpwEditor lagrer ikke sidene dine. Du trenger fortsatt noen form for AJAX og server-side koding for å gjøre det. Dette er imidlertid en veldig enkel måte å bygge et forenklet CMS på.

Flot

Noen ganger må websidene dine vise noen slags data. Det finnes en rekke kraftige grafikk plugin-moduler du kan bruke. Et enkelt og kraftig alternativ kalles Flot.

Med flotprogrammet kan du lage et diagram fra et 2D-utvalg av datapunkter. Du kan trekke ut dataene fra en database, samle den fra brukere, eller hva som helst. Flot plug-in bygger et lerret og genererer ett av et antall standarddiagrammer. Dette er et spesielt kraftig verktøy hvis du trenger å gjøre sanntids grafikk på nettstedet ditt.

Cloud

I de siste årene har det blitt populært å tilby datavisualiseringer , eller måter å illustrere data på.En slik mekanisme er tagskyen . I hovedsak plasserer dette verktøyet en rekke ord i semi-tilfeldige stillinger. I en typisk taggsky brukes posisjonen, størrelsen og fargen på ordene til å representere forholdets relative styrke og forhold. Cloud jQuery-plugin-modulen gjør det ganske enkelt å bygge egne taggskyger. Du kan konvertere hvilken som helst HTML-liste til en taggsky. Bare legg til et valgverdierattributt til hvert

element i listen, og plugin-modulen endrer automatisk størrelsen og vekten av elementet i henhold til verdien.

Tabellsporter

AJAX-programmer involverer ofte henting av data, som ofte vises i et HTML-tabell. Den tabellære plugin-modulen lar brukeren enkelt sortere et bord ved å klikke på en overskrift.

Når brukeren klikker på fornavnet, blir tabellen sortert etter fornavn i alfabetisk rekkefølge. Klikk på fornavnetoverskriften igjen for å sortere etter fornavn i omvendt rekkefølge. Standard oppførselen til tabell sorterer lar deg sortere etter hvilket som helst overskriftsfelt.

Droppy

Drop-down menyer har blitt et viktig bruksverktøy på nettsteder. Det er hundrevis av jQuery-moduler for å håndtere denne funksjonen. Ett godt valg er droppy fordi det er veldig enkelt å bruke.

De fleste navigasjonssystemer er i siste instans nestede lister over lenker. Den droppy plug-in tar bare en ul med en haug med lenker (nestet så dypt som du ønsker) og gjør det til en pent formatert rullegardinmeny.

Galleria

Bildegallerier er et annet veldig populært plugin-emne. Mange bildegallerier er tilgjengelige for å leke med. Galleria er et populært, kraftig bildegalleri, og krever ingen skriptserver på server side.

Standardbildegalleriet har noen flotte funksjoner:

• Bilder er forhåndsinstallert: Hvert bilde er lastet inn i minnet når siden initialiseres, så det blir ingen forsinkelse når brukeren bytter mellom bilder.

• Galleriverktøyet oppretter automatisk miniatyrbilder: Bildene med mindre indekser (miniatyrbilder) blir automatisk opprettet og lagt til på siden.

• Når du klikker på et miniatyrbilde, blir det utvidet til visningsområdet: Det større visningsområdet inneholder en større versjon av gjeldende bilde.

• Når du klikker på visningsområdet, kan du se neste bilde: Standardoppførelsen lar deg enkelt bla gjennom bilder med museklikk.

• Utgangen er basert på CSS: Bruk den medfølgende CSS-filen til å administrere visning av siden din, inkludert hvordan og hvor miniatyrbildene går, hvor stort skjermbildet er og mer.

• Det har mange alternativer: Galleria-plugin-modulen er veldig tilpassbar. Den har mange avanserte alternativer. Se dokumentasjonen for mer.

Bruke Galleria er som en annen jQuery-plugin. Legg til passende skript, skriv noen grunnleggende HTML, og legg til en magisk jQuery-node:

1. Importer skriptene.

   Du må ha jQuery som alltid, så vel som jquery. galleria og galleria. css CSS stilark.

2. Lag en liste med bilder.

   Gjør hvert liste element et bilde.

3. Legg til galleria () knutepunktet til listen.

   Det er egentlig alt du trenger å gjøre.

4. Spill med alternativene.

   Se over dokumentasjonen for noen gode alternativer, inkludert muligheten til å bruke egendefinerte miniatyrbilder, angi din egen utgangsbeholder og kjøre tilbakeringingsfunksjoner når brukeren velger et bilde eller miniatyrbilde.