jQuery UI ja ThemeRoller

• Huhtikuu 29, 2024

Jos haluat helpon ja nopean tavan suunnitella verkkosivuston tai verkkosovelluksen käyttöliittymä ja sisältää myös jQueryn, tutustu jQuery-käyttöliittymään. Sieltä löydät avaimet käteen -sarjan CSS- ja jQuery-toiminnot-yhdistelmäpaketin, joka tekee näiden ominaisuuksien lisäämisestä uuteen projektiisi hetkessä.

Katsotaanpa kävellä sivuston läpi. Demot ja Docs-linkin alla on luettelo jQuery-vuorovaikutteisista laajennuksista, kuten vedä ja pudota, välilehdet ja siirtymät. Jokaiselle laajennukselle on esittely, dokumentaatio ja näyte leikkaa ja liitä -koodi testausta varten.

Jos haluat napauttaa avaimet käteen-tiedostoja, napsauta Teemat-linkkiä jQuery ThemeRoller -sovellukselle. Oletus-css on paljain luiden valkoinen ja harmaa teema. Voit napsauttaa latauspainiketta ja käyttää sellaisenaan, mutta aloittamiseen on myös galleria värikkäistä teemoista. Galleria-alueella on useita teeman pikkukuvia. Napsauta vain haluamaasi. Voit ladata kyseisen teeman sellaisenaan napsauttamalla Roll Your Own -välilehteä ja sitten Download teema -painiketta. Mutta hauskaa alkaa, kun aloitat twiittiä teema ThemeRoller-moottorilla. Voit mukauttaa 11 vaihtoehtoa. Useimpien asetusten avulla voit muuttaa taustan tekstuuria ja väriä, reunan väriä sekä teksti- ja kuvavärejä.

Teemalla voi twiittoida useita vaihtoehtoja.

• Fonttiasetukset: Voit muuttaa fonttiperheen, painon ja koon.
  
  
• Kulmasäde: Voit muuttaa kulmasädettä. Jokaisella teemalla on oletus pyöristetty välilehti, mutta tässä voit muuttaa nurkan koon tai asettaa sen nollaksi neliömäisen välilehden kohdalla. (Välilehdet on rakennettu CSS3: lle, jota IE ei tue tällä hetkellä.)
  
  
• Otsikko / työkalurivi: Voit asettaa väriarvot välilehteiden takana olevalle alueelle ja otsikkoalueille, kuten kalenterin laajennukselle.
  
  
• Sisältö: Täällä voit asettaa värit pääsisältöalueelle. Voit saada aivan erilaisen kuvion riippuen siitä, valitsitkö reunan vai ei.
  
  
• Napsautettavissa oleva oletustila: Tämä ohjaa välilehtien ja painikkeiden oletusarvoista (passiivista) ulkonäköä.
  
  
• Napsautettavissa oleva hover-tila: Nämä säätimet ovat välilehtien ja painikkeiden ulkonäköä hover-tilassa.
  
  
• Napsautettava aktiivinen tila: Hallitsee aktiivisen sivun välilehden ja painikkeen ulkonäköä.
  
  
• Korosta: Korostettujen alueiden tausta-, reunus-, teksti- ja kuvakevärit.
  
  
• Virhe: virheviestien tausta-, reunus-, teksti- ja kuvakevärit.
  
  
• Peittojen modaalinäyttö: Ohjaa taustan väriä ja rakennetta.
  
  
• Pudottavat varjot: Ohjaa varjojen opasiteettiä, paksuutta, siirtymää ja kulmia pudottaa varjovaikutusta.
  
  

Kun lataat jquery-ui-x.x.xx.custom.zip ja päivität paketin, näet kolme kansiota (css, kehityspaketti ja js) ja index.html-tiedoston. Index.html-tiedosto on demo laajennuksille, jotka ovat tyylilläsi. Haluat laittaa css- ja js-kansiot päähakemistoon ja kopioida / liittää koodin index.html-tiedostosta sivustosi koodiin sijaintiin, jossa haluat laajennusten näkyvän.

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

Video-Ohjeita: 06 jquerymobile arbeiten mit ThemeRoller CSS anpassen (Huhtikuu 2024).