jQuery Kullanıcı Arayüzü ve ThemeRoller

• Nisan 28, 2024

Bir web sitesi veya web uygulaması için kullanıcı arabirimi tasarlamanın kolay ve hızlı bir yolunu istiyorsanız ve ayrıca jQuery'yi de içeriyorsa, jQuery kullanıcı arayüzüne bakın. Burada, bu özellikleri yeni projenize eklemeyi kolaylaştıran anahtar teslim bir CSS ve jQuery fonksiyonları birleşik paketi bulacaksınız.

Sitede yürüyelim. Demo ve Dokümanlar bağlantısının altında, sürükle bırak, sekmeler ve geçişler gibi jQuery etkileşimli eklentilerinin bir listesini bulacaksınız. Her eklenti için test için bir demo, dokümantasyon ve örnek kes ve yapıştır kodu vardır.

Anahtar teslim dosyaları almak istiyorsanız, jQuery ThemeRoller için Temalar bağlantısını tıklayın. Varsayılan css çıplak kemikler beyaz ve gri temadır. İndirme düğmesini tıklayıp olduğu gibi kullanabilirsiniz, ancak başlamak için renkli temalardan oluşan bir Galeri de vardır. Galeri alanında birkaç tema küçük resmi vardır. İstediğinize tıklayın. Kendi Temanızı Döndür sekmesini ve ardından Temayı İndir düğmesini tıklayarak bu temayı olduğu gibi indirebilirsiniz. Ancak tema, ThemeRoller motoruyla temayı tweetlemeye başladığınızda başlar. Özelleştirebileceğiniz 11 seçenek vardır. Çoğu seçenek, arka plan dokusunu ve rengini, kenarlık rengini ve metin ve simge renklerini değiştirmenize olanak tanır.

Temayı tweetlemek için birkaç seçeneğiniz var.

• Yazı Tipi Ayarları: Yazı tipi ailesini, ağırlığını ve boyutunu değiştirebilirsiniz.
  
  
• Köşe Yarıçapı: Köşe yarıçapını değiştirebilirsiniz. Her temanın varsayılan yuvarlak sekme stili vardır, ancak burada köşenin boyutunu değiştirebilir veya kare sekme için sıfıra ayarlayabilirsiniz. (Sekmeler şu anda IE tarafından desteklenmeyen CSS3 üzerine kurulmuştur.)
  
  
• Üstbilgi / Araç Çubuğu: Sekmelerin arkasındaki alan ve takvim eklentisi gibi üstbilgi alanları için renk değerlerini ayarlayabilirsiniz.
  
  
• İçerik: Burada ana içerik alanının renklerini ayarlayabilirsiniz. Sınır seçiminize bağlı olarak veya sınırsız çok farklı bir tasarım elde edebilirsiniz.
  
  
• Tıklanabilir Varsayılan Durum: Bu, sekmelerin ve düğmelerin varsayılan (etkin olmayan) görünümünü kontrol eder.
  
  
• Tıklanabilir Fareyle Üzerine Gelme Durumu: Bu kontroller, fareyle üzerine gelindiğinde sekmelerin ve düğmelerin görünümü içindir.
  
  
• Tıklanabilir Etkin Durum: Etkin sayfa için sekmenin ve düğmenin görünümünü kontrol eder.
  
  
• Vurgulama: Vurgulanan alanlar için arka plan, kenarlık, metin ve simge renkleri.
  
  
• Hata: Hata mesajları için arka plan, kenarlık, metin ve simge renkleri.
  
  
• Kaplamalar için Kalıcı Ekran: Arka plan rengini ve dokusunu kontrol eder.
  
  
• Alt Gölgeler: Alt gölge efekti için gölge opaklığını, kalınlığını, ofsetini ve köşelerini kontrol eder.
  
  

Jquery-ui-x.x.xx.custom.zip dosyasını indirip paketi yukarı çıkardığınızda, üç klasör (css, development-bundle ve js) ve bir index.html dosyası göreceksiniz. İndex.html dosyası, temanızla stilize edilmiş eklentiler için bir demodur. Css ve js klasörlerini ana dizininize koymak ve index.html dosyasındaki kodu, eklentilerin görünmesini istediğiniz konumdaki sitenizin koduna kopyalayıp yapıştırmak isteyeceksiniz.

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

Video Talimatları: Theming Theme Roller Customizations in JQuery UI (Nisan 2024).