jQuery UI un ThemeRoller

• Maijs 4, 2024

Ja vēlaties vieglu un ātru veidu, kā noformēt vietnes vai tīmekļa lietojumprogrammas lietotāja saskarni, kā arī iekļaut jQuery, pārbaudiet jQuery UI. Tur jūs atradīsit pabeigta CSS un jQuery funkciju kombinācijas paketi, kas liek īslaicīgi pievienot šīs funkcijas jūsu jaunajam projektam.

Dosimies pastaigā pa vietni. Zem saites Demos un Docs atradīsit jQuery interaktīvo spraudņu sarakstu, piemēram, velciet un nometiet, cilnes un pārejas. Katram spraudnim ir demonstrācija, dokumentācija un parauga izgriešanas un ielīmēšanas kods pārbaudei.

Ja vēlaties satvert pabeigta failus, noklikšķiniet uz jQuery ThemeRoller saites Motīvi. Noklusējuma css ir tukša kaula balta un pelēka tēma. Jūs varat noklikšķināt uz lejupielādes pogas un izmantot tādu, kāds tas ir, bet, lai sāktu, ir arī krāsainu motīvu galerija. Galerijas apgabalā ir vairāki motīvu sīktēli. Vienkārši noklikšķiniet uz jums patīk. Varat lejupielādēt šo motīvu tādu, kāds tas ir, noklikšķinot uz cilnes Rullē pats un pēc tam uz pogas Lejupielādēt motīvu. Bet jautrība sākas tad, kad jūs sākat tweet tēmu ar ThemeRoller motoru. Ir 11 opcijas, kuras varat pielāgot. Lielākā daļa iespēju ļaus mainīt fona faktūru un krāsu, apmales krāsu un teksta un ikonu krāsas.

Motīva tweetēšanai ir vairākas iespējas.

• Fonta iestatījumi: varat mainīt fontu saimi, svaru un lielumu.
  
  
• Stūra rādiuss: jūs varat mainīt stūra rādiusu. Katrai motīvai ir noklusējuma noapaļotas cilnes stils, bet šeit jūs varat mainīt stūra izmēru vai iestatīt uz nulli kvadrātveida cilnei. (Cilnes ir veidotas uz CSS3, kuru šobrīd IE neatbalsta.)
  
  
• Header / rīkjosla: Varat iestatīt krāsu vērtības apgabalam aiz cilnēm un galvenes laukiem, piemēram, kalendāra spraudnim.
  
  
• Saturs: šeit jūs varat iestatīt krāsas galvenajam satura laukumam. Jūs varat iegūt ļoti atšķirīgu dizainu atkarībā no jūsu izvēles robežas vai bez robežas.
  
  
• Noklikšķināms noklusējuma stāvoklis: tas kontrolē cilņu un pogu noklusējuma (neaktīvo) izskatu.
  
  
• Noklikšķināms kursora stāvoklis: Šīs vadīklas ir paredzētas cilņu un pogu parādīšanai kursorēšanas stāvoklī.
  
  
• Noklikšķināms aktīvais stāvoklis: kontrolē aktīvās lapas cilnes un pogas izskatu.
  
  
• Iezīmēšana: izcelto apgabalu fona, apmales, teksta un ikonu krāsas.
  
  
• Kļūda: kļūdas ziņojumu fona, apmales, teksta un ikonu krāsas.
  
  
• Pārklājumu modālais ekrāns: kontrolē fona krāsu un faktūru.
  
  
• Drop Shadows: kontrolē ēnas necaurredzamību, biezumu, nobīdi un stūrus, lai iegūtu ēnu nomešanu.
  
  

Lejupielādējot pakotni jquery-ui-x.x.xx.custom.zip un upzip, jūs redzēsit trīs mapes (css, izstrādes pakete un js) un failu index.html. Fails index.html ir demonstrācija spraudņiem, kas veidoti atbilstoši jūsu motīvam. Jūs vēlēsities ievietot mapes css un js savā galvenajā direktorijā un nokopēt / ielīmēt kodu no index.html faila savas vietnes kodā tajā vietā, kur vēlaties parādīties spraudņus.

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

Video Instrukcijas: 5. CSS Framework, jQuery UI Themeroller and HTML templates of Agile Toolkit tutorial (Maijs 2024).