Sådan downloades jQuery-brugerbiblioteket til HTML5 og CSS3-programmering - dummier

At skrive jQuery UI-kode er ikke svært, men at få de rigtige dele af biblioteket kan være lidt forvirrende for HTML5- og CSS3-programmører. Biblioteket jQuery UI er meget større end standard jQuery-pakken, så du vil muligvis ikke gerne medtage det hele, hvis du ikke har brug for det.

Tidligere versioner af jQuery UI tillod dig at downloade hele pakken, men gemte hver af de forskellige elementer i en separat JavaScript-fil. Det var almindeligt at have et halvt dusin forskellige script tags aktivt for at få de forskellige elementer på plads.

Værre, der var nogle afhængighedsproblemer, så du var nødt til at sikre dig, at du havde installeret visse pakker, før du brugte andre pakker. Dette gjorde et simpelt bibliotek ret komplekst til faktisk at bruge.

Heldigvis gør de seneste versioner af jQuery UI denne proces ret enklere:

1. Vælg (eller opret) dit tema.

   Brug temaRoller-webstedet til at vælge et startsted fra skabelonbiblioteket. Du kan så tilpasse dit tema præcist for at gøre hvad du vil (ændre farver, skrifttyper og andre elementer).

2. Download temaet.

   ThemeRoller har en download-knap. Klik på dette, når du er klar til at downloade dit tema.

3. Vælg de elementer, du ønsker.

   Når du først starter med et projekt, vil du sandsynligvis vælge alle elementer. Hvis du opdager, at siden indlæses for langsomt, kan du måske opbygge en mindre version, der kun indeholder de elementer, du har brug for. For nu skal du vælge alt.

4. Download filen.

   Når du har valgt de elementer, du ønsker, kan du downloade dem i en zip-fil.

5. Installer indholdet af zip-filen i din arbejdskatalog.

   Zip-filen indeholder et antal filer og mapper. Kopier css og js mapper i den mappe, hvor dine websider vil være (ofte public_html eller htdocs mappen). Du behøver ikke at kopiere udviklingsbundtmappen eller indekset. html side.

6. Hvis du installerer flere temaer, skal du kun kopiere temaoplysningerne fra yderligere temaer.

   Alle temaer bruger det samme JavaScript. Kun CSS (og relaterede billedfiler) ændres. Hvis du vil have flere temaer i dit projekt, skal du blot kopiere indholdet af CSS. Hvert tema vil være en anden underkatalog i hoved CSS-biblioteket.

7. Link til CSS-filerne.

   Brug standardlinkteknikken til at linke til de CSS-filer, der er oprettet af jQuery UI. Du kan også linke til dine egne CSS-filer eller bruge intern CSS ud over den brugerdefinerede CSS. Vær sikker på at du får stien til højre.

8. Link til JavaScript-filerne.

   JQuery UI toolkit installerer også to JavaScript-filer: Standard jQuery-biblioteket og jQuery UI-biblioteket. Som standard er begge disse filer installeret i js-biblioteket. Du skal linke til begge filer. Nogle gange vil du se minimerede filer sammen med almindelige versioner. Den minimerede version har termen min integreret. Enten version er fint, men den minimerede version vil blive belastet hurtigere.

Hvis noget ikke virker rigtigt, skal du kontrollere dine filstier igen. Næsten altid opstår der problemer, fordi du ikke har linket til alle de rigtige filer. Bemærk også, at CSS-filer, der er oprettet af jQuery UI, også indeholder billeder. Sørg for, at dit tema har en tilknyttet billedmappe, eller dit projekt fungerer muligvis ikke korrekt. Hvis du kopierede hele CSS og JS mapper fra downloaden, skal du være i orden.