jQuery Jump Menü

04-01-2011, 21:41:44

AycanB

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba arkadaşlar hemen hemen 2 aydır makale yazamıyordum yoğunluktan, bugün müşterimin beni ekmesi ve bir arkadaşım benden böyle bir menü isteyince hemen bu boşluğu makaleye çevirmeye çalıştım. Herzaman olduğu gibi bu uygulamaya tam isim vermedim.
Uygulama hakkında : İl – İlçe seçimi gibi ana ve alt kategori seçimli olan menuler için yazdım.

Ön izleme :

Hemen kodlara geçecek olursak

Html kodları ;

<select class="anaSelect" onchange="abjumpMenu();">
    <option value="1">Amasya</option>
    <option value="2">Erzurum</option>
    <option value="3">İzmir</option>
    <option value="4">Kıbrıs</option>
</select>
<input type="text" id="anaDeger"/>
<select class="altSelect altSelect1" style="display: none;">
    <option value="seciniz">Lütfen Seçiniz</option>
    <option value="a">Merzifon</option>
    <option value="b">Gümüş Hacıköy</option>
    <option value="c">Hıra</option>
    <option value="d">Kaya Düzü</option>
    <option value="e">Dip Hacı</option>
    <option value="f">Kop gel</option>
    <option value="g">Günahlarından</option>
</select>
<select class="altSelect altSelect2" style="display: none;">
    <option value="seciniz">Lütfen Seçiniz</option>
    <option value="a">Hasan Kale</option>
    <option value="b">Yakutiye</option>
    <option value="c">Hınıs</option>
    <option value="d">İspir</option>
    <option value="e">Aşkale</option>
</select>
<select class="altSelect altSelect3" style="display: none;">
    <option value="seciniz">Lütfen Seçiniz</option>
    <option value="a">Ali Ağa</option>
    <option value="b">Bornava</option>
    <option value="c">Alsancak</option>
    <option value="d">Urla</option>
</select>
<select class="altSelect altSelect4" style="display: none;">
    <option value="seciniz">Lütfen Seçiniz</option>
    <option value="a">Girne</option>
    <option value="b">Lefkoşa</option>
    <option value="c">Lefke</option>
</select>
<input type="text" id="altDeger"/>

Css kodları ;

Css kodları yoktur arkadaşlar select’leri kendinize göre düzenleyebilirsiniz.

jQuery kodları (en önemli kısım);

function abjumpMenu(){

    /**
     * ! Ama select'inin secilen degerini aliyoruz.
     **/
    var deger = jQuery('.anaSelect').val();
    /**
     * ! Ama select'inin secilen degerinini gizli bir input'a atiyoruz ki
     *   form islemi post edildiginde veriyi kolayca gondermek icin.
     *   Ayrica her ana select degistigidne verileri temizliyoruz
     **/
    jQuery('#anaDeger').val(null);
    jQuery('#altDeger').val(null);
    jQuery('#anaDeger').val(deger);
    /**
     * ! Ana select'den aldigimiz degere bir text ekliyoruz
     *   Cunki class isimleri tek sayisal karakterlerden olusmaz.
     **/
    var acilacakDeger = 'altSelect'+deger;
    /**
     * ! Onceden acilmis alt select'imiz varsa tumunu kapatiyoruz.
     **/
    jQuery('.altSelect').fadeOut(0);
    /**
     * ! Ana select'den secilen degere gore alt select'imizi actiriyoruz.
     **/
    jQuery('.'+acilacakDeger).fadeIn('fast');
    /**
     * ! Alt element den secim yapildiginda.
     **/
    jQuery('.'+acilacakDeger).change(function(){
        /**
         * ! Secilen sekmenin degerini aliyoruz.
         **/
        var altDeger = jQuery('.'+acilacakDeger).val();
        /**
         * ! Eger alt menu degistiginde (change) hic bir alt menu secmemis ise
         * uyari verdiriyoruz
         **/
        if(altDeger == 'seciniz')
        {
            alert("Lütfen alt değeri seçiniz");
            jQuery('#altDeger').val(null);
        }else
        {
            jQuery('#altDeger').val(altDeger);
        }
    });
}

Kodlar gene kalabalık görükebilir ama %70 ‘i açıklama

. Kodları adım adım açıklayacak olursak;
function abjumpMenu(){

function abjumpMenu(){ ... }

Ana select’imiz değiştiğinde abjumpMenu fonksiyonu ile işlemlere başlıyoruz.

var deger = jQuery('.anaSelect').val();

Ana select’inin seçilen degerini aliyoruz.

jQuery('#anaDeger').val(null);
jQuery('#altDeger').val(null);
jQuery('#anaDeger').val(deger);

Ana select’inin seçilen değerlerini gizli bir input’a atiyoruz ki form islemi post edildiginde veriyi kolayca gondermek icin. Ayrica her ana select degistigidne verileri (input değerlerini )temizliyoruzi.

var acilacakDeger = 'altSelect'+deger;

Ana select’den aldigimiz değere bir text ekliyoruz çunki class isimleri ‘tek’ ve ‘sayisal’ karakterlerden oluşamaz.

jQuery('.altSelect').fadeOut(0);

Önceden açılmış alt select’imiz varsa tümünü kapatiyoruz.

jQuery('.'+acilacakDeger).fadeIn('fast');

Ana select’den seçilen değere göre alt select’imizi açtırıyoruz.

jQuery('.'+acilacakDeger).change(function(){ .. }

Alt element den seçim yapıldığında.

var altDeger = jQuery('.'+acilacakDeger).val();

Seçilen sekmenin değerini alıyoruz.

if(altDeger == 'seciniz')
        {
            alert("Lütfen alt değeri seçiniz");
            jQuery('#altDeger').val(null);
        }else
        {
            jQuery('#altDeger').val(altDeger);
        }

Eğer alt menü değiştiğinde (change) herhangi bir alt menü seçmemiş ise uyari verdiriyoruz

Js kodlarımız bu kadar arkadaşlar.

Kullanımı çok basittir
1 – İndirmiş olduğunuz js dosyasını ftp’nize atın.
2 – Sayfanızda herhangi bir js dosyası ekli değilse şu iki kodu tagları arası bu iki kodu yapıştırın.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="kutuphane/ab-jumpMenu.js" type="text/javascript"></script>

Eğer sayfanızda ekli olan bir js kodu varsa sadece ab-jumpMenu.js dosyasını sayfanıza ekleyin.
3 – Html taglarını direk sayfanıza ekleyin. (Görünüm açısından tasarım hoş değil ama bunu kendinize göre ayarlaya bilirsiniz.)

Uygulamayı indir / Uygulama demo

05-01-2011, 11:27:25

#2