JQuery Örnekleri – Web Tasarım & Programlama

Etiket JQuery Örnekleri

Jquery Web Tasarım

jQuery option Kullanarak Renk Değiştirme Örneği

Bu yazımızda <option> öğesini kullanarak sayfamıza eklemiş olduğumuz paragrafın css özelliğini (yazı rengi) değiştireceğiz. Açılır kutumuza eklediğimiz renklerden seçili olan renge göre paragraf içindeki yazı renginin değişmesini sağlayacağız. Sayfaya ait kodlar ve ekran çıktısı aşağıdaki gibi olacaktır.

Jquery Web Tasarım

jQuery checkbox Kullanarak Resim Gizleme

Bu yazımızda jQuery ile checkbox kullanımını gösteren basit bir örnek gerçekleştireceğiz. Örneğimizde sayfamıza eklenen resmin checkbox seçili iken sayfamızda görüntülenmesini, seçili değil iken ise gizlenmesini sağlayacağız. Gizleme ve görüntüleme işlemini slideUp ve slideDown metotlarını kullanarak animasyonlu bir şekilde oluşturacağız. Kodarımızı checkbox kontrolünün change olayını kullanarak yazacağız.

Jquery Web Tasarım

JQuery ile Karakter Sayma

Bu örneğimizde jQuery ile sayfamızda bulunan textarea kontrolüne girilen karakter sayısını anlık olarak ekreanda göstereceğiz. Bu işlemi yaparken keyup olayından faydalanacağız. Her tuşa bastığımızda metnimizdeki karakter sayısını length metodu ile bularak ekranda gösterilmesini sağlayacağız. 

Jquery Web Tasarım

JQuery slideUp(), slideDown() Kullanımı

Bu örneğimizde JQuery ile slideUp ve slideDown kullanarak bir div öğesinin animasyonlu olarak önce kapanıp sonra açılmasını yani gizlenip gösterilmesini sağlayacağız. Yani bu iki fonksiyonu birlikte aynı anda kullanacağız. Daha önceki örneklerimizde kullanmış olduğumuz hide() ve show() fonksiyonlarından farklı olarak slideUp ve slideDown belirlediğimiz süre içerisinde gizleme ve gösterme  işlemini gerçekleştirecek. 

Jquery Web Tasarım

JQuery ile Paragraf Gizleme – Gösterme Örneği

Bu yazımızda JQuery ile Html elementlerine nasıl erişilebileceğini gösteren basit bir örnek oluşturacağız. Örneğimizde sayfamıza 2 adet button ve bir paragraf ekleyeceğiz. Butonlardan biri tıklandığında paragrafı gizleyecek, diğeri de tekrar görüntülenmesini sağlayacak. Örneğimize geçmeden önce JQuery‘ de kod yapısını inceleyelim.

Javascript Jquery

JQuery UI DatePicker Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak DatePicker yapacağız. İlk olarak JQuery’nin sayfasından jquery ve ui dosyalarını indirerek çalışma dosyamıza bağlıyoruz. Ağaç yapısı şu şekilde olacaktır;

Javascript Jquery

JQuery Owl Carousel Slider Eklentisi

Bu örneğimizde JQuery’nin Owl Carousel eklentisini kullanarak slider oluştaracağız. Owl Carousel’in sayfasından dosyalarını indiriyoruz. Çalıştığımız klasörün içerisine kullanacağımız dosyaları ekliyoruz. Ağaç yapısı şu şekilde olacaktır; HTML: Çalışma sayfamıza JQuery ve Owl Carousel’in dosyalarını entegre ediyoruz. Kendi JavaScirpt dosyamızı en son bağlamaya dikkat ediyoruz.

Javascript Jquery

JQuery UI Dialog Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak butona basıldığında açılan dialog kutusu yapacağız. İlk olarak JQuery’nin sitesinden JQuery dosyasını ve UI eklentisini indiriyoruz ve index sayfamıza bağlıyoruz. Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz. Body etiketlerinin arasına da ilk olarak JQuery dosyasını daha sonra JQuery-ui dosyasının yolunu yazarak çalışma dosyamıza ekliyoruz. Varsa kendi JavaScript dosyamızı en sona ekliyoruz <link...

Javascript Jquery

JQuery Accordion Panel

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Accordion Panel yapacağız. İlk olarak JQuery’nin sayfasından, JQuery ve JQuery-Ui eklenti dosyalarını indiriyoruz.  ui.css ve theme.css dosyalarını çalışma klasörünün içerisindeki eklenti klasörünün içerisine kopyalıyoruz. Dosyaların ağaç yapısı şu şekilde olacaktır; Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz.

Javascript Jquery

JQuery Vize Final Notu Ortalaması Hesaplama

Bu örneğimizde JQuery ile Vize ve Final Notu Girilen bir öğrenciye ait Ortalama hesaplayarak ve Ortalaması ve Final notuna göre öğrencinin geçme ve kalma durumunu göstereceğiz. Örneğimizde Jquery ile CSS özelliklerini değiştirme, fadeIn ve fadeOut kullanımlarını da inceleyebilirsiniz.  Örneğimizde Vize notunun  %40 ile Final Notunun %60 ı toplamı Ortalamayı verecektir. Ortalamanın 50 den düşük olması durumunda veya Final notunun 50 den düşük olması durumunda öğrenci başarısız sayılacaktır. Bu...