JQuery ve CSS3 Takvim oluşturma | Web Tasarım, Kurumsal Kimlik, Logo Tasarımı, Katalog, Tuzla 
JQuery ve CSS3 Takvim oluşturma

JQuery ve CSS3 Takvim oluşturma


Bu yazıda , Futurico UI Pro'da bulabileceğiniz jQuery ve CSS3 Takvimini kodlayacağız. Bunu yapmak için tüm stil için CSS kullanacağız ve "işlevsellik" için jQuery UI kullanacağız. JQuery kullanıcı arayüzünden yalnızca "Datepicker" komut dosyasını kullanacağız . Bu nedenle, jQuery UI'da bulunan tüm bileşenleri indirmenize gerek yoktur ve dosya boyutu daha düşük olur

 

1.Adım - HTML İşaretleme

 

Takvimi oluşturmak için sadece bir kimliği olan bir div etiketi eklememiz gerekir.

 

Kodlar:

 


Kapanış etiketinden önce jQuery UI komut dosyasını eklemeliyiz. Ayrıca div'da kullandığınız aynı kimliği kullanmanız gerekir "datepicker" ı aramanız da gerekiyor . Bazı seçenekler de ekleyeceğiz: Satır içi takvimi görünür yapacak, bu nedenle bir düğmeyi veya girişi tıklamamız gerekmiyor; "Pazartesi" takvimde ilk günü yapmak için 1'e ayarlamamız gerekiyor; "Diğer ayları göster" diğer tabloların tümünü doldurmak için ay günlerini ekleyecek. 

 

Kodlar:

 

 

2.Adım - Konteyner

 

Tüm kenar boşluklarını, paletleri, kenarlıkları vb kaldırarak başlayalım.

 

Kodlar:

 

Ardından takvim konteynırını stil edeceğiz. Bir arka plan rengi, yuvarlatılmış köşeler ve gölgeler ekleyelim. Ayrıca metin yazı tipini "Tahoma" olarak ve metin boyutuyla değiştireceğiz.

 

Kodlar:

 

3. Adım - Başlık

 

Takvimin başlığını (ay ve yıl) stil için metin renklerini değiştireceğiz, bir kenarlık alt ve bazı daha temel stiller ekleyeceğiz.

 

Kodlar:

 

Yeşil daireyi eklemek için : before fiili seçici kullanacağız . Bu, "ay" öğesinin önüne içerik eklememizi sağlayacak ve ardından öğeyi stil edip konumlandıracağız.

 

Kodlar:

 

4. Adım - Önceki ve Sonraki Ay

 

Bir sonraki ve bir önceki okları stil oluşturmak için bir arka plan görüntüsü kullanacağız ve daha sonra bir öncekii soldaki ve sağdaki diğerini konumlandıracağız.

 

Kodlar:


 

 

5. Adım - Takvim Stilleri

 

Haftanın günlerini biçimlendirmek için bir üst ve alt dolgu ekleyerek rengi değiştireceğiz.

 

Kodlar:

 

Ardından renkleri değiştiren ve bazı paddings ekleyerek "gün çizgileri" stilini oluşturacağız ve her bir sayıyı şeffaf bir kenarlık ekleyeceğiz. Bu gereklidir, çünkü aktif sayıyla bir sınır ekleyeceğiz, bu saydam kenarı eklememiz gereken bir sayıyı tıkladığımızda atlamamak için.

 

Kodlar:

 

Etkin durum için metin ve kenarlık rengini yeşil olarak değiştireceğiz. Için “Diğer aylar günler” biz daha koyu bir birine rengi değişir.

 

Kodlar:

 YUKARI