Grunderna för jQuery och jQuery UI CSS Layout - dummies

Skaparna av jQuery och jQuery UI CSS gör ett bra jobb med att dokumentera internisterna i deras bibliotek. Ur ett CSS-perspektiv, fann materialet vid jqueryui. com berättar om de stilar som används för att skapa produktionen du har sett på olika ställen. Här är en bra ide om hur den första sidan av dokumentationen är utlagd.

En av de första sakerna du märker på den här sidan är att utvecklarna rekommenderar att du använder ThemeRoller för att göra dina ändringar när det är möjligt. Det finns emellertid många fall där ThemeRoller helt enkelt inte kommer att göra jobbet, så du måste göra ändringarna på ett mer traditionellt sätt.

Klasserna är indelade i två filer med ett antal stilar inom varje fil:

• jquery. ui. kärna. css: Innehåller alla stilar som påverkar strukturella element på något sätt. Dessa inkluderar

  • Layouthjälpmedel: Bestämmer övergripande layout av objekt på skärmen; gör det möjligt att interagera med hjälpteknik; och ger en metod för att återställa layouten efter behov.

  • Interaktionssignaler: Definierar när ett objekt är inaktiverat.

  • Ikoner: Anger ikonstillståndet.

  • Överlagringar: Bestämmer storleken och positionen av överlagringar.

• jQuery. ui. tema. css: Definierar alla stilar som påverkar tematiska element, till exempel färg, teckensnitt och bakgrunder. Dessa inkluderar

  • Komponentbehållare: Ange innehållet av innehåll inom olika objektbehållare. Behållarna innehåller normalt det övergripande objektet, objektrubrikerna och objektdata (angivna som innehåll inom stilar).

  • Interaktionstillstånd: Bestäm förekomsten av ett objekt när specifika interaktionstillstånd uppstår. De fyra interaktionstillstånden är: Standard (när ingenting händer med objektet), svänger musen (när muspekaren är över objektet), aktiv (när användaren faktiskt utför en uppgift med objektet) och fokuserar (när användaren har valt objektet, men gör ingenting med det).

  • Interaktionssignaler: Bestäm utseendet på ett objekt som befinner sig i ett visst tillstånd för att hjälpa användaren att förstå objektets status.

    Samspelskoderna är: markera (objektet eller innehållet är valt för interaktion); fel (ett fel har inträffat med ett objekt); feltext (ett fel har inträffat med innehåll, vanligtvis text, inom ett objekt); inaktiverad (objektet eller innehållet är inaktiverat); primärt (ett objekt är det primära eller första nivån objektet i en hierarki av objekt); och sekundärt (ett objekt är det sekundära eller andra nivån objektet i en hierarki av objekt).

  • Ikoner: Definiera tillstånd och positionering av ikonerna som används med ett objekt. Staten och positioneringen styrs separat. Statens information bestämmer om ikonen är en del av en rubrik eller innehållet. Dessutom bestämmer det formateringen baserat på ikonens status: standard, svängning, aktiv, markering, fel och feltext. Ikoner är placerade individuellt baserat på ikonnamn, till exempel. ui-icon-karat-1-n.

    Ikonerna definieras faktiskt i blockformat som en del av delstaterna och bilderna i ikondelen av filen.

    Du kan se widgetspecifika ikonbilder här.

    Standardikonen bilder visas här.

    Du kan hitta de aktiva ikonbilderna här och de som används för att markera här.

    När en applikation upplever ett fel ser du listan med ikoner här.

  • Hoekradie: Skapar avrundade hörn på de olika objekten.

  • Överlagringar: Bestämmer formateringen av innehållet i överlagringar och formateringen av överlagringsskuggan (så att du kan se att det finns ett objekt bakom objektet framåt).

För att bättre förstå hur sakerna fungerar är det en bra idé att titta på de faktiska filerna. Du kan hitta den första filen på en plats som // kod. jQuery. com / ui / 1. 9. 2 / teman / bas / jquery. ui. kärna. css där // kod. jQuery. com / ui / är basadressen, 1. 9. 2 är versionen av jQuery eller jQuery UI i fråga och teman / bas / jquery. ui. tema. css är den specifika filplatsen.

För att få en kopia av CSS för en annan version av jQuery eller jQuery-användargränssnittet, ändrar du bara versionsnumrets del av webbadressen. Den andra filen finns på en plats som // kod. jQuery. com / ui / 1. 9. 2 / teman / bas / jquery. ui. tema. css. Det här ser du när du tittar på jquery. ui. kärna. css.

/ * ui-icon-seek-first avlägsnas, använd ui-ikon-sök-start istället * /

Stilen är kommenterad så att du inte kan använda den. Notan är dock fortfarande viktig eftersom den berättar vilken stil du ska använda istället.