jQuery UI og ThemeRoller

• Kan 18, 2024

Hvis du vil have en nem og hurtig måde at designe brugergrænsefladen til et websted eller en webapplikation og også inkluderer jQuery, så tjek jQuery UI. Der finder du en nøglefærdig CSS- og jQuery-funktions-kombipakke, der gør det nemt at tilføje disse funktioner til dit nye projekt.

Lad os tage en tur gennem stedet. Under linket Demoer og dokumenter finder du en liste over de interaktive jQuery-plugins, såsom træk og slip, faner og overgange. For hvert plugin er der en demo, dokumentation og prøve cut-and-paste-kode til test.

Hvis du vil hente nøglefærdige filer, skal du klikke på linket Temaer for jQuery ThemeRoller. Standard css er et blåt knogler hvidt og gråt tema. Du kan klikke på download-knappen og bruge som den er, men der er også et galleri med farverige temaer for at komme i gang. I området Galleri er der flere tema-miniaturebilleder. Klik bare på den, du kan lide. Du kan downloade det tema, som det er, ved at klikke på fanen Rul din egen og derefter knappen Download tema. Men det sjove begynder, når du begynder at tweete temaet med ThemeRoller-motoren. Der er 11 indstillinger, du kan tilpasse. De fleste indstillinger giver dig mulighed for at ændre baggrundstekstur og farve, kantfarve og tekst- og ikonfarver.

Du har flere muligheder for at tweete temaet.

• Skriftindstillinger: Du kan ændre skrifttypefamilien, vægt og størrelse.
  
  
• Hjørneradius: Du kan ændre hjørneradius. Hvert tema har en standard afrundet fanestil, men her kan du ændre størrelsen på hjørnet eller indstille det til nul for en firkantet fane. (Fanerne er bygget på CSS3, som ikke understøttes af IE på dette tidspunkt.)
  
  
• Header / Toolbar: Du kan indstille farveværdierne for området bag fanerne og overskriftsområderne, f.eks. Til kalenderplugin.
  
  
• Indhold: Her kan du indstille farverne til hovedindholdsområdet. Du kan få et meget andet design afhængigt af dit valg af grænse eller ingen grænse.
  
  
• Klikbar standardtilstand: Dette kontrollerer standard (inaktivt) udseende på fanerne og knapperne.
  
  
• Klikbar hovertilstand: Disse kontrolelementer er til udseendet af fanerne og knapperne i hovertilstanden.
  
  
• Klikbar Aktiv tilstand: Kontrollerer udseendet på fanen og knappen for den aktive side.
  
  
• Fremhæv: baggrund, kant, tekst og ikonfarver for fremhævede områder.
  
  
• Fejl: Baggrunds-, kant-, tekst- og ikonfarver til fejlmeddelelser.
  
  
• Modalskærm til overlejringer: Kontrollerer baggrundsfarve og tekstur.
  
  
• Dråbe skygger: Kontrol for skyggeens opacitet, tykkelse, forskydning og hjørner for en dråbe skyggeeffekt.
  
  

Når du downloader jquery-ui-x.x.xx.custom.zip og upzip pakken, vil du se tre mapper (css, udviklingsbunt og js) og en index.html-fil. Filen index.html er en demo til de plugins, der er tilpasset dit tema. Du vil placere css- og js-mapperne i dit hovedmappe og kopiere / indsætte koden fra filen index.html i koden for dit websted, hvor du vil, at plugins skal vises.

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

Video Instruktioner: Theming Theme Roller Customizations in JQuery UI (Kan 2024).