jQuery korisničko sučelje i ThemeRoller

• Travanj 26, 2024

Ako želite jednostavan i brz način dizajniranja korisničkog sučelja za web stranicu ili web aplikaciju, a također uključuju jQuery, pogledajte korisničko sučelje jQuery. Tamo ćete pronaći kombinirani paket CSS i jQuery funkcija "ključ u ruke", čime dodavanje ovih značajki vašem novom projektu postaje kratko.

Prošetajmo se gradićem. Ispod veze Demos i Dokumenti naći ćete popis interaktivnih dodataka jQuery poput povlačenja i ispadanja, kartica i prijelaza. Za svaki dodatak postoji demo, dokumentacija i uzorak cut-and paste koda za testiranje.

Ako želite preuzeti datoteke ključ u ruke, kliknite vezu Teme za jQuery ThemeRoller. Zadani css je bijela i siva tema golih kostiju. Možete kliknuti gumb za preuzimanje i upotrijebiti ga kako jest, ali tu je i Galerija šarenih tema za početak. U području Galerije nalazi se nekoliko sličica tema. Samo kliknite na onaj koji vam se sviđa. Možete preuzeti tu temu klikom na karticu Roll Your Own i zatim gumb Download Theme. Ali zabava počinje kada počnete tvitnuti temu s ThemeRoller motorom. Postoji 11 opcija koje možete prilagoditi. Većina opcija će vam omogućiti da promijenite teksturu i boju pozadine, boju obruba i boje teksta i ikona.

Imate nekoliko opcija za tweetanje teme.

• Postavke fonta: Možete promijeniti obitelj, težinu i veličinu fonta.
  
  
• Kutni radijus: Možete promijeniti polumjer ugla. Svaka tema ima zadani zaobljeni stil tablice, ali ovdje možete promijeniti veličinu kuta ili ga postaviti na nulu za kvadratnu karticu. (Kartice su izgrađene na CSS3, koji trenutno ne podržava IE.)
  
  
• Zaglavlje / Alatna traka: Možete postaviti vrijednosti boje za područje iza kartica i područja zaglavlja, kao što je dodatak za kalendar.
  
  
• Sadržaj: Ovdje možete postaviti boje za područje glavnog sadržaja. Možete dobiti vrlo različit dizajn, ovisno o vašem izboru obruba ili bez granica.
  
  
• Zadano stanje koje se može kliknuti: ovo kontrolira zadani (neaktivni) izgled kartica i gumba.
  
  
• Stanje lebdećeg miša koje se može kliknuti: Ove kontrole služe za izgled kartica i gumba u stanju lebdenja.
  
  
• Aktivno stanje koje se može kliknuti: kontrolira izgled kartice i gumba za aktivnu stranicu.
  
  
• Označi: boje pozadine, obruba, teksta i ikona za istaknuta područja.
  
  
• Pogreška: boje pozadine, obruba, teksta i ikona za poruke o pogrešci.
  
  
• Modalni ekran za slojeve: kontrolira boju i teksturu pozadine.
  
  
• Drop Shadows: Kontrolira neprozirnost sjene, debljinu, pomak i uglove radi efekta sjena.
  
  

Kada preuzmete jquery-ui-x.x.xx.custom.zip i nadogradite paket, vidjet ćete tri mape (css, razvojni paket i js) i datoteku index.html. Datoteka index.html predstavlja demonstraciju dodataka koji su oblikovani prema vašoj temi. Morat ćete staviti css i js mape u vaš glavni direktorij i kopirati / zalijepiti kôd iz datoteke index.html u kôd za svoju web lokaciju na mjestu gdje želite da se dodaci prikažu.

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

Upute Video: Week 9, continued (Travanj 2024).