jQuery UI och ThemeRoller

• Maj 7, 2024

Om du vill ha ett enkelt och snabbt sätt att designa användargränssnittet för en webbplats eller webbapplikation och även inkludera jQuery, kolla in jQuery UI. Där hittar du en nyckelfärdig CSS- och jQuery-funktionskombinationspaket som gör det snabbt att lägga till dessa funktioner i ditt nya projekt.

Låt oss ta en promenad genom webbplatsen. Under länken Demos and Docs hittar du en lista över jQuery interaktiva plugins som dra och släpp, flikar och övergångar. För varje plugin finns det en demo, dokumentation och provkodning och klistra in kod för testning.

Om du vill ta nyckelfärdiga filer klickar du på länken Teman för jQuery ThemeRoller. Standard-css är ett vitt och grått tema med bara ben. Du kan klicka på nedladdningsknappen och använda som den är men det finns också ett galleri med färgglada teman för att komma igång. I Galleri-området finns det flera miniatyrer för teman. Klicka bara på den du gillar. Du kan ladda ner det temat som det är genom att klicka på fliken Rulla din egen och sedan på knappen Hämta tema. Men det roliga börjar när du börjar tweeta temat med ThemeRoller-motorn. Det finns 11 alternativ som du kan anpassa. De flesta alternativ tillåter dig att ändra bakgrundsstruktur och färg, kantfärg och text- och ikonfärger.

Du har flera alternativ för att tweeta temat.

• Teckensnittinställningar: Du kan ändra teckensnittsfamiljen, vikt och storlek.
  
  
• Hörnradie: Du kan ändra hörnradie. Varje tema har en standard rundad flikstil men här kan du ändra storleken på hörnet eller ställa in det på noll för en kvadratisk flik. (Flikarna är byggda på CSS3, som inte stöds av IE för närvarande.)
  
  
• Rubrik / verktygsfält: Du kan ställa in färgvärden för området bakom flikarna och rubrikområdena, t.ex. för kalenderplugin.
  
  
• Innehåll: Här kan du ställa in färgerna för huvudinnehållsområdet. Du kan få en helt annan design beroende på ditt val av gräns eller ingen gräns.
  
  
• Klickbart standardtillstånd: Detta kontrollerar standardutseendet (inaktivt) på flikarna och knapparna.
  
  
• Klickbart hoverläge: Dessa kontroller är för utseendet på flikarna och knapparna i muspekläget.
  
  
• Klickbart aktivt tillstånd: Kontrollerar utseendet på fliken och knappen för den aktiva sidan.
  
  
• Markera: Bakgrunds-, kant-, text- och ikonfärger för markerade områden.
  
  
• Fel: Bakgrunds-, kant-, text- och ikonfärger för felmeddelanden.
  
  
• Modal skärm för överlägg: Kontrollerar bakgrundsfärg och struktur.
  
  
• Droppskuggor: Kontroller för skuggens opacitet, tjocklek, förskjutning och hörn för en droppskuggeffekt.
  
  

När du laddar ner jquery-ui-x.x.xx.custom.zip och upzip paketet ser du tre mappar (css, utvecklingsbunt och js) och en index.html-fil. Filen index.html är en demo för plugins som är utformade med ditt tema. Du vill placera css- och js-mapparna i din huvudkatalog och kopiera / klistra in koden från index.html-filen i koden för din webbplats på den plats där du vill att plugins ska visas.

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