Merhaba arkaşlar jquery’de bende yeni olmama rağmen kesinlikle keyifli bir teknik olduğunu söylemeyeliyim.neredeyse ilk çalışmam sayılacak bu örneği sizlerle paylaşmak istedim.
star rating
hazır scriptleri bulunduğu halde ben hem kendimi denemek hemde bu süreçte daha iyi öğrenmek için klasik yıldız oylama sistemi yapmaya çalıştım. burada ajax, jquery ve asp.net kullanarak yaptığım yıldız oylama sistemini anlatacağım.öncelikle ekran görüntümüzün nasıl olacağı hakkında bir fikir edinelim.
div yapımız
gördüğünüz gibi son derece basit div yapısı var. html kodları şu şekilde
bu divlere atayacağımız 3 adet sınıfımız var bu birisi boş yıldız birisi hover yani mouse üstüne gelince atayacğaımız birisi de tıklandığımızda sarı olacka kısım. klasik bir oylama sistemindeki gibi yani.css sınıflarımız şu şekilde olacak.
evet bu basit yapıyı hazırladıktan sonra biraz jquery keyfine varalım.açıklamaları içinde yapacağım. kodlardan takip edebilirsiniz.
//burada lt selectorunu kullanıyoruz less then yani 4 geldiyse//oy divinin içinde 4. sıraya kadar olanları divleri seçiyoruz ve toogle class ile s3 (sarı)//sınıfına taşıyoruz$(“div#oy div:lt(“+sari+”)”).toggleClass(‘s3’);$(“div#oy div”).hover(function () {//idlerdeki sa bölümünü silip kaçıncı divin üstünde olduğumuzu öğreniyoruzvar ad= $(this).attr(“id”).replace(“sa”,””);// üstüne gelinen divi s1e taşıyıp sıfırlıyoruz$(“div#oy div”).attr(“class”, “s1”);//yine lt ile üstüne geldiğimiz dive kadar tüm divleri mavi yapıyoruz.$(“div#oy div:lt(“+ad+”)”).toggleClass(‘s2’);//ufak da opacisty animasyonu kattık$(“div#oy div:lt(“+ad+”)”).animate({opacity: “0.8”});//burada kısaca iyi kötü gibi mesajları belirliyoruz. ve sonuc idli dive atıyoruz.var msj=””;switch (parseInt(ad)){case 1:msj=”kötü”;break;case 2:msj=”eh işte”;break;case 3:msj=”fena değil”;break;case 4:msj=”iyi”;break;case 5:msj=”harika”;break;}$(“#sonuc”).html(msj);//hover ile işimiz bitiyor.},function(){//burada mouse out olayına başlıyoruz.//yine hangi nolu divden kouse out yaptık belirleyelim.var ad= $(this).attr(“id”).replace(“sa”,””);//lt ile mavi yaptığımız divleri tekrar boşaltıyoruz. üstteki kodla aynı dikkat ederseniz.$(“div#oy div:lt(“+ad+”)”).toggleClass(‘s2’);$(“div#oy div:lt(“+ad+”)”).animate({opacity: “1”});//burada dbden gelen divleri yine s3 sınıfına taşıyoruz. mouse üstünden gitse dahi ilk haline dönmesi için.//sari değişkenine kadar olan divleri sarı yapıyoruz.$(“div#oy div:lt(“+sari+”)”).attr(“class”, “s3”);//üstünde gidince iyi kötü gibi ifadeleri boşaltalım .$(“#sonuc”).html(“”);}).click(function(e) {//evet click fonksiyonuna geldik.//burada jquery ile ajax kullanımı da görebilirsiniz.//yine hangi dive tıkladığımızı bulduk.var ad= $(this).attr(“id”).replace(“sa”,””);//sari değerini ada eşitleyelim ki üstünde çekilince son tıkladığımız dive kadar sarı yıldız görünsün.sari=ad;//burada ajax isteği yapacak fonksiyonumuzu tanımlıyoruz.//rate_this.aspx sayfasına get ile oy değeri gönderiyoruz.//oy olarak idden replace ettiğimiz ad değerini gödneriyoruz.e.preventDefault();var parent = $(this).parent();$.ajax({type: ‘get’,url: ‘rate_this.aspx’,data: ‘ajax=1&oy=’ + ad,success: function() {//fonskiyon başarılı ise//tıklama sonucu tıkladığımız dive kadar ki sınıfı sarı yıldıza çevirdik.//ve sonuca oy kullanıldı değerini atadık.$(“div#oy div”).attr(“class”, “s1”);$(“div#oy div:lt(“+ad+”)”).toggleClass(‘s3’);$(“#sonuc”).html(“oy kullanıldı teşekkürler”);}});});});
evet jquery kısmı bu kadar bu haliyle asp.netsiz çalışabilir bir örnek elde ettik. şimdi gelen isteği karşılayım ve dbden ortalama döndürelim.rate_this.asp kodlarımız aşağıda
bunlar klasik .net kodu oy querystringine göre dbmizde kotu, eh, iyi, fenad,harika alanları bir arttırıyoruz. swtich ile oydan hangi alanı arttıracağımıza karar veriyoruz.son olarak pageloadda ortalama hesaplayacak fonksiyonumuzu yazıyoruz . dbden çektiğimiz verilere göre baştan kaç yıldız sarı olacak ona karar veriyoruz.
bu kodda önce tüm oyları toplayıp oy adedini buluyoruz. sonra sırayla her oyun değerini yani iyi odan 10 tane varsa 4*10 , kotu oydan 5 tane varsa 5*1 . ve toplam oya böldüğümüzde ortalama değer çıkıyor. bunu javascript içnideki başlangıc değerine literal2’ye atıyoruz.evet uzun gibi oldu ama böyle bir işlem için yazılabilecke en kısa kodlar. benzer örneklerinde çok daha fazla kod ve karmaşa var. geliştirebilirsiniz ama bu halinin de iş göreceğinden eminim.çalışır hali için tıklayın.uygulamanın çalışma dosyalarını indirmek için tıklayın
