"jQuery" yazıları

jQuery Dropdown (Açılır) Menu

Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz.

AJAX jQuery Mesaj Kutusu (Shoutbox)

Web sitemizde yer alan; ürün, haber, kitap, hikaye vb gibi verilere kullanıcıların yorum yapmaları ve düşünceleri yazmalarını sağlayan formlar oldukca popülerdir. Bu örnegimizde kullanıcı adı ve mesajını yazdığı anda sayfa yenilemesi olmadan Ajax ile mesajı veri tabanına kaydediyoruz ve mesajların yer aldığı “Son Mesajlar” bölümünde gösteriyoruz.

Jquery Form Validator

Formlarımızda yer alan bölümlerin eksiksiz ve uygunbir şekilde kullanıcı tarafından doldurulup doldurulmadığını post edildikten sonra kontrol edebileceğimiz gibi, kullanıcı formu doldururken de kontrol edebiliriz. Bu örneğimizde kullanıcı verileri girip onaylamadan önce formda boş veya yalnış bir veri varmı kontrol edeceğiz. Javascript Kodlarımız:

Ajax:CSS:HTML: İletişim Formu

Web sitelerimizde yer alan kullanıcı kayıt, login veya adres gibi formlarımızın tasarımları , efektleri, sitemiz ile uyumu, kullanış açısından rahatlığı bizimbir artımızdır. Bu örneğimizde css ve jquery ile derlenmiş bir form tasarımı örneği yapacağız. CSS Kodlarımız;

Jquery Tab Uygulaması

Web sitelerimizde bir sayfada birden çok bölümün olmasını isteyebiliriz. Bu bölümlerin nasıl ve ne şekilde sıralanacağı yani düzeni önemlidir. Jquery tab uygulaması ile birden çok bölümün istediğimiz css özelliklerine göre yerleştirilmesini ve içeriğini oluşturmayı bu örneğimizde ögreneceğiz. İlk Olarak jquery dosyamızı sayfamıza dahil ediyor.

Dropdown menu (Açılır menü) uygulaması

Web sitelerin de dropdown menuleri çok sıklıkla kullanabiliyoruz. Bu örneğimizde css ler uyguladığımız ve mause üzerine geldiginde kendiliginden açılan br menu oluşturmayı ögreneceğiz. Sayfamızda dropdown menu’nun açılır ve kapanır olmasını sağlayan kodu inceleyelim. <script> $(document).ready(function(){ $(".dropdownmenu").mouseenter(function () { $("#menu").slideToggle(); }); $(".dropdownmenu").mouseleave(function () { $("#menu").slideToggle(); }); }); </script> Yukarıdaki kodlarda :

Ajax Sayfalama (Paging)

Web sitelerimizdeki verileri; örneğin arama sonuçlarında, kategorideki verilerde veya yorumlar bölümlerinde sayfalama sistemleri bullanmamız gerekmektedir. Gün geçtikçe bölümlerdeki veri oranları arttıkça sayfaların açılması uzun olabileceği gibi estetik olmayan görüntülerede sebep olabilir. Bu örneğimizde ajax ile sayfalama sistemi yapıyoruz. Sistemimizde  yer  alan 24 adet veriyi 5 ‘erli olarak sayfalayacağı. Ajax ile yapamnın en büyük avantajı sayfa read more »

Jquery: kLabel Fonksiyonu

Web siteleri kodlarken Html kodlama aşamasında form alanlarında kullanılabilirliği artırmak için label etiketlerini kullanırız; bu etiket belirlenen form nesnesiyle alakalı metin’e tıklandığında ilgili form nesnesine odaklanmayı(focus) sağlar. Bildiğiniz üzere bir label’e tıklandığında hangi form nesnesine odaklanacağını belirlemek için label etiketine “for” değeri veririz. [php] <label for=’odaklanacak_nesne’>Nesne Tanımı</label><input id=’odaklanacak_nesne’ name=’nesne_adi’/> [/php] örnek bir kullanım. Arayüz kodlarken read more »

Jquery Username Control

Web sitelerine kayıt olurken;  username girişi sırasında anında kontrol edilmesini, veri tabanında eşleşen bir username olup olmadığını kontrol etmek isteyebiliriz. Bu örneğimizde, username, rumuz, eposta gibi bilgilerin sistemlere kayıt olurken kontrol ve uyarılarını öğreneceğiz. Örneğimizde username tablosundaki rumuz eşleşmesi olup olmadığını kontrol edeceğiz.