jQuery UI a ThemeRoller

• Smieť 17, 2024

Ak chcete jednoduchý a rýchly spôsob navrhnutia používateľského rozhrania pre webovú stránku alebo webovú aplikáciu a zahrnúť aj jQuery, pozrite sa na používateľské rozhranie jQuery. Nájdete tu kombinovaný balík funkcií CSS a jQuery na kľúč, vďaka ktorému je pridanie týchto funkcií do nového projektu hračkou.

Poďme sa prejsť webom. Pod odkazom Ukážky a dokumenty nájdete zoznam interaktívnych doplnkov jQuery, ako sú drag and drop, karty a prechody. Pre každý doplnok je k dispozícii ukážka, dokumentácia a ukážka kódu na vystrihnutie a prilepenie na testovanie.

Ak chcete uchopiť súbory na kľúč, kliknite na odkaz Témy pre jQuery ThemeRoller. Predvolená hodnota css je motív holých kostí v bielej a šedej kosti. Môžete kliknúť na tlačidlo sťahovania a používať ho, ako je, ale existuje aj Galéria farebných tém, ktoré vám pomôžu začať. V oblasti Galéria je niekoľko miniatúr tém. Stačí kliknúť na ten, ktorý sa vám páči. Túto tému môžete prevziať tak, ako je, kliknutím na kartu Roll Your Own a potom na tlačidlo Download Theme. Zábava sa však začína, keď začnete tweetovať tému pomocou motora ThemeRoller. Existuje 11 možností, ktoré môžete prispôsobiť. Väčšina možností vám umožní zmeniť textúru a farbu pozadia, farbu orámovania a farby textu a ikon.

Existuje niekoľko možností zdvojenia témy.

• Nastavenia písma: Môžete zmeniť rodinu, hmotnosť a veľkosť písma.
  
  
• Polomer rohu: Môžete zmeniť polomer rohu. Každá téma má predvolený štýl zaoblenej karty, tu však môžete zmeniť veľkosť rohu alebo nastaviť štvorčekovú kartu na nulu. (Karty sú postavené na CSS3, ktorý IE momentálne nepodporuje.)
  
  
• Záhlavie / Panel s nástrojmi: Môžete nastaviť hodnoty farieb pre oblasť za kartami a oblasti záhlaví, napríklad pre doplnok kalendára.
  
  
• Obsah: Tu môžete nastaviť farby hlavnej oblasti obsahu. Môžete si zvoliť veľmi odlišný dizajn v závislosti od výberu hranice alebo bez hranice.
  
  
• Predvoliteľný stav, na ktorý sa dá kliknúť: Toto riadi predvolený (neaktívny) vzhľad kariet a tlačidiel.
  
  
• Kliknuteľný stav umiestnenia kurzora: Tieto ovládacie prvky slúžia na vzhľad kariet a tlačidiel v stave umiestnenia kurzora myši.
  
  
• Klikateľný aktívny stav: Ovláda vzhľad karty a tlačidla pre aktívnu stránku.
  
  
• Zvýraznenie: farby pozadia, orámovania, textu a ikony pre zvýraznené oblasti.
  
  
• Chyba: Farby pozadia, orámovania, textu a ikon pre chybové správy.
  
  
• Modálna obrazovka pre prekrytia: Ovláda farbu pozadia a textúru.
  
  
• Drop Shadows: Ovládacie prvky pre krytie tieňov, hrúbku, ofset a rohy pre efekt tieňov.
  
  

Keď stiahnete balík jquery-ui-x.x.xx.custom.zip a upzip, uvidíte tri priečinky (css, vývojový balík a js) a súbor index.html. Súbor index.html je ukážkou doplnkov vytvorených podľa témy. Budete chcieť umiestniť priečinky css a js do svojho hlavného adresára a skopírovať / prilepiť kód zo súboru index.html do kódu pre svoju lokalitu v mieste, kde sa majú zobraziť doplnky.

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

Video Návody: Theming Theme Roller Customizations in JQuery UI (Smieť 2024).