Tahmin ediyorum 3 hafta sonra kaldığım yerden yazılarıma devam edeceğim. Bir proje için yazının tamamını gör olayını yaptım, bugünde bu olayı eklenti haline getireyim hemde jQuery e nasıl eklenti yazılıyor bunu bir göreyim diyerek more eklentisini yazdım :) (Hayatımın en garip duygulu günlerinden birini geçiriyorum, bu sebepten dolayı cümlelerde anormallikler olabilir, kodlarda da, sonra uğrar düzeltirim.)

Eklenti şu işi yapıyor; diyelim uzunca bir yazı var ve siz bunun ilk 100 karakterini göstermek istiyorsunuz, 100 karakterden sonra çıkan bir düğmeylede yazının tamamını gösteriyorsunuz. Yada kendi belirlediğiniz bir ayraçla bu işlemi yapabiliyorsunuz. Bu arada eğer özellik açıksa ki varsayılan olarak açık, html etiketlerini kaldırıyor, devam et düğmesine basıncada yazının orjinal halini getiriyor.  Örneklere bakarak demek istediğimi daha iyi anlayabilirsiniz.

$(document).ready(function () {
  $(".more").more();
  $(".more").more({text:' ..more',textClass:'moreLink',character:50,splitChar:'{devam}'});
});

Eklentinin git adresi: https://github.com/apoStyLEE/jQuery-More-plugin

Örnek: http://95.0.146.135/jqueryMore/

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !


Senaryomuz şu şekilde, bir tarafta ürünlerimiz var diğer tarafta ise alış veriş sepetimiz. Kullanıcı almak istediği ürünü sürükleyip sepete bırakıyor. Aynı ürünü tekrar sepete attığında sadece adet bir artıyor. Ürünü sepetinden çıkartmak istediğinde ise, üzerine çift tıklıyor. Bu işi yapmak için jQuery ve jQueryUI kullanıyoruz. En can alıcı noktamız ise jQuery UI nin Draggable ve Droppable özelliği. Kodların üzerinde açıklamalar bulunuyor.

        $(document).ready(function(){

            // Sürükleme yapılacak elemanları seçiyoruz.
            $(".urunGrid ul li").draggable({
                revert:true,
                helper: "clone"
            });

            // Üzerine elemanları alacak olan kısmı belirtiyoruz. Yani sepetimiz.
            $(".sepet").droppable({
                drop: function( event, ui ) {
                    var t = $(this);
                    var d = ui.draggable; // bu bizim tuttuğumuz eleman yani <li> elementi
                    var ul = t.find("ul"); // Sepetimizin içindeki ul elementimiz.
                    var id = d.attr("id"); // tuttuğumuz ürünün id si.
                    var idToLi = ul.find("#"+id); // sepette, tuttuğumuz id ye sahip ürünü seçiyoruz.
                    var adet;

                   // Veritabanına yazma işlerini burada yapabilirsiniz. (ajax)                    

                    idToLi.fadeOut().fadeIn(); // şeklimizi yapıyoruz :)

                    // eğer daha önce ürün ekli değilse ekliyoruz, ekliyse adetini 1 arttırıyoruz.
                    if(idToLi.html()==null){
                        ul.append("<li id=\""+id+"\" title=\"Silmek için çift tıklayın\"><em>1 *</em> "+d.html()+"</li>");
                    }
                    else{
                        adet = parseInt(idToLi.find("em").text().replace(" *",""));
                        idToLi.find("em").text(adet+1+" *");
                    }
                    toplam(); // sepetin altına toplam alan fonksiyonu çağırıyoruz.
                }
            });

            // Sepetteki ürüne çift tıklandığında silinmesini sağlıyoruz.
            $(".sepet ul li").live("dblclick", function() {
                var adet = parseInt($(this).find("em").text().replace(" *", ""));
                if (adet == 1) {
                    $(this).remove();
                }
                else {
                    $(this).find("em").text(adet-1+" *");
                }
                toplam(); // Ürün silindiğinde toplamın yeniden hesaplanmasını sağlıyoruz.
            });
        });

        function toplam(){
            var toplam=0;
            var t;
            var fiyat;
            var adet;

            // Eğer sepette ürün yoksa "ürün yok" ibaresini görünmez yapıyoruz.
            if($(".sepet ul li").length != 0){
                $(".sepet h1 small").fadeOut();
            }
            else
            {
                $(".sepet h1 small").fadeIn();
            }

            // Sepetin içinde ki ürünleri yani <li> leri döndürüp toplama işlemini yapıyoruz.
            $(".sepet ul li").each(function(){
                t = $(this);
                fiyat = parseFloat(t.find("span").text().replace(t.find("span small").text(),""));
                adet = t.find("em").text().replace(" *","");
                toplam += (fiyat*adet);
            });

            // toplamı ilgili alana yazdırıyoruz.
            $("#toplam").fadeIn().text($(".sepet ul li").length+" Ürün, Toplam: "+toplam+" TL");
        }

    <body>
        <div class="tasiyici">
            <div class="kutu urunGrid">
                <h1>Ürünler</h1>
                <ul>
                    <li id="1">Asus Anakart <span>125<small> TL</small></span></li>
                    <li id="2">Intel İşlemci <span>23<small> TL</small></span></li>
                    <li id="3">Amd İşlemci <span>44<small> TL</small></span></li>
                    <li id="4">Sony Bilmemne <span>96<small> TL</small></span></li>
                </ul>
            </div>

            <div class="kutu sepet">
                <h1>Sepet <small>ürün yok</small></h1>
                <ul></ul>
                <div id="toplam"></div>
            </div>

            <div style="clear:both"></div>
        </div>
    </body>

Sürükle bırak gibi dışarıdan karışık gelen bir olayı jQuery sayesinde çok basit bir şekilde çözdük. Bu konuyla ilgili ufak tefek denemeler yaparak olayı daha iyi kavraya bilirsiniz. Aşağıda çalışan örneği görebilirsiniz, umarım faydalı bir yazı olmuştur :)

Bu yazıda jQuery ile serileştirme (serialize) olaylarına değineceğim. Serileştirme, bir grup form elemanın elemanAdi ve içindeki değer olarak bir string haline yada dizi (array) haline getirilmesine diyoruz. Bu yöntem özellikle ajax ile veritabanı işlemleri yaparken kullanılıyor.

İçinde 10 tane form elemanı olan bir form düşünelim, bu formu ajax kullanarak veritabanına yazmamız gerektiğinde her form elemanı için tanımlama yapmamız gerekir, işte serileştirme bu noktada işimize yarıyor, $(“form”).serialize(); dediğimizde otomatik olarak form serileştiriliyor ve istediğimiz gibi kullanabiliyoruz. Form serileştiğinde alan1=1&alan2=2&alan3=3&select1=test1 haline geliyor.

jQuery serileştirme işini dizi şeklinde de yapabiliyor. Serileştirme sonucunda oluşan veri yapısı şu şekilde oluyor;

[
    {
        name: "a",
        value: "1"
    },
    {
        name: "b",
        value: "2"
    },
    {
        name: "c",
        value: "3"
    },
    {
        name: "d",
        value: "4"
    },
    {
        name: "e",
        value: "5"
    }
]

Görüldüğü üzere çıktımız jSon data şeklinde oluyor. Bu sayede veriyi çok kolay bir şekilde işleyebiliyoruz. Kullanımı ise $(“form”).serializeArray(); şeklinde.

Her iki yönetimi form elementi kullanmadan diğer html elementleri içinede uygulamamız mümkün. Ekstradan yapmamız gereken tek şey * karakterini kullanarak element içindeki tüm elemanları belirtmek. Yani $(“div *”).serialize() gibi.. diyelim ki formumuz daki sadece input elementlerini serileştirmek istiyoruz bu seferde seçicimize sadece input ibaresini ekliyoruz $(“div input”).serialize()

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
            $(document).ready(function(){

                $("form.seri button").click(function(){
                    var seriForm = $("form.seri").serialize();
                    $(this).parent().find("span").text(seriForm);
                });

                $("div.seri button").click(function(){
                    var seriForm = $("div.seri *").serialize();
                    $(this).parent().find("span").text(seriForm);
                });

                $("div.seriArray button").click(function(){
                    var seriForm = $("div.seriArray *").serializeArray();
                    var t = $(this).parent().find("span");
                    t.empty();

                    $.each(seriForm, function(i,item){
                        t.append(item.name +"="+ item.value);
                    });
                });

            })

// ]]></script>
</pre>
<form class="seri">
<h3>Form Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button>
 </form>
<div class="seri">
<h3>Div Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<div class="seriArray">
<h3>Div Array olarak Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<pre>

Serileştirme, çok zahmetli işleri kolayca ve hızlı bir şekilde yapmamıza olanak sağlıyor ;) Örneklerin çalışır haline buradan bakabilirsiniz.

Yine kullanımını ilk olarak Facebook ve Twitter’ dan gördüğümüz bu olayın temel mantığını bildiğimiz sayfalama oluşturuyor. Neden bu şekilde bir sayfalama kullanmak gerekiyor isterseniz bunlara bir bakalım.

1. Sayfa komple yenilenmeyeceğinden daha işlevsel. Örneğin; kullanıcı video izlerken altında ki yorumları sayfa sayfa dolaşmak isterse, video yarıda kesilmeyecektir.
2. Sayfanın sadece ilgili yerini, ilgili kayıtlar kadar güncelleyeceğimizden daha performanslı. Bu performans sunucu tarafında; daha az sistem kaynağı tüketimi, kullanıcı tarafında ise; sayfanın yüklenme süresi olarak gözlenebilir. Özetlersek sunucudan yapılan isteği minimize etmiş oluyoruz.

Çektiğim videoların birinde dile getirdiğim bir konu vardı, yukarıda ki maddeleri görünce yazılı olarak da eklemek istedim. Anlık çok fazla kullanıcıya, çok fazla isteğe cevap verme durumunda olan siteler ajaxı bizim kara kaşımıza yada şekilli olsun afilli olsun diye kullanmıyor. Örneğin Facebook her işlemde sayfayı yeniden yüklemeye kalkarsa altından kalkılamaz bir yükle karşı karşıya kalır. Anlık Facebook’ a yazılan yorum, mesaj yada benzeri girdileri düşündüğümüzde ajaxın hava yastığı görevi gördüğünü hayal etmek güç olmasa gerek. Özetlemek gerekirse, ajax yaklaşımı şekilden ibaret değildir ;) Konumuza geri dönelim.


Mekanızma şu şekilde çalışıyor. Ekranda listelediğimiz kayıtlardan sonuncusunun id sini post edip, bu id den küçük olan son 2 kaydı ekrana basıyoruz.

<script type="text/javascript">
    $(function () {
        sonId(null);
        $('.daha').live("click", function () {
            var id = $(this).attr("id");
            var t = $(this);

            t.before("<img src=\"@Url.Content("~/content/images/yukleniyor.gif")\" class=\"yukleniyor\" title=\"Yükleniyor, lütfen bekleyin..\" />");
            t.hide();

            $.ajax({
                type: "POST",
                url: "@Url.Content("~/home/getir/")",
                data: "SonId=" + id,
                cache: false,
                success: function (data) {
                    if (data.sonId == -1) {
                        t.before("<span>Tüm kayıtlar bunlar.</span>");
                        $(".yukleniyor").remove();
                        t.remove();
                        return;
                    }
                    $.each(data.m,function(i, item){
                        $("#liste").append("<li id=\""+item.id+"\" class=\"hide\"><h5>"+item.baslik+"</h5><p>"+item.icerik+"</p></li>");
                        $("#liste li:last").fadeIn("slow");
                    });

                    sonId(data.sonId);
                    $(".yukleniyor").remove();
                    t.show();
                }
            });
            return false;
        });

        function sonId(gelen) {
            var id;
            if (gelen == null) {
                id = $("#liste li:first").attr("id");
            }
            else {
                id = gelen;
            }
            $(".daha").attr("id", id);
        }
    });
</script>

<ul id="liste">
    @foreach (var item in Model)
    {
        <li id="@item.id"><h5>@item.baslik</h5><p>@item.icerik</p></li>
    }
</ul>

<a href="#" class="daha">daha fazla</a>

Home kontrolümüzdeki getir adında ki aksiyonumuz;

  public ActionResult Getir()
        {
            //System.Threading.Thread.Sleep(2000); // yükleniyor mesajını görmek için biraz bekleme yapıyoruz ;)

            int sonId = Convert.ToInt32(Request.Form["SonId"]);

            var result = context.mesajs.Where(x=>x.id<sonId).OrderByDescending(x=>x.id).Skip(_skip).Take(_take);

            if (result.Count() == 0)
            {
                return Json(new { sonId = -1}, JsonRequestBehavior.AllowGet);
            }

            return Json(new { m = result, sonId = result.First().id }, JsonRequestBehavior.AllowGet);
        }

Bu örneği php, asp yada farklı bir dillede gerçekleştirebilirsiniz. Ben örneği asp.net de yapıyorum diye illa asp.net de olacak diye bir şart yok yani ;) Projenin çalışır haline buradan bakabilir, buradan da indirebilirsiniz.

Twitter da tweet yazarken @ işaretiyle başlayıp yazmaya başladığımızda, arkadaşlarımızı bulmamıza olanak sağlayan bir arama mekanızması bulunuyor. Geçenlerde lazım oldu epey bir aradım fakat tam olarak bu işi yapan bir betiğe rastlayamadım, bende isteğime en yakın örneği bulup üzerinde bir kaç ufak değişiklikle amacıma ulaştım. Faydalandığım örneğin adresini bir türlü bulamadım, bu yüzden paylaşamıyorum :S Olayın temelinde jQueryUi – Autocomplete‘ nin Multiple Values özelliği bulunuyor.

Bu işi yaparken jQuery ve jQueryUi yi kullanıyoruz, diğer dinamik kısım için php, asp, java vb.. diller kolaylıkla kullanılabilir. Ben asp.net mvc (c#) ile bu örneği gerçekleştirdim. Mekanızma şöyle çalışıyor; adres satırından aranacak bilgiyi gönderip, veritabanında aramamızı gerçekleştirip sonucu geriye json olarak döndürüyoruz.

Javascript kodlarımız (textAreaAutoComplete.js);

$(function () {
    function split(val) {
        return val.split(/ \s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }

    $("#search")
		.bind("keydown", function (event) {
		    if (event.keyCode === $.ui.keyCode.TAB &&
					$(this).data("autocomplete").menu.active) {
		        event.preventDefault();
		    }
		})
		.autocomplete({
		    minLength: 0,
		    selectFirst: true,
		    source: function (request, response) {
		        if (extractLast(request.term).substr(0, 1) == "@") {
		            $.getJSON(root + "kullanici/search/", {
		                term: extractLast(request.term)
		            }, response);
		        }
		    },
		    focus: function () {
		        return false;
		    },
		    select: function (event, ui) {
		        var terms = split(this.value);
		        terms.pop();
		        terms.push(ui.item.value.split(' ')[0]);
		        terms.push("");
		        this.value = terms.join(" ");
		        return false;
		    }
		});
});

Veritabanında arama işlemini yapan action methodumuz.

        public ActionResult search()
        {
            string strParameter = Request.QueryString["term"].Replace("@", string.Empty).Replace("%40",string.Empty);

            var result = db.kullanicis.Where(x => x.takmaAd.Contains(strParameter));

            if (result.Count() == 0)
            {
                return null;
            }
            else
            {
                return Json(result.Select(x => "@"+x.takmaAd +" "+x.adSoyad), JsonRequestBehavior.AllowGet);
            }
        }

Çalışan örneğe buradan ulaşabilir, buradan indirebilirsiniz.

Özellikle Friendfeed, Twitter, FaceBook gibi sosyal ağlarda sayfa yenilenmeden verilerin güncellendiğini biliyoruz. Bu tür bir durumu gerçekleştirmek için akla ilk gelen yöntem ajax ile verinin bulunduğu yeri belirli zaman aralıklarında yenilemek geliyor, fakat veri trafiğinin çok üst düzey olduğu bu sistemlerde sürekli yenileme yapmak aşırı kaynak tüketimine hatta sistemin durmasına sebep olur. Bu işi şüphesiz en iyi yapan site FriendFeed, o kadar iyi yaptılar ki FaceBook bu siteyi ve geliştiricilerini satın aldı :) Neyse oralara daha fazla girmeden konumuza dönelim.

Bundan epey zaman önce Facebook’ un davranışlarını epeyce inceliyordum, özellikle sayfa sabitken verilerin güncellenmesi aklımı resmen alıyordu. Bir gün farkettim ki akıllı Facebook mühendisleri kullanıcı deneyimlerini o kadar iyi gözlemlemişler ki bu işi şu şekilde çözmüşler Window Focus ! Kullanıcı sayfada kaldığı sürece sağa sola tıklamıyor olabilir. Bu durum farklı sekmelere yada farklı sayfalara gidip tekrar gelmeyeceği anlamına gelmiyor ! Javascript ile pencerenin focus olayını kullanarak basit bir şekilde sanki veriler anlık güncelleniyor hissini kullanıcı üzerinde yaratabiliriz.

Index sayfamızdaki kodlarımız.

<script type="text/javascript">
    var focus = false;
    $(document).ready(function () {

        $(window).bind('focus', function () {
            getData();
        });

        // ie
        $(document).bind('focusin', function () {
            getData();
        });

    });

    function getData() {
        if (focus) {
            focus = false;
        }
        else {
            focus = true;
            $.ajax({
                url: "/home/getData/" + $("#grid ul li:last").attr("id"),
                dataType: 'json',
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#grid ul").append("<li id=\"" + data[i]["id"] + "\"><strong>" + data[i]["adSoyad"] + "</strong> " + data[i]["icerik"] + "</li>");
                            $("#grid ul li:last").fadeOut().fadeIn();
                        }
                    }
                }
            });
        }
    }
</script>

Gördüğünüz gibi sadece pencere aktif olunduğunda bir ajax sorgusu yapıyor, varsa güncel verileri alıyor ve kullanıyoruz. Burada ajax isteğimizi yaparken ekranda ki son kaydın id sinide gönderiyoruz ki veritabanından sorgulama yaparken o id den büyükleri yani güncelleri bulabilelim.

Sonuç olarak; kullanıcı sekmeler arasında dolaşırken bizim sitemizin bulunduğu sekmeye her gelmesinde veriler aynı FaceBook’ da ki gibi güncellenmiş olacak. Burada ben olayın mantığını basitçe anlatmak istedim. Bu yöntemi iyileştirmek ve geliştirmek de mümkün ;)

Demo için, buradan kayıt girebilir, şuradan da olayı görüntüleyebilirsiniz. Projenin çalışır halini buradan indirebilirsiniz.

Çok sevdiğim bir öğrenci arkadaşım, “abi ziyaretçi defteri yapar mısın bana ?” dedi,  yaparım dedim. Ne kadar sürer dedi, taş patlasa 1 saat dedim. Mvc 3 sağolsun 15 dakika da istediğimiz özelliklerdeki ziyaretçi defterini yaptık :) Yeni başlayan arkadaşların işine yarar diye bu örneği paylaşmak istedim. Bu basit defterde, code-first ile model ve doğrulama (validation), jQuery Ajax ve sql compact 4.0 kullandık. Örneği buradan indirebilirsiniz, umarım faydalı olur.

Bu görseli başka bir yazı için hazırlamıştım, sanırım bundan sonra sık sık kullanacam, çok güzel oldu yav :)

Bir menümüz var diyelim, kullanıcı herhangi bir elemana tıkladı ve o sayfaya gitti. Kullanıcının nerede olduğu göstermek için menüden ilgili bölümü işaretlememiz yada bir şekilde belli etmemiz gerekiyor. Yada bir kategori menümüz var ve kategorilerin alt kategorileri şeklinde de bir hiyerarşimiz bulunuyor, kategori seçildiğinde altındaki diğer kategorileride belli etmemiz gerekiyor. İşte bu tip seçme durumlarında jQuery ile işimizi çok basit bir şekilde görüyoruz. Bunu asp, php vb.. dillerle yapmak için heleki menü dinamik oluşmuyorsa kaç satır yazmanız gerekiyor tahmin bile edemiyorum, basit bir hesapla menüdeki eleman sayıları kadar, yani çOOook. Lafı uzatmadan örneklerimize geçiyoruz. Unutmadan buradaki ve buradaki hareketlere göz atmanızda fayda var ;)

<div class="ornekMenu">
        <h1>Örnek 1</h1>
        <ul>
            <li><a href="?link=kategori1">kategori 1</a></li>
            <li><a href="?link=kategori2">kategori 2</a></li>
            <li><a href="?link=kategori3">kategori 3</a></li>
            <li><a href="?link=kategori4">kategori 4</a>
                <ul>
                    <li><a href="?link=kategori6">alt kategori 1</a></li>
                    <li><a href="?link=kategori7">alt kategori 2</a></li>
                    <li><a href="?link=kategori8">alt kategori 3</a></li>
                </ul>
            </li>
            <li><a href="?link=kategori9">alt kategori 5</a></li>
        </ul>
    </div>

    <div class="ornekMenu2">
        <h1>Örnek 2 <small>alt kategorileride seçme</small></h1>
        <ul>
            <li><a href="?link=kategori1">kategori 1</a></li>
            <li><a href="?link=kategori2">kategori 2</a></li>
            <li><a href="?link=kategori3">kategori 3</a></li>
            <li><a href="?link=kategori4">kategori 4</a>
                <ul>
                    <li><a href="?link=kategori6">alt kategori 1</a></li>
                    <li><a href="?link=kategori7">alt kategori 2</a></li>
                    <li><a href="?link=kategori8">alt kategori 3</a>

                        <ul>
                            <li><a href="?link=kategori10">alt alt kategori 1</a></li>
                            <li><a href="?link=kategori11">alt alt kategori 2</a></li>
                            <li><a href="?link=kategori12">alt alt kategori 3</a>
                                <ul>
                                    <li><a href="?link=kategori13">alt alt alt kategori 1</a></li>
                                    <li><a href="?link=kategori14">alt alt alt kategori 2</a></li>
                                </ul>
                            </li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a href="?link=kategori9">alt kategori 5</a></li>
        </ul>
    </div>

Yukarıda 2 tane menümüzün var, tıkladığımız elemana gitmek için aşağıdaki kodlarımızı yazıyoruz. Unutmadan aşağıda ki kodda parametre değişkenin karşısına dinamik olarak da querystring değerini alabiliriz ;)

    <script type="text/javascript">
        $(document).ready(function () {

            //---- buraya dinamik olarak querystringi ekleyebilirsiniz. eğer eklerseniz aşağıdaki getQuerystring fonksiyonunu silebilirsiniz.
            var parametre = "?link=" + getQuerystring("link");

            //----------------------------------------------------------------------
            $(".ornekMenu ul li a[href^='" + parametre + "']").css({ backgroundColor: 'red', color: 'white' });

            //-----------------------------------------------------------------------------------
            $(".ornekMenu2 ul li a[href^='" + parametre + "']").each(function () {
                var t = $(this);
                var style = { backgroundColor: 'red', color: 'white' };
                t.css(style);

                if (t.parent().find("ul").length != 0) {
                    t.parent().find("ul").css(style);
                }

            });

        });

        function getQuerystring(key, default_) {
            if (default_ == null) default_ = "";
            key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
            var qs = regex.exec(window.location.href);
            if (qs == null)
                return default_;
            else
                return qs[1];
        }
    </script>

Örneklerin Demosu buradan bakabilirsiniz. Çok zevkli bir yazı oldu, umarım faydalı olur. Bir hatırlatma yapayım; bu tür yazılarda asıl öğrenmeniz gereken işleyişin mantığı, yoksa bu kodları ezberlemenin yada yöntemi ezberlemenin size katacağı hiç bir şey yok, sadece anlık probleminizi çözersiniz o kadar !

İ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 :)

Bu yazı serisinde jQuery ile nasıl performans çakallıkları yapabiliriz bunlara değineceğim. Zaman zaman çok ufak nüanslar ile ciddi yüklerden kurtulabiliyoruz, önemli olan bu nüansları görebilmek. Yaptığım işlerde jQuery’ i sadece bu amaçlarla kullandığım bile oluyor. Neyse lafı fazla uzatmadan ilk hareketimize geçelim.

Satır sayısı yani veritabanından gelen kayıtların sayısı çoğu zaman ihtiyaç duyduğumuz bir veridir. Bu veriyi veritabanından almak için Count() fonksiyonunu kullanıyoruz. Karmaşık bir sorgu sonucu aldığımız verileri kullanıcılara sunacağımızı varsayalım, count işlemini yapabilmek için verileri gruplamamız (group by) gerekebilir yada count için ayrı bir sorgu yazmamız gerekebilir. Bunlar hem ekstra uğraş isteyen hemde ekstra iş yüküdür. Eğer bir grid kontrülü yada datatable benzeri bir yapı kullanıyorsanız direk içindeki verinin satır sayısını alabilirsiniz kullanmıyorsanız jQuery ile html etiketlerini lenght ile sayarak sonuca ulaşabilirsiniz. Hemen örnekleyelim;

    <ul class="ornekLi">
	    <li>satır 1</li>
	    <li>satır 2</li>
	    <li>satır 3</li>
	    <li>satır 4</li>
	    <li>satır 5</li>
    </ul>

    <table class="ornekTable">
        <tr>
            <td>Satır 1</td>
        </tr>
        <tr>
            <td>Satır 2</td>
        </tr>
        <tr>
            <td>Satır 3</td>
        </tr>
    </table>

    <table class="ornekTable2">
        <tr>
            <td>Satır 1</td>
            <td>Satır 2</td>
            <td>
                <ul>
	                <li>satır 1</li>
	                <li>satır 2</li>
	                <li>satır 3</li>
	                <li>satır 4</li>
                </ul>
            </td>
            <td>Satır 4</td>
            <td>
                <ul>
	                <li>satır 1</li>
	                <li>satır 2</li>
                </ul>
            </td>
        </tr>
    </table>

Yukarıdaki html çıktısında veritabanımızdan gelen verileri listelediğimizi varsayıyoruz.

    <script type="text/javascript">
        $(document).ready(function () {

         alert($(".ornekLi").length);
         alert($(".ornekTable tr").length);

         $(".ornekTable2 tr td").each(function () {
                var t = $(this);
                var count = t.find("ul li").length;
                if (count > 0) {
                    t.prepend("<h5>" + count + " adet</h5>");
                }
                else {
                    t.prepend("<h5>li yok</h5>");
                }
            });
        });
    </script>

Bu sayede count işlemi için sql e bulaşmamış olduk. Hatta karmaşık durumlarda bile jquery’ nin seçicileri sayesinde bir sürü kod yazmaktan kurtulup işlemimizi gerçekleştirdik. Umarım faydalı bir bilgi olmuştur, ilerleyen günlerde benzer yöntemler ile geri geleceğim ;)