JQuery UI Datepicker'ı Özelleştirme ve Temalama

JQuery UI sadece harika ve kullanım kolaylığı nedeniyle, popüler ve interaktif özelliklere ihtiyaç duyan hemen hemen her web sitesinde yaygın olarak kullanılmaktadır.

Ve bu yazıda, sunulan özelliklerden birine, Datepicker widget'ına bakacağız..

Takvim temasını nasıl özelleştireceğinizi öğrenmeye çalışacağız, böylece genel tasarımınıza uygun kendi temanızı oluşturabilirsiniz. Ancak, bu öğreticiyi izlemeden önce JavaScript konusunda biraz bilgi sahibi olmanız ve CSS ile ilgili bilgi sahibi olmanız gerekir..

• gösteri
• Kaynak İndir

Hazırsan, başlayalım..

Varlıklar

Takvim için bazı temel varlıkları hazırlayalım..

İlk olarak, takvim tasarımı Premium Piksel'den gelen bu PSD dosyasına atıfta bulunacaktır. Bu yüzden önce ihtiyacımız olan renklerin bir örneğini almamıza yardımcı olması için indirmeliyiz. Ardından, iki modeli indirin ince desenler takvimimizin arka planı olarak kullanacağımızı Bu örnekte, aşağıdaki desenleri kullanmaya karar verdik: siyah kot ve koyu deri.

JQuery UI tarafından oluşturulan element sınıflarını / kimliklerini incelemek için Firebug gibi bir web geliştirme aracına da ihtiyacımız olacak.

Bence yeterince hazırlık yaptık. Şimdi ilk adıma geçelim.

Adım 1: jQuery UI Datepicker

İlk önce, jQuery UI indirme sayfasına gidin. Bu sayfada aşağıdaki gibi birkaç seçenek sunulacak; UI Core, Widget'lar, Etkileşimler ve Etkileri.

Yapmalıyız tüm bileşenlerin seçimini kaldırın, hepsine ihtiyacımız olmadığı için.

Sonra, içinde widget'lar bölüm sadece tarih bilgisini seçin. JQuery UI, temel bağımlılıkları otomatik olarak seçecek ve ardından indir dosya.

İndirilen tüm dosyaları bağlayın - CSS hariç - HTML boş belgenize şöyle:

Adım 2: Veri Kaydediciyi Özelleştirme

Bu adımda, bir veri tarayıcıyı aşağıdaki seçeneklerle yapılandırırız.

Yukarıdaki kod jQuery’e takvimi bir öğe üzerinde göstermesini söyleyecektir. datepicker İD. Yani, aşağıdaki koymak gerekir div ile - datepicker kimliği - ile takvimi oluşturmak üzere gövde bölümünde:

Şimdi, takvim, önceden oluşturulmuş ve bu şekilde görünmeli, herhangi bir stil içermeyen düz ancak yine de işlevselliğe sahip olmalıydı..

Adım 3: Stiller

Şimdi takvimi tasarlamaya başlayalım. Her zamanki gibi tüm unsurları normalleştirerek ve yeni bir stil sayfası oluşturarak başlayacağız, bu örnekte datepicker.css. Ardından hepsini HTML belgesine bağlayın.

Ardından, ilk önce gövdeye bir arka plan ekleyeceğiz, böylece HTML'miz çok düz görünmüyor.

body background: url ('… /img/darkdenim3.png') tekrar 0 0 # 555; 

Ardından, veri tutucunun genişliğini belirleyeceğiz, merkeze yerleştireceğiz ve takvime belirgin bir etki vermek için gölge ekleyeceğiz.

.ui-datepicker genişlik: 216 piksel; yükseklik: otomatik; marj: 5 piksel otomatik 0; font: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, 5); kutu-gölge: 0px 0px 10px 0px rgba (0, 0, 0, 5); 

Ayrıca, her alt etiket etiketindeki varsayılan alt çizgi dekorasyonunu kaldıracağız..

.ui-datepicker bir text-decoration: none; 

JQuery UI’deki takvim bir tablo. Öyleyse ekleyelim 100% genişliği tablo, bu yüzden yukarıdaki sarmalayıcı ile aynı maksimum genişliğe sahip olacaktır; yani 216px

.ui datepicker tablosu genişlik:% 100; 

Başlık Bölümünü Şekillendirme

Datepicker içeren bir başlık bölümü vardır Ay yıl Takvimin Bu bölüm daha önce indirmiş olduğumuz koyu deri dokusuna sahip olup, hafif beyaz yazı tipi ve 1px üstündeki beyaz gölge.

.ui-datepicker-header background: url ('… /img/dark_leather.png') tekrar 0 0 # 000; renk: # e0e0e0; yazı tipi ağırlığı: kalın; -webkit-box-shadow: iç içe 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: iç içe 0px 1px 1px 0px rgba (250, 250, 250, .2); kutu-gölge: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); metin-gölge: 1 piksel -1 piksel 0 piksel # 000; filtre: damla gölgesi (renk = # 000, offx = 1, offy = -1); hat yüksekliği: 30px; kenarlık genişliği: 1px 0 0 0; sınır tarzı: katı; kenarlık rengi: # 111; 

Şimdi, hadi ortalayalım Ay pozisyon.

 .ui-datepicker-title text-align: center; 

Değiştirin Sonraki ve Önceki PSD dilimlenmiş sprite ok görüntüleri ile metin.

.ui-datepicker-önceki, .ui-datepicker-sonraki görüntüleme: satır içi blok; genişlik: 30px; yükseklik: 30px; metin hizalama: orta; imleç: işaretçi; background-image: url ('… /img/arrow.png'); arka plan tekrarı: no-tekrarı; çizgi yüksekliği:% 600; taşma: gizli; 

Ardından, sırasıyla ok konumunu ayarlayın.

.ui-datepicker-prev float: sol; arka plan konumu: merkez -30 piksel;  .ui-datepicker-sonraki float: sağ; arka plan konumu: merkez 0 piksel; 

İken gün isimleri bölüm bir thead, tasarım referansımıza göre, biraz beyaz degrade olacaktır. Ve görevimizi kolaylaştırmak için bu aracı degrade kodunu oluşturmak için kullanacağız:

.ui datepicker thead background-color: # f7f7f7; background-image: -moz-linear-gradyan (üst, # f7f7f7% 0, # f1f1f1% 100); background-image: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 0, # f7f7f7), renk durdurma (% 100, # f1f1f1)); background-image: -webkit-linear-gradyan (üst, # f7f7f7% 0, # f1f1f1% 100); background-image: -o-linear-gradyan (üst, # f7f7f7% 0, # f1f1f1% 100); background-image: -ms-linear-gradyan (üst, # f7f7f7% 0, # f1f1f1% 100); arka plan görüntüsü: doğrusal gradyan (üst, # f7f7f7% 0, # f1f1f1% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); sınır-alt: 1 piksel katı #bbb; 

gün isimleri metin koyu gri rengine sahip olacak # 666666 ve ayrıca ince beyaz olacaklar Metin gölgesi bastırılmış efekti vermek.

.ui datepicker th text-transform: büyük harf; yazı tipi boyutu: 6pt; dolgu maddesi: 5px 0; renk: # 666666; text-shadow: 1px 0px 0px #fff; filtre: dropshadow (renk = # fff, offx = 1, offy = 0); 

Bu noktada, takvim şöyle görünecektir:

Tarihleri ​​Şekillendirmek

Takvim tarihleri ​​içinde td veya tablo verisi. Böylece dolguyu ayarlayacağız 0 arasındaki boşlukları kaldırmak için td ve 1px sağ sınır verin.

.ui-datepicker tbody td padding: 0; sınır-sağ: 1 piksel katı #bbb; 

Son hariç td, Bu sınır hakkı olmayacak. Bunun için doğru sınırı 0 olarak ayarladık..

.ui-datepicker tbody td: son çocuk border-right: 0px; 

Tablo satırı neredeyse aynı olacaktır. Son satır hariç 1px kenarlıklı olacaktır..

.ui-datepicker tbody tr sınır-alt: 1px katı #bbb;  .ui-datepicker tbody tr: son çocuk kenarlık: 0px; 

Varsayılan, Vurgulu ve Aktif Durumu Düzenleme

Bu adımda vurgulu ve etkin stilleri tanımlayacağız. İlk önce boyutu belirleyerek tarih varsayılan durumunu tanımlayacağız; Tarih metni konumunu ortalayın, degrade rengi ve beyaz iç gölgeyi ekleyin.

.ui-datepicker td açıklığı, .ui-datepicker td a ekran: inline-block; yazı tipi ağırlığı: kalın; metin hizalama: orta; genişlik: 30px; yükseklik: 30px; hat yüksekliği: 30px; renk: # 666666; text-shadow: 1px 1px 0px #fff; filtre: dropshadow (renk = # fff, offx = 1, offy = 1);  .ui-datepicker-takvim .ui-durum-varsayılan background: #ededed; arkaplan: -moz-linear-gradyan (üst, # 0edededed, #dedede 100%); arkaplan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (% 0, # kenarlı), renk durdurma (% 100, # dedede)); arka plan: -webkit-linear-gradient (üst, #% 0'lı #ed, #% 100'lü); arkaplan: -o-lineer-gradyan (üst, # 0edededed, #% 100 verede #); arka plan: -ms-linear-gradyan (üst, # 0ededed, #% 100 verede); arkaplan: linear-gradyan (üst, #ededed 0%, # dedede 100%); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: gömülü 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: gömülü 1px 1px 0px 0px rgba (250, 250, 250, .5); kutu-gölge: gömülü 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-seçilemez .ui-durum-varsayılan background: # f4f4f4; renk: # b4b3b3; 

Tarihin üzerine geldiğinizde, biraz beyaz olur.

 .UI-Tarih-takvim-takvim .ui-devlet-gezinip background: # f7f7f7; 

Tarih etkin bir durumda olduğunda, aşağıdaki stillere sahip olacaktır..

 .ui-datepicker-takvim .ui durum-aktif arkaplan: # 6eafbf; -webkit-box-shadow: iç içe 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: iç içe 0px 0px 10px 0px rgba (0, 0, 0, 0,1); kutu-gölge: inset 0px 0px 10px 0px rgba (0, 0, 0, 1); renk: # e0e0e0; metin-gölge: 0px 1px 0px # 4d7a85; filtre: dropshadow (renk = # 4d7a85, offx = 0, offy = 1); sınır: 1px katı # 55838f; pozisyon: göreceli; marj: -1 piksel; 

Şimdi, takvim çok daha iyi görünmeli.

Konumun Sabitlenmesi

Bu noktada, tarihe dikkatlice bakın. İlk veya son sütundaki tarihe tıkladığınızda, etkin durumun takvim kenarından bir piksel taşması olduğunu fark edeceksiniz..

İşte burada, bazı küçük düzeltmeler yapacağız..

İlk önce tarih genişliğini azaltacağız. 29px, ve son sütunun sağ kenar boşluğunu ve ilk sütunun sol kenar boşluğunu 0 tersine çevirmek -1px Daha önce aktif durum için belirlediğimiz marj.

.ui-datepicker-takvim td: ilk çocuk .ui-durum-aktif genişlik: 29px; sol kenar boşluğu: 0;  .ui-datepicker-takvim td: son çocuk .ui-state-active genişlik: 29px; kenar boşluğu: 0;  

Takvimin son satırındaki tarih de benzer bir işleme sahip olacaktır..

.ui-datepicker-takvimi tr: son çocuk .ui-state-active boy: 29px; marj-alt: 0; 

Şimdi sonucu görelim. Takvim şimdi güzel gözüküyor ve tasarım referansımıza mükemmel bir şekilde uyuyor. Ayrıca, demosunu görebilir ve kodu resmin altındaki bağlantılardan incelemek için kaynağı indirebilirsiniz..

• gösteri
• Kaynak İndir

Bonus: Takvimi uzat

Bugün, jQuery UI Datepicker için nasıl özel bir tema oluşturulacağı konusunda çok şey öğrendik. Fakat burada durmamalısınız, çünkü bu tarihçeden genişletilebilecek birçok şey var. JQuery'nize ve CSS yeterliliğinize bağlı olarak, takvimi böyle olacak şekilde genişletin - bindirme daticker ile metin girişi.

• gösteri
• Kaynak İndir

Daha fazla okuma

JQuery UI hakkında daha fazla okumak için. Belgelerin tamamını buradan okuyabilirsiniz:

• JQuery UI ile Başlarken
• Tema jquery kullanıcı Arabirimi
• jQuery UI: Tema API sınıfları

Son düşünceler

Bu dersi okuyup takip ettiğiniz için teşekkür ederim, umarım faydalı bulursunuz. Ayrıca, herhangi bir geri bildiriminiz varsa veya bu eğiticide eksik olabilecek şeyler eklemek istiyorsanız, aşağıdaki yorum bölümünde belirtmekten çekinmeyin. Tekrar teşekkürler).