jQuery UI en ThemeRoller

• Mei 2, 2024

Als u een eenvoudige en snelle manier wilt om de gebruikersinterface voor een website of webtoepassing te ontwerpen en ook jQuery op te nemen, bekijk dan de gebruikersinterface van jQuery. Daar vindt u een kant-en-klaar combo-pakket voor CSS en jQuery-functies waarmee u deze functies eenvoudig aan uw nieuwe project kunt toevoegen.

Laten we een wandeling maken door de site. Onder de link Demo's en Documenten vindt u een lijst met de interactieve jQuery-plug-ins zoals slepen en neerzetten, tabbladen en overgangen. Voor elke plug-in is er een demo, documentatie en voorbeeld knip- en plakcode voor testen.

Als u de turnkey-bestanden wilt pakken, klikt u op de koppeling Thema's voor de jQuery ThemeRoller. De standaard CSS is een wit en grijs thema met kale botten. U kunt op de downloadknop klikken en gebruiken zoals het is, maar er is ook een galerij met kleurrijke thema's om u op weg te helpen. In het gebied Galerij zijn er verschillende themaminiaturen. Klik gewoon op degene die je leuk vindt. U kunt dat thema downloaden zoals het is door op het tabblad Zelf rollen te klikken en vervolgens op de knop Thema downloaden. Maar het plezier begint wanneer je het thema begint te tweeten met de ThemeRoller-engine. Er zijn 11 opties die u kunt aanpassen. Met de meeste opties kunt u de achtergrondstructuur en -kleur, randkleur en tekst- en pictogramkleuren wijzigen.

Je hebt verschillende opties om het thema te tweeten.

• Lettertype-instellingen: u kunt de lettertypefamilie, het gewicht en de grootte wijzigen.
  
  
• Hoekradius: u kunt de hoekradius wijzigen. Elk thema heeft een standaard afgeronde tabstijl, maar hier kunt u de grootte van de hoek wijzigen of deze op nul zetten voor een vierkant tabblad. (De tabbladen zijn gebaseerd op CSS3, dat momenteel niet door IE wordt ondersteund.)
  
  
• Koptekst / werkbalk: u kunt de kleurwaarden instellen voor het gebied achter de tabbladen en de koptekstgebieden, zoals voor de kalenderplug-in.
  
  
• Inhoud: hier kunt u de kleuren instellen voor het hoofdinhoudsgebied. U kunt een heel ander ontwerp krijgen, afhankelijk van uw keuze van de rand of geen rand.
  
  
• Klikbare standaardstatus: hiermee wordt de standaardweergave (inactief) van de tabbladen en knoppen bepaald.
  
  
• Klikbare zweeftoestand: deze bedieningselementen zijn bedoeld voor de weergave van de tabbladen en knoppen in de zweeftoestand.
  
  
• Klikbare actieve status: bepaalt het uiterlijk van het tabblad en de knop voor de actieve pagina.
  
  
• Hoogtepunt: de achtergrond-, rand-, tekst- en pictogramkleuren voor gemarkeerde gebieden.
  
  
• Fout: achtergrond-, rand-, tekst- en pictogramkleuren voor foutmeldingen.
  
  
• Modaal scherm voor overlays: regelt achtergrondkleur en textuur.
  
  
• Slagschaduwen: regelt de schaduwdekking, dikte, offset en hoeken voor een slagschaduweffect.
  
  

Wanneer u het bestand jquery-ui-x.x.xx.custom.zip downloadt en het pakket upzipt, ziet u drie mappen (css, ontwikkelbundel en js) en een index.html-bestand. Het bestand index.html is een demo voor de plug-ins die zijn vormgegeven met uw thema. U wilt de css- en js-mappen in uw hoofddirectory plaatsen en de code van het bestand index.html kopiëren / plakken in de code voor uw site op de locatie waar u de plug-ins wilt laten verschijnen.

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

Video-Instructies: Theming Theme Roller Customizations in JQuery UI (Mei 2024).