Video: Week 9, continued 2024
Produsentene av jQuery og jQuery UI CSS gjør en god jobb med å dokumentere internene i biblioteket. Fra et CSS perspektiv, materialet funnet på jqueryui. com forteller deg om stilene som brukes til å lage produksjonen du har sett på forskjellige steder. Her er en god ide om hvordan den første siden med dokumentasjon er lagt ut.
En av de første tingene du ser på denne siden er at utviklerne anbefaler at du bruker ThemeRoller til å gjøre endringene dine når det er mulig. Det er imidlertid mange tilfeller der ThemeRoller ganske enkelt ikke vil gjøre jobben, så du må gjøre endringene på en mer tradisjonell måte.
Klassene er delt inn i to filer med en rekke stiler i hver fil:
-
jquery. ui. kjerne. css: Inneholder alle stilene som påvirker strukturelle elementer på en eller annen måte. Disse inkluderer
-
Layouthjelpere: Bestemmer overordnet layout av objekter på skjermen; gjør det mulig å samhandle med hjelpemidler og gir en metode for å tilbakestille oppsettet etter behov.
-
Interaksjonsanvisninger: Definerer når et objekt er deaktivert.
-
Ikoner: Angir ikonstatusen.
-
Overlays: Bestemmer størrelsen og plasseringen av overlegg.
-
-
jquery. ui. tema. css: Definerer stiler som påvirker tematiske elementer, for eksempel farge, skrifter og bakgrunner. Disse inkluderer
-
Komponentbeholdere: Angi utseendet på innholdet i ulike objektbeholdere. Beholderne inneholder normalt det overordnede objektet, objektoverskriftene og objektdataene (angitt som innhold i stilene).
-
Interaksjonstilstander: Bestem utseendet til et objekt når bestemte samspillstilstander forekommer. De fire samspilletilstandene er: Standard (når ingenting skjer med objektet), svever (når musemarkøren er over objektet), aktiv (når brukeren faktisk utfører en oppgave med objektet) og fokuserer (når brukeren har valgt objektet, men gjør ingenting med det).
-
Interaksjons-signaler: Bestem utseendet på et objekt som er i en bestemt tilstand for å hjelpe brukeren å forstå objektets status.
Handlingsintervallene er: høydepunkt (objektet eller innholdet er valgt for interaksjon); feil (en feil har oppstått med et objekt); feiltekst (en feil har oppstått med innhold, vanligvis tekst, i et objekt); deaktivert (objektet eller innholdet er deaktivert); primær (et objekt er primær- eller førstegangsobjektet i et hierarki av objekter); og sekundær (et objekt er sekundær eller andre nivå objekt i et hierarki av objekter).
-
Ikoner: Definer tilstanden og plasseringen av ikonene som brukes med en gjenstand. Staten og posisjonering styres separat. Statens informasjon avgjør om ikonet er en del av en overskrift eller innholdet. I tillegg bestemmer den formatering basert på status for ikonet: standard, svever, aktiv, markering, feil og feiltekst. Ikoner er plassert individuelt basert på ikonnavn, for eksempel. ui-ikon-karat-1-n.
Ikonene er faktisk definert i blokkformat som en del av delene og bildene i ikondelen av filen.
Du kan se de widget-spesifikke ikonbildene her.
Standardikonbildene vises her.
Du finner de aktive ikonbildene her og de som brukes til å markere her.
Når et program opplever en feil, ser du listen over ikoner her.
-
Hjørneradius: Oppretter avrundede hjørner på de forskjellige objektene.
-
Overlays: Bestemmer formateringen av innholdet i overlegg og formateringen av overleggsskyggen (slik at du kan se at det er et objekt bak objektet foran).
-
For bedre å forstå hvordan ting fungerer, er det en god ide å se på de faktiske filene. Du kan finne den første filen på et sted som // kode. jQuery. com / ui / 1. 9. 2 / temaer / base / jquery. ui. kjerne. css hvor // kode. jQuery. com / ui / er basen URL, 1. 9. 2 er versjonen av jQuery eller jQuery UI i spørsmålet, og temaer / base / jquery. ui. tema. css er den spesifikke filplasseringen.
For å få en kopi av CSS for en annen versjon av jQuery eller jQuery brukergrensesnitt, må du bare endre versjonens delen av nettadressen. Den andre filen er funnet på et sted som // kode. jQuery. com / ui / 1. 9. 2 / temaer / base / jquery. ui. tema. css. Dette er hva du ser når du ser på jquery. ui. kjerne. css.
/ * ui-icon-seek-first er deprecated, bruk ui-icon-seek-start i stedet * /
Stilen er kommentert slik at du ikke kan bruke den. Imidlertid er notatet fortsatt viktig fordi det forteller deg hvilken stil du vil bruke i stedet.
