Gelecek zamanlara php derslerinde göreceğimiz, ve php bilen arkadaşlarımın da anlayacağı gibi, başka bir sayfadaki bilgileri, verileri yada herhangi bir nesneyi o an bulunduğumuz sayfada Ajax ile göstermeye çalışacağız.. Bunun için birkaç jQuery Koduna ihtiyac duyduk.Örnekte kullandığımız jQuery Metodları;
appendTo
Continue reading
jQuery Video derslerimizde daha önce görmüş olduğumuz hide / show metodlarına bir alternatif olarak toggle metodu bulunmaktadır. toggle metodu belirlediğimiz nesneyi kaybedip daha sonra tekrar gösterebilme fonksiyonudur. Continue reading
jQuery kullanımını en baştan ele alarak, şu dersimizde belirttiğimiz slideDown metoduna bir örnektir.
İlk olarak video derslerimizi izlediyseniz jQuery kullanabilmek için, indireceğimiz jquery dosayasını HTML sayfamıza import etmemiz gerekmektedir.Bunun için aşağıdaki kodu kullanınız.
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
jquery-1.2.6.pack.js olan bölümü indirdiğiniz jquery dosyasının klasör yolunu belirterek yazınız.Bu kodu html sayfamızın <head> .. </head> tagları arasına yapıştırınız.
Aşağıdaki görsel Anlatımda uygulananlar jQuery’î dah iyi anlamak için yetkindir.
Aslında jquery kullanabilmek için kod ezberlememize gerek yoktur( Daha önce yazılmış harika kodları kullanabiliriz)
Fakat bazen kullanacağımız kodları kişiselleştirmemiz gerekebilir.Bunlardan bazılarını örnek olarak açıklayacağım;
$("#header") = id=”header” ile birlikte elemanı çağırır$("h3") = bütün <h3> adlı elemanları çağırır$("div#content .photo") = class=”photo” olarak atanılan <div id=”content”> içerisindeki bütün elemanları çağırır.$("ul li") = <li> olarak adlandırılan <ul> içerisindeki bütün elemanları çağırır.$("ul li:first") = <ul> içerisindeki ilk <li> elemanını çağırır.Yukarıda belirttiğimiz $(“elamanımız”) olarak örneklendirdiğim gibi fonksiyon ataması yapabilmek içinde, jquery kodlarımın başında;
$(function() {
<<- Bu alana jQuery içerisinde kullanacağımız kodlarımız gelecektir ->>
});
$function yapısı ile yeni bir fonksiyon atar ve değerini gireriz.Aşağıda verdiğim örnek ile jquery fonksiyonumuza yeni bir işlev tanımlarız
$(".button").click(function() {
yapısı ile button adlı nesneye (click) komutu ile tıklanıldığında yeni bir fonksiyon oluşmasını sağlarız;
$("#panel").slideDown("slow"); });
Kodları ile panel id’li nesnenin slideDown metodu ile aşağı kaymasını sağlarız. Slow belirteci ise animasyonuın yavaş yürümesi gerektiğini bildirir.
slideDown yönteminin kullanılmasına ilişkin video Dersimiz için video izle butonuna tıklayın;
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Artistlik web sitelerinde gördüğünüz efekt vererek silme işlemini 19 satırlık jQuery kodu ile burada olduğu gibi kolayca yapabilirsiniz.
Demosuna buradan bakabilirsiniz.
PHP veri silme kodumuz;
if(isset($_GET['delete'])){$query='DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];$result= mysql_query($query,$link);}
PHP verileri listeleme kodumuz;
.$query='SELECT * FROM my_table ORDER BY title ASC';$result= mysql_query($query,$link);while($row= mysql_fetch_assoc($result)){echo'<div id="record-',$row['item_id'],'"><a href="?delete=%27,$row%5B%27item_id%27%5D,%27"class="delete">Delete</a><strong>',$row['title'],'</strong></div>';}
Ve jQuery kodumuz;
.$(document).ready(function() {$('a.delete').click(function(e) {e.preventDefault();varparent = $(this).parent();$.ajax({type:'get',url:'jquery-record-delete.php',data:'ajax=1&delete='+ parent.attr('id').replace('record-',''),beforeSend:function() {parent.animate({'backgroundColor':'#fb6c6c'},300);},success:function() {parent.slideUp(300,function() {parent.remove();});}});});});
Bu kodları bir sayfada birleştirmeniz yeterli bunun yanı sıra jQuery dosyasınıda sayfaya dahil etmelisiniz.
jQuery dosyasını indirdikden sonra aşağıdaki html kodu ile dahil edebilirsiniz.
jQuery ile sayfaya refresh atmadan 3 satır kodla verileri ekrana bastırabilirsiniz. Yapıcağımız işlem çok basit önce jQuery’nin güzel özelliklerinden biri olan $.get() fonksiyonu ile verileri çağıracağız daha sonra ise window.setInterval() fonksiyonu ile bunları ekranda belli zaman aralıklarıyla refresh ediceğiz.
Resfresh diyorum fakat bu refresh sadece sayfanın belli bir bölümünde gerçekleşecek yani window.setInterval() fonksiyonuz aslında bir timer gibi çalışacak.
Şimdi kodlara bakalım;
01.//jQuery'i sayfaya dahil ettiğinizi varsayıyorum.02.03.function veriler(){04.05.$.get("test2.html",function(data){ jQuery('#veri').html(data); }); //test2.html sayfasındak verilerimizi aldık ve id değeri veri olan div'e bastırdık. aslında henuz bastırmadık şuan sadece bir fonksiyon.06.07.}08.09.window.setInterval("veriler()",3000); // Burada ise veriler() isimli fonksiyonu 3 saniyede bir çağırmasını istedim işte şimdi test2.html sayfasının içeriğini bastırdık.Sayfanın tamamı;
01.<head>02.<script type="text/javascript" src="jquery-latest.js"></script>03.<script language="javascript">04.05.function veriler(){06.07.$.get("test2.html",function(data){ jQuery('#veri').html(data); });08.09.}10.11.window.setInterval("veriler()",1000);12.13.</script>14.</head>15.16.<div id="veri"></div>Başlıktan da anlayacağınız gibi bu yazımda bir form ile sayfa yenilenmeden veri eklemeyi görüceğiz. Veriyi eklemek için dil olarak PHP’yi kullanacağım fakat ASP’de kullansanız mantık aynı.
Öncelikle jQuery ile gelen ajax fonksiyonumuza bir göz atalım;
1.jQuery.ajax({2.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir3.url: 'veri_isle.php',//Verinin gönderileceği sayfa4.data: 'veri=verimiz&veri_iki=verimiz_iki',//Sorgu cümlesi5.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri6.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri7.});Şimdi bu kod parçasını kullanarak basitçe verilerimizi veri_isle.php sayfamıza post ediceğiz.
1.<form id="veri-formu">2.<input name="veri"/> - <input name="veri_iki"/>3.<input type="button" onclick="gonder();" value="Gönder"/>4.</form>5.6.<div id="yazdir"></div>HTML formumuzu oluşturduk. Şimdide verilerimizi POST methodu ile gönderecek fonksiyonumuzu oluşturalım.
01.function gonder() {02.jQuery.ajax({03.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir04.url: 'veri_isle.php',//Verinin gönderileceği sayfa05.data: $('#veri-formu').serialize(),06.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri07.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri08.});09.}Şimdi burada değinmediğim bir nokta var data: ‘veri=verimiz&veri_iki=verimiz_iki’ bu gördüğünüz kısma tabikide sırayla giriş tanımlayıp daha sonra o girişleri veri yerine yerleştirmeyeceğiz daha kısa bir yolu var.
1.$('#veri-formu').serialize();Gördüğünüz kod parçası sayesinde id değeri veri-formu olan formdan giriş (input) isimlerini ve değerlerini (value) okur sonuç olarak aşağıdaki gibi bir sorgu cümlesi oluşturur.
veri=veri isimli girişe(input) girilen veri&veri_iki=veri_iki isimli girişe(input) girilen veri
Şimdide veri_isle.php sayfamızı oluşturalım.
01.function database($host,$username,$password,$database_name,$set_name){ 02.03.mysql_connect($host,$username,$password) or die("Hata"); 04.05.mysql_select_db($database_name) or die("Hata"); 06.07.mysql_query("SET NAMES '".$set_name."'"); 08.09.} 10.11.//Database fonksiyon bitti. 12.13.database("localhost","root","1234","vt adı","latin5"); 14.15.//Veritabanıma bağlandım. 16.17.$veri = mysql_real_escape_string($_POST["veri"]); 18.19.$veri_iki = mysql_real_escape_string($_POST["veri_iki"]); 20.21.//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim. 22.23.$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;24.@mysql_query($sql) or die("Hata algılandı"); Bu sayfada verilerimi post ile aldım ve veritabanıma ekledim. Şimdi sayfaların son hallerine bakalım;
index.php sayfamız;
01.<html>02.<head>03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">04.<title>jQuery:Sayfa yenilenmeden AJAX ile veri eklemek</title>05.<script type="text/javascript" src="jquery-latest.js"></script>06.<script type="text/javascript">07.08.function gonder() {09.jQuery.ajax({10.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir11.url: 'veri_isle.php',//Verinin gönderileceği sayfa12.data: $('#veri-formu').serialize(),13.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri14.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri15.});16.}17.18.</script>19.</head>20.21.<body>22.23.<form id="veri-formu">24.<input name="veri"/> - <input name="veri_iki"/>25.<input type="button" onclick="gonder();" value="Gönder"/>26.</form>27.28.<div id="yazdir"></div>29.30.</body>31.32.</html>veri_isle.php sayfamız;
01.function database($host,$username,$password,$database_name,$set_name){ 02.03.mysql_connect($host,$username,$password) or die("Hata"); 04.05.mysql_select_db($database_name) or die("Hata"); 06.07.mysql_query("SET NAMES '".$set_name."'"); 08.09.} 10.11.//Database fonksiyon bitti. 12.13.database("localhost","root","1234","vt adı","latin5"); 14.15.//Veritabanıma bağlandım. 16.17.$veri = mysql_real_escape_string($_POST["veri"]); 18.19.$veri_iki = mysql_real_escape_string($_POST["veri_iki"]); 20.21.//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim. 22.23.$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;24.@mysql_query($sql) or die("Hata algılandı"); Bu yazımda Jquery ile Ajax işlemlerinde direk olarak sayfamıza Ajax isteğinde bulunmayı göstermeye çalışacağım. Daha önce Jquery ile Ajax işlemlerinde genelde metotları, ashx (generic handler) dosyalarını ve web servisleri kullanmıştık. Şimdi ise bunlara asp.net sayfamızı ekliyoruz ve Ajax isteğini asp.net sayfamıza yapıyoruz. Böylelikle Jquery ile Ajax işlemlerini daha iyi kavramış olacağız ve daha güzel uygulamalar geliştirebileceğiz. Ayrıca Ajax isteğinde bulunabileceğimiz nesneleri de yani seçeneklerimizi de artırmış oluyoruz. Şimdi bu uygulama için yazmamız gereken Jquery kodlarına bakalım.
Asp.net sayfamıza Ajax isteğinde bulunmak için aşağıdaki html yapısına göre Jquery kodlamasını yapacağız. Ancak şunu belirteyim ki sayfa isteğinde datatype olarak bir tipimiz yok. Daha önce bunu ashx dosyalarına Ajax isteğinde bulunurken görmüştük (Buradaki yazımda). Datatype json olan Ajax isteklerimizi metotlara ve web servislere yapıyorduk. Sayfalara datatype olmadan Ajax isteği yapacağız. Örnek kodlama aşağıdaki gibi olacak.
//script kodlarımız
<script type="text/javascript">
$(document).ready(function(){
$("#linkler a").click(function(){
var adres = $(this).attr("href");
//adres değişkeni sayfa.aspx gibi bir değer oluyor.
$("#load").show();
$.ajax({
type:"post",
//url'de adres değişkeninden gelen sayfayı belirliyoruz.
//sonuçta url:"sayfa.aspx" gibi bir değer elde ediyoruz.
url:adres,
data:{},
success:function(msg)
{
$("#sonuc").html(msg); //sayfa sonucunu yazdırıyoruz.
$("#load").hide();
}
});
return false;
});
});
</script>
// html kodlarımız
<div id="linkler">
<a href="sayfa1.aspx">Sayfa 1</a>
<a href="sayfa2.aspx">Sayfa 2</a>
<a href="sayfa3.aspx">Sayfa 3</a>
</div>
Görüldüğü gibi eklenen sayfalara istekte bulunup bilgileri elde ediyoruz. İstekte bulunduğumuz sayfada tüm server kodları ve server kontrolleri çalıştırılmış olarak geliyor. Böylece Jquery ile Ajax işlemlerini daha iyi kavramış oluyoruz.
Bu yazımda Jquery ile hazırlamış olduğum sınırsız treeview uygulamasını nasıl yaptığımı anlatmaya çalışacağım. (Buradan görebilirsiniz.) Öncelikle uygulamayı tamamen kendi kodlamam ile oluşturdum ve ilk kez böyle bir uygulama yapıyorum. Bu nedenle eksiklikler ve hatalar olabilir. Ancak css ile düzenlemeler dışında hazırladığım uygulamada pek sorun yok gibi. Sonsuz ağaç ve alt ağaç yapısı oluşturabiliyoruz. Ancak belirttiğim gibi css düzeni ilgili birkaç sorun var. Onları da tamamladıktan sonra projelerde kulanılmaya hazır oldukça güzel bir uygulama olduğunu düşünüyorum. Nasıl yapacağımıza bakalım.
Öncelikle her uygulamada olduğu gibi belli bir html yapımız var. Bu yapı aşağıdaki gibi olmalı.
<div id="tree_frame">
<div class="tree">
<span>Tree 1</span>
<div>
<a href="#">Deneme</a>
</div>
<span>Tree 2</span>
<div>
<div class="tree">
<span>Alt Tree 1</span>
<div>
<a href="#">Deneme</a>
<a href="#">Deneme</a>
</div>
<span>Alt Tree 2</span>
<div>
<a href="#">Deneme</a>
<a href="#">Deneme</a>
</div>
</div>
<a href="#">Deneme</a>
<a href="#">Deneme</a>
</div>
</div>
</div>
Bu yapıya göre hazırlayacağımız Jquery kodlarımız ise şöyle olmalı.
<script type="text/javascript">
$(document).ready(function(){
$(".tree > div a").css("width","100%");
$(".tree > div span").css("width","100%");
$(".tree div .tree").css("display","block").css("padding","0").css("width","100%");
$("#ac").toggle(function(){
$(".tree span").css("background-image","url('acik.png')");
$(this).html("Hepsini Kapat");
$(".tree div").show();
$(".tree div .tree").css("display","block");
},function(){
$(".tree span").css("background-image","url('kapali.png')");
$(this).html("Hepsini Göster");
$(".tree div").hide();
$(".tree div .tree").css("display","block");
});
$(".tree span").click(function(){
var index = $(".tree > span").index(this);
if($(".tree > div:eq("+index+")").is(":hidden"))
{
ac(index);
}
else
{
kapat(index);
}
});
});
function kapat(index)
{
$(".tree > span:eq("+index+")").css("background-image","url('kapali.png')");
$(".tree > div:eq("+index+")").hide();
}
function ac(index)
{
$(".tree > span:eq("+index+")").css("background-image","url('acik.png')");
$(".tree > div:eq("+index+")").show();
}
</script>
Bu kodlar dışında önemli dir nokta da Css kodlarımız. Css kodlarını örnek sayfada görebilirsiniz. Ancak css ile bazı sıkıntılar var. Link genişlikleri her ağaç düzeyinde aynı olmuyor. Bu sorunu Jquery kodlaması ile halledebileceğimi düşünüyorum. Ancak bu sorun ile fazla ilgilenemedim. Önemli olan sınırsız ağaç uygulamasını yapmaktı. Biraz uğraşsamda sonunda yapabildim. Sorunları da en kısa sürede çözmeyi umut ediyorum.
Hazırlamış olduğum uygulamayı buradan görebilir, buradan da indirebilirsiniz
jQuery, mouse pozisyonunu kolay bir şekilde algılamayı sağlar. Bunu yapabilmek için ise event’lerin .pageX ve .pageY özniteliklerini öğrenmeliyiz. Bu öznitelik de bize mouse’un nerede olduğunu pixel olarak gösterir.
Mouse Pozisyonunu takip etmek
Farenizi hareket ettirdiğinizde gördüğünüz gibi değerler sürekli olarak okunuyor ve güncelleniyor:
<script src="jquery.js" type="text/javascript"><!--mce:0--></script> <script type="text/javascript"><!--mce:1--></script> <h2 id="status"> 0, 0</h2>
Yukarıda gördüğünüz örneğin kaynak kodu aşağıdaki gibi:
0, 0
DIV’e nereden tıklanılmış?
.pageX ve .pageY herhangi bir event içerisinde iyice okunabilir, sadece .mousemove() ile değil. Örneğin, belki siz tam olarak DIV içerisinde nereye tıklanıldığını öğrenmek istiyorsunuz: İşte size bir örnek:<script src="jquery.js" type="text/javascript"><!--mce:4--></script> <script type="text/javascript"><!--mce:5--></script> <h2 id="status2"> 0, 0</h2> <div id="special" style="background: #cccccc none repeat scroll 0% 0%; width: 100px; height: 100px;"> Herhangi bir yere tiklayin</div>Mouse pozisyonunu gösteren eklentiler
Aşağıdaki eklentileri inceleyip kullanabilirsiniz.
Yardımlarından dolayı nlogax, Getty, John, ve diğer irc kullanıcılarına teşekkürler!
Kaynak gösterdiğiniz taktirde istediğiniz platformda paylaşabilirsiniz. Bu arada sayfa içerisinde bazı kodlar bozuk gözüküyor, yani uygulama tam olarak çalışmıyor. Belirtilen kodları kendiniz test ettiğinizde herhangi bir sorun yaşamıyorsunuz, bilginize.
Yazar: Mehmet Tahta
Kaynak: JQuery Events: Mouse Pozisyonu