jQuery UI og ThemeRoller

• April 23, 2024

Hvis du vil ha en enkel og rask måte å designe brukergrensesnittet for et nettsted eller webapplikasjon og også inkluderer jQuery, kan du sjekke ut jQuery UI. Der finner du en totalentreprise CSS og jQuery-funksjoner kombinasjonspakke som gjør det enkelt å legge disse funksjonene til det nye prosjektet ditt.

La oss ta en tur gjennom nettstedet. Under lenken Demoer og dokumenter finner du en liste over jQuery interaktive plugins som dra og slipp, faner og overganger. For hver plugin er det en demo-, dokumentasjons- og prøvekutt-og-lim-kode for testing.

Hvis du vil ta tak i nøkkelferdige filer, klikker du på koblingen Temaer for jQuery ThemeRoller. Standard css er et blått bein hvitt og grått tema. Du kan klikke på nedlastningsknappen og bruke som den er, men det er også et galleri med fargerike temaer for å komme i gang. I Galleri-området er det flere miniatyrbilder. Bare klikk på den du liker. Du kan laste ned det temaet som det er ved å klikke på Rull din egen fane og deretter Last ned tema-knappen. Men moroa begynner når du begynner å twitre temaet med ThemeRoller-motoren. Det er 11 alternativer du kan tilpasse. De fleste alternativene lar deg endre bakgrunnsstruktur og farge, kantfarge og tekst- og ikonfarger.

Du har flere alternativer for å twitre temaet.

• Skriftinnstillinger: Du kan endre skriftfamilien, vekt og størrelse.
  
  
• Hjørneradius: Du kan endre hjørneradius. Hvert tema har en standard avrundet fanestil, men her kan du endre størrelsen på hjørnet eller stille det til null for en firkantet fane. (Fanene er bygget på CSS3, som ikke støttes av IE på dette tidspunktet.)
  
  
• Topptekst / verktøylinje: Du kan stille inn fargeverdiene for området bak kategoriene og overskriftsområdene, for eksempel for kalenderplugin.
  
  
• Innhold: Her kan du stille inn fargene for hovedinnholdsområdet. Du kan få et veldig annet design avhengig av valg av grense eller ingen grense.
  
  
• Klikkbar standardtilstand: Dette kontrollerer standard (inaktivt) utseendet til kategoriene og knappene.
  
  
• Klikkbar svevetilstand: Disse kontrollene er for utseendet til kategoriene og knappene i svevetilstanden.
  
  
• Klikkbar aktiv tilstand: Kontrollerer utseendet til fanen og knappen for den aktive siden.
  
  
• Uthev: bakgrunns-, kant-, tekst- og ikonfarger for markerte områder.
  
  
• Feil: Bakgrunn, kant, tekst og ikonfarger for feilmeldinger.
  
  
• Modalskjerm for overlegg: Kontrollerer bakgrunnsfarge og tekstur.
  
  
• Drop Shadows: Kontroller for skygge-opacitet, tykkelse, forskyvning og hjørner for en drop-skyggeeffekt.
  
  

Når du laster ned jquery-ui-x.x.xx.custom.zip og upzip pakken, vil du se tre mapper (css, utviklingsbunt og js) og en index.html-fil. Index.html-filen er en demo for plugins som er utformet med temaet ditt. Du vil legge css- og js-mappene i hovedkatalogen og kopiere / lime inn koden fra index.html-filen i koden for nettstedet ditt der du vil at plugins skal vises.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Video Instruksjoner: Theming Theme Roller Customizations in JQuery UI (April 2024).