jQuery | Form Post

Özellikle sayfalarda kullanıcı yorumları veya mesajlarını iletebilmek için kullanılan formlar , jQuery kullanarak pratik bir şekilde Ajax ile çalıştırılabilmektedir.
Şimdi aşağıdaki kısa kod blogunu inceleyelim;

jQuery | SLIDE DOWN BOX MENU WITH JQUERY AND CSS3

Demosu İçin Tıkla
İndirmek İçin Tıkla

jQuery | 40 Tane Ücretsiz Mouseover Efekti

CSS3 & jQuery Fading Magnifying Effect

jQuery | Kolay (Eklentisiz) Akordion Menü

avascript çatılarının hayatımızı oldukça kolaylaştırdığını inkar edemeyiz, normalde yapmak için çok uğraşacağınız bir efekti, bu hazır kütüphaneler ile tek satır kod yazarak yapabiliyorsunuz.
Akordion menü yapmak istediğinizde de aynı kolaylığı elde etmek istersiniz, en az satir kod ile en fazla işi yapmak istersiniz. Jquery ile hiç bir eklenti kurmadan böyle bir menü yapmak mümkün.

CSS Transparan Resimler İle Jquery Kullanarak Bağlantı Verme

CSS ile resimlerin transparanlığını ayarlamak hiç de zor değildir. Ancak yazdığımız kodun bütün tarayıcılar tarafından aynı şekilde yorumlandığından emin olmalıyız. Bunu yapmak da zor değildir.

Bu yazıda CSS ile resim transparanlığını ayarlamanın ne kadar kolay olduğunu anlatmaya çalışacağız. Aynı zamanda bu özelliği (ve jquery’i) kullanarak yapılabilecek bağlantılara bir örnek vereceğiz.

Jquery Ve Ajax İle Sayfa Yüklemek

Ajax işlemlerinde en çok kullanılan metodlardan biri de sayfalar arası geçişleri ajax ile yapmaktır. Bu bize pek çok kolaylık sağlar. Her sayfanın kodunu baştan yazmak yerine, sadece ilgili yerlerin kodunu yazarız, ve küçük birimler halinde yükleriz.

HTML Şablonu

İlk önce HTML dokümanımızın şablonunu tanımlayalım.

Anasayfa
 Hakkında
 İletişim

Linkler bölümünde yer alan bağlantılar, ajax isteğinin bağlantıları. Bu linklere tıklanınca ajax isteğini başlatacağız ve ajax ile gelen cevabı id=”sayfa_icerigi” divinin içine koyacağız.

Jquery ile Ajax bölümü

Javascript kısmı ise şu şekilde olacak:

$(document).ready(function() {
 //sayfa ilk yüklendiğinde anaysayfa.html dosyasını çağıralım.
 $.ajax({
        type: "GET",
        url: "anasayfa.html",
        success: function (response) { 
            $("#sayfa_icerigi").html(response);
        }
    });
 
 //ilgili linklere tıklandığında bizim fonksiyonumuz çalışşsın.
    $(".links a").click(function(){
     hedef_url = $(this).attr("href");//asıl hedef bu. hedefi öğreniyoruz.
     //hedefi ajax ile çağırıyoruz.
     $.ajax({
            type: "GET",
            url: hedef_url,
            success: function (response) { 
                $("#sayfa_icerigi").html(response);
        }
        });
 
     return false; //ajax ile yükledikten sonra başka işlem yapmıyoruz. burası önemli. 
    })
})

Burada yaptığımız iki temel işlem var:

1- Doküman ilk yüklendiğinde anasayfa.html dosyasını çağırıyoruz. Böylece giriş sayfasının boş kalmamasını sağlıyoruz.

2- İkinci aşamada yaptığımız ise, “links” sınıfına sahip div’in içerisindeki a etiketlerinin tıklanmasına dair fonksiyon yazıyoruz. Bu fonksiyonun da temel işlevi, linkin gideceği adresi alıp, onu ajax ile çağırmak.

Temel olarak yaptığımız işlem bu kadar.

jQuery | Form Post

Özellikle sayfalarda kullanıcı yorumları veya mesajlarını iletebilmek için kullanılan formlar , jQuery kullanarak pratik bir şekilde Ajax ile çalıştırılabilmektedir. Şimdi aşağıdaki kısa kod blogunu inceleyelim;