jQuery UI și ThemeRoller

• Mai 4, 2024

Dacă doriți o modalitate ușoară și rapidă de a proiecta interfața de utilizator pentru un site web sau o aplicație web și include, de asemenea, jQuery, consultați jQuery UI. Acolo veți găsi un pachet combo de funcții CSS și jQuery, la cheie, care face ca adăugarea acestor funcții la noul dvs. proiect să fie simplificată.

Haideți să facem o plimbare prin site. Sub linkul Demo și documente veți găsi o listă a pluginurilor interactive jQuery, cum ar fi drag and drop, file și tranziții. Pentru fiecare plugin există o demonstrație, documentație și eșantion cod de tăiere și lipire pentru testare.

Dacă doriți să apucați fișierele la cheie, faceți clic pe linkul Teme pentru jQuery ThemeRoller. Css implicit este o temă albă și gri cu oase goale. Puteți face clic pe butonul de descărcare și utiliza așa cum este, dar există, de asemenea, o galerie de teme colorate pentru a vă începe. În zona Galerie există mai multe miniaturi tematice. Doar faceți clic pe cea care vă place. Puteți descărca acea temă, făcând clic pe fila Rulează-ți propriul, apoi pe butonul Descărcare temă. Dar distracția începe când începi să tuitezi tema cu motorul ThemeRoller. Există 11 opțiuni pe care le puteți personaliza. Majoritatea opțiunilor vă vor permite să schimbați textura și culoarea de fundal, culoarea de chenar și textul și culorile pictogramelor.

Aveți mai multe opțiuni pentru a twitte tema.

• Setări font: puteți modifica familia, greutatea și dimensiunea fontului.
  
  
• Radius colț: puteți schimba raza colțului. Fiecare temă are un stil de tab-uri rotunjite implicit, dar aici puteți modifica dimensiunea colțului sau o puteți seta la zero pentru o filă pătrată. (Filele sunt construite pe CSS3, care nu este acceptat de IE în acest moment.)
  
  
• Antet / Bara de instrumente: Puteți seta valorile de culoare pentru zona din spatele filei și pentru zonele de antet, cum ar fi pluginul calendarului.
  
  
• Conținut: Aici puteți seta culorile pentru zona principală de conținut. Puteți obține un design foarte diferit, în funcție de alegerea dvs. de graniță sau fără graniță.
  
  
• Faceți clic pe starea implicită: Aceasta controlează aspectul implicit (inactiv) al filei și butoanelor.
  
  
• State Hover clickable: Aceste controale sunt pentru apariția filelor și butoanelor în starea de trecere.
  
  
• Stare activă pe care se poate face clic: Controlează aspectul filei și butonului pentru pagina activă.
  
  
• Evidențiați: culorile de fundal, chenar, text și pictogramă pentru zonele evidențiate.
  
  
• Eroare: Culori de fundal, chenar, text și pictogramă pentru mesajele de eroare.
  
  
• Ecran modal pentru suprapuneri: controlează culoarea și textura fundalului.
  
  
• Shadows Drop: Controale pentru opacitatea umbrei, grosimea, decalarea și colțurile pentru un efect de umbră în picătură.
  
  

Când descărcați jquery-ui-x.x.xx.custom.zip și actualizați pachetul, veți vedea trei foldere (css, develop-bundle și js) și un fișier index.html. Fișierul index.html este o demonstrație pentru pluginurile stilate cu tema dvs. Veți dori să introduceți folderele css și js în directorul principal și să copiați / lipiți codul din fișierul index.html în codul pentru site-ul dvs., în locația în care doriți să apară pluginurile.

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

Instrucțiuni Video,: jQuery Ro Lectia 27 Tutorial- Despre "Themeroller" (Mai 2024).