Komme I Gang med jQuery UI

link hva er jQuery UI?

jQuery UI er en widget og samhandling bibliotek bygget på toppen av Jquery JavaScript Bibliotek som du kan bruke til å bygge svært interaktive webapplikasjoner. Denne guiden er laget for å få deg oppdatert på hvordan jQuery UI fungerer. Følg med nedenfor for å komme i gang.

link Start Med Å Sjekke Ut Demoer

for å få en følelse for hva jQuery UI er i stand til, sjekk UT UI Demoer.

i demos-delen viser navigasjonen alle samhandlingene og widgetene som jQuery UI tilbyr. Velg en interaksjon eller widget, og du vil bli presentert med flere demo konfigurasjoner for den aktuelle plugin. Hver demo lar deg vise kildekoden, endre temaer, OG URL kan alltid være bokmerket. For eksempel, sjekk ut trekkspill widget fyll plass demo side.

link Bygg Din Egendefinerte jQuery UI Last ned

Når du har en grunnleggende forståelse av hva jQuery UI er og hva den gjør, er du klar til å prøve det ut! Det er på tide å gå over Til Nedlastingsbyggeren på jquery UI-nettstedet for å laste ned en kopi av jQuery UI. jQuery UI Download Builder lar deg velge komponentene du ønsker å laste ned og få en tilpasset versjon av biblioteket for prosjektet. Det er tre enkle trinn for å bygge din egendefinerte jQuery UI nedlasting:

link Trinn 1: Velg Hvilke Komponenter Du trenger

hovedkolonnen I Nedlastingsbyggeren viser alle JavaScript-komponentene i jQuery UI kategorisert i grupper: kjerne, interaksjoner, widgets og effekter. Noen komponenter i jQuery UI avhenger av andre komponenter. Bare merk av i boksene for widgets du ønsker å laste ned og eventuelle nødvendige avhengigheter vil automatisk bli sjekket også. Komponentene du velger vil alle bli kombinert i en tilpasset Jquery UI JavaScript-fil.

lenke Trinn 2: Velg Et Tema (eller Rull Ditt Eget Tilpassede Tema)

I høyre kolonne I Nedlastingsbyggeren finner du et felt der du kan velge mellom en rekke forhåndsdesignede temaer for jquery UI widgets.Du kan enten velge mellom de ulike temaene vi tilbyr, eller du kan designe ditt eget tilpassede tema ved Hjelp Av ThemeRoller (mer om det senere).

Avanserte Temainnstillinger: tema-delen av Download Builder tilbyr også noen avanserte konfigurasjonsinnstillinger for temaet ditt. Hvis du planlegger å bruke flere temaer på en enkelt side, vil disse feltene komme til nytte. Hvis du planlegger å bare bruke ett tema på en side, kan du hoppe over disse innstillingene helt.

link Step 3: Velg En Versjon av jQuery UI

det siste trinnet I Download Builder er å velge et versjonsnummer. Pass på å sjekke ikke bare hvilken versjon av jQuery UI du velger, men også versjonen av Jquery Core som versjonen støtter, da forskjellige versjoner av biblioteket støtter forskjellige versjoner av jQuery. For mer informasjon om hva som er nytt i hver versjon av jQuery UI, se prosjektets upgrade guides og changelogs.

link Klikk Last ned!

Du er ferdig Med Nedlastingsbyggeren! Klikk på last ned-knappen, og du får en tilpasset zip-fil som inneholder alt du valgte.

link Grunnleggende Oversikt: Bruke jQuery UI på En Nettside

Neste, åpne opp index.html fra den nedlastede zip i en tekst editor. Du vil se at det refererer til temaet ditt, jQuery OG jQuery UI. Vanligvis må du inkludere disse tre filene på en side for å bruke jquery UI widgets og interaksjoner:

<link rel="stylesheet" href="jquery-ui.min.css">

når du har tatt med de nødvendige filene, kan du legge til noen jquery widgets på siden din. Hvis du for eksempel vil lage en datepicker-widget, legger du til et tekstinndataelement på siden din og ringer .datepicker() på den. Slik:

HTML:

<input type="text" name="date">

JavaScript:

$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

link Tilpasse jQuery UI Til Dine Behov

jQuery UI lar deg tilpasse den på flere måter. Du har allerede sett Hvordan Download Builder lar deg tilpasse din kopi av jQuery UI å inkludere bare de delene du ønsker, men det er flere måter å tilpasse denne koden til gjennomføringen.

link Jquery UI Grunnleggende: Bruke Alternativer

Hver plugin i jQuery UI har en standardkonfigurasjon som er rettet mot den mest grunnleggende og felles brukstilfelle. Men hvis du vil at et plugin skal oppføre seg forskjellig fra standardkonfigurasjonen, kan du overstyre hver av standardinnstillingene ved hjelp av «alternativer». Alternativer er et sett av egenskaper gått inn i en jQuery UI widget som et argument. For eksempel har glidebryteren et alternativ for orientering, som lar deg angi om glidebryteren skal være horisontal eller vertikal. Hvis du vil angi dette alternativet for en glidebryter på siden din, sender du det bare inn som et argument, slik:

$( "#mySliderDiv" ).slider({
 orientation: "vertical"
});

You can pass as many different options as you’d like by following each one with a comma (except the last one):

$( "#mySliderDiv" ).slider({
 orientation: "vertical",
 min: 0,
 max: 150,
 value: 50
});

åte. Selvfølgelig berører eksemplet ovenfor knapt på hva du kan gjøre med jQuery UI. For å få detaljert informasjon om hele settet med jquery UI widgets, kan du gå til jquery UI dokumentasjon.

link Visuell Tilpasning: Designe en jQuery UI Tema

hvis du ønsker å designe ditt eget tema, har jQuery UI en veldig glatt program for nettopp det formålet. Det kalles ThemeRoller, og du kan alltid få til det ved enten å klikke på» Temaer » linken i jquery UI navigasjon, eller bare gå til jQuery UI ThemeRoller.ThemeRoller gir et tilpasset grensesnitt for å designe alle elementene som brukes av jQuery UI widgets. Når du justerer «spakene» i venstre kolonne, vil widgets til høyre gjenspeile ditt design. Galleri-fanen I ThemeRoller tilbyr en rekke forhåndsdesignede temaer (De samme som Tilbys Av Nedlastingsbyggeren) som du kan justere eller laste ned som de er.

link Nedlasting Temaet

når du klikker på «Last ned tema» – knappen I ThemeRoller, vil du bli sendt til Download Builder og din egendefinerte tema vil bli automatisk valgt I Tema rullegardinmenyen. Du kan konfigurere nedlastingspakken videre derfra. Når du laster ned, vil du se at example.html siden er stylet med ditt egendefinerte tema.

Hurtigtips: hvis du noen gang trenger å redigere temaet ditt, bare åpne CSS-filen og finn hvor det står «for å vise og endre dette temaet, besøk …»AT URL vil åpne temaet I ThemeRoller for redigering.

link Support: Hvor Kan Jeg Få Hjelp?