jquery_logo

jQuery ile performans hareketleri – 2

İlk yazımızda count işlemlerine bakmıştık. Bu yazımızda ise başımızda ki en büyük sıkıntılardan biri olan selectbox, radiobutton, checkbox gibi elemanların form düzenleme ekranında yada benzeri bir durumda ilgili seçeneğin nasıl seçileceğine yada işaretleneceğine değineceğiz. Yani kullanıcıya önceden seçtirdiğimiz yada işaretlettiğimiz seçeneğin tekrar kullanıcıya gösterildiğinde ilgili değerlerin seçilmesi olayından bahsediyorum :) (cümleler epey bir devrildi) Örneğin kullanıcı dinamik oluşturmadığımız, içinde 5 tane eleman olan bir selectbox dan bir seçenek seçti ve kaydetti. Kullanıcının formu düzenlemesi gerektiğinde bir if bloğuyla türlü taklalar atıp ilgili seçeneğe “selected” niteliğini (attribute) eklememiz gerekiyor. Bu durum diğer elementler içinde geçerli bir durum. Mesela 5 seçenekli bir checkbox grubumuz var, kullanıcı içlerinden herhangi 3 tanesini işaretledi ve tekrar düzenlemek istedi, if senaryosunı aynen tekrarlamamız gerekiyor. Bu noktada yine jQuery Selector() imdadımıza yetişiyor ve ufak kod parçalarıyla taklalardan uzaklaşıyoruz. Hemen örneklerimize göz atalım;

    <div>       
        <div class="ornekSelect">
            <h1>Selectbox</h1>
            <select>
                <option>veri 1</option>
                <option>veri 2</option>
                <option>veri 3</option>
                <option>veri 4</option>
            </select>
        </div>

        <div class="ornekCheckbox">
            <h1>Check Box</h1>
            <input type="checkbox" name="name" value="1" />
            <input type="checkbox" name="name" value="2" />
            <input type="checkbox" name="name" value="3" />
            <input type="checkbox" name="name" value="4" />
        </div>
    
        <div class="ornekRadio">
            <h1>Radio Button</h1>
            <input type="radio" name="name" value="1" />
            <input type="radio" name="name" value="2" />
            <input type="radio" name="name" value="3" />
            <input type="radio" name="name" value="4" />
        </div>
    </div>

Yukarıda sırasıyla; select, checkbox ve radio elementlerini görüyoruz. Gelen değişkenlerle seçimlerimizi aşağıdaki kodlarla gerçekleştiriyoruz.

    <script type="text/javascript">
        $(document).ready(function () {
            //------------------------------------
            $(".ornekSelect select").val("veri 3");

            //------------------------------------
            var secilecek = "1,3";
            $(".ornekCheckbox input[type=checkbox]").each(function () {
                if (secilecek.indexOf($(this).val()) != -1) {
                    $(this).attr("checked", true);
                }
            });

            //------------------------------------
            $(".ornekRadio input[type=radio][value=4]").attr("checked",true).after("Seni seçtim !");
        });
    </script>

Uzun uzadıya kodlarla yaptığımız işlerin kısacık kod parçalarıyla çok daha kolay bir şekilde nasıl yapıldığını görmüş olduk. Umarım faydalı olmuştur :)