JQuery Örnekleri – Web Tasarım & Programlama
Etiket JQuery Örnekleri
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.
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.
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.
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.
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.
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...
C# Metotlar ve Metot Örnekleri için abuzer