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 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
Daha önceki derslerimizde, jquery başlangıç ve jquery ile fade, slide, hide-show metodlarını nasıl kullanabileceğimiz hakkında 2 video uygulamasını görmüştük.Bu dersimizde ise jQuery ‘de animate metodu ile objelere hareket kazandırma ve slayt oluşturmak için ön başlangıç yaptık..jQuery Daha kaliteli video için videoyu indiriniz.
Video içeriği;
Dersimizde bulunan index.html dosyasında yaptığımız bazı değişikliklerden bahsedecek olursak;
<style type="text/css">
#kutu
{
background: orange;
width: 300px;
height: 300px;
position: relative;
}
</style>
position: relative; kodu belirlediğimiz katmanın posizyonunu bizim vereceğimiz bir bildirim ile konum değişikliliğine girebilmesini sağlar
<script type="text/javascript">
$(function() {
$('#kutu').click(function() {
$(this).animate({
"left" : "300px"
});
$(this).animate({
"width" : "100px",
"height" : "50px"
});
});
});
</script>
$(this).animate({ ile daha önce kullandığımız fonksiyondaki elemanımızın sürekliliğini devam ettirdiğimizi ve aynı elamanla yeni bir fonksiyon oluşturduğumuzu belirttik.
Daha sonra animate fonksiyonu ile “kutu” olarak belirlediğimiz katrmana bir fonksiyon atadık ve ;
“left” : “300px”
“width” : “100px”,
“height” : “50px”
Komutları ile sayfa boyunca 300px sürüklenmesini, genişlik ayarının 100px‘e düşmesini ve yüksekliğininde 50px‘e düşmesini $(‘#kutu’).click(function() { fonksiyonu ile “kutu” katmanına tıklanması ile sağladık.
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
Merhaba arkadaşlar. İlk dersimizde jQuery’i kullanabilmek için ne gibi alanlardan faydalanabiliriz, jquery‘i sitemize nasıl import ederiz ve fadeOut yöntemini nasıl kullanırız sorularını cevapladık.Bu dersimizde ise jQuery‘de kullanabileceğimiz;
fadeOut, fadeIn, slideUp, slideDown, hide ve show metodlarını gösterdim.Daha kaliteli Görüntü için Videoyu indiriniz
Ben video izlemek istemiyorum diyen arkadaşlarımız için kısa bir özet geçeceğim.Download butonunu kullanarak indirdiğiniz ders içeriğinde, index.html ve jquery.js dosyasını bulacaksınız.
İndex’imizin içerisinde aşağıdaki bölümleri kullandık;
<style type="text/css">
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
</style>
Bir önceki dersimize nazaran bu dersteki CSS farklılıkları;
display: none; :
kutu olarak adlandırdığımız katmanın görünmemesini sağladı.
p a
{
color: orange;
}
<p> olarak kullandığımız paragraf belirtecinin içerisindeki link renklerini turuncu (orange) yapmamızı sağladı
</p>
<p style="text-align: left;"><script type="text/javascript">
$(function() {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});
});
</script></p>
<p style="text-align: left;">
Bir önceki dersimizde gördüğümüz fadeOut yöntemini bu dersimizde slide ve hide / show metordlarıyla gösterdik.
Daha sonra
$(‘p a’).css(‘color’ , ‘green’);
olarak belirttiğimiz fonksiyon, linklerimizden herhangi birine tıklanıldıktan sonra,css kodlarında belirttiğimiz p a belirtecinin rengini green olarak değiştirmesini sağladı.
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
Merhaba arkadaşlar.. Bildirgec‘ te ve blogumuzda pm olarak özel istekte bulunan arkadaşlara yöenlik jQuery yeni başlayanlar için dersler hazırlayacağım. Bu konumuzda jQuery öğrenebilmek içni ilk derimizdir.
İlk başta Video ya geçmeden önce jQuery kullanabilmek için jquery resmi sitesinden jQuery Javascript dosyasını indiriniz.Daha sonra Video’yu izleyerek jQuery kalıpları nasıl oluşturulur ve ilk olarak nereden başlamalıyız sorularınıza cevap alabilirsiniz.. Umarım faydalı bir kaynak olmuştur..Daha kaliteli Görüntü için Videoyu indiriniz
jQuery kullanabilmek için videodada gösterdiğim gibi jquery.com sitesinden indirdiğiniz jquery.js dosyası eğer index.html olarak kullandığımız sayfamız ile aynı klasördeyse (farklı klasördeyse yolunu belirtmeniz gerekiyor)aşağıdaki kodu <head> .. </head> tagları arasına giriniz ve videoda gösterdiğim uygulamaları html dosyanıza işleyiniz.
<script src="jquery.js" type="text/javascript"></script>
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
JQuery ile hayatımızı kolaylaştıran uygulamalardan bahsetmeye devam ediyoruz. Bu sefer web sitelerimizin artık her alanında bulunan formları, nasıl istediğimiz kriterlere göre doldurtabileceğimizi göreceğiz.
JQuery ile form üzerinde doldurulan verileri kontrol edebilmek için bazı pluginler mevcut. Ben bunlardan JQuery Validation eklentisini tercih ediyorum. Bu eklentiyi kullanabilmek için öncelikle şuradan indirmelisiniz. Ayrıca projenize/sayfanıza JQuery’yi de dahil etmeniz gerekli. Bunları aşağıdaki şekilde yapabilirsiniz:
Bundan sonra yapmanız gerekn doğrulama işlemlerinin yapılacağı formu belirtmek ve bu formda hangi alanlara ne gibi kontroller uygulanacağını bildirmek. Ayrıca her alana ve kontrole özel hata mesajları da hazırlayabilirsiniz.
Örnek olarak sadece kullanıcı adı ve e-mail adresinin girilebileceği 2 field’a sahip bir formumuz olsun. Bu formda geçerli e-mail adresi kontrolü yapalım. Kullanıcı adı da sadece sayılardan oluşabilsin. Ayrıca iki alanın da doldurulması zorunlu olsun. Bu işlemleri yapacağımız JQuery kodumuz aşağıdaki gibi olacaktır :
Gördüğünüz gibi anlatımı bile koddan neredeyse daha uzun sürdü 
Burada #formid formumuzun ayırt edici id’si, userid kullanıcı adı alanının name değeri, email de e-mail alanının name değeridir. Plugin ile ilgili çok fazla sayıda örnek uygulamaya şuradan ulaşabilirsiniz
Her ne kadar şu “otomatik” kelimesini sevmesem de burada kullanmam gerekiyordu Bir projede gerekli olduğu için bu tarz bir uygulamaya ihtiyaç duydum.
Örneğin sayfanızın üst kısmı çok uzun görsel ve menülerden oluşuyor ve içeriğiniz alt tarafta kalıyor. Bu durum ana sayfa için doğal karşılanırken detay sayfalarda içeriği görüntülemek için sayfayı aşağı scroll ettirmek gerekiyor. Hal böyle olunca pek çok ziyaretçi sayfadaki içeriği göremeden sayfadan ayrılabiliyor ve sayfanın yenilendiğini bile farkedemeyebiliyor. Bu durumda ne yapmamız gerekiyor? Detay sayfalarda, sayfa yüklendiğinde otomatik olarak sayfayı içeriğin olduğu bölüme odaklamak !
Bu işlemi yapabilmek için tabiki JQuery‘den faydalandım. Sayfayı çeşitli noktalara, farklı efektlerle kaydırabilmek için geliştirilmiş ScrollTo isimli bir plugin mevcut. Bu plugini kullanabilmek için tabiki öncelikle JQuery’yi sayfanıza dahil etmeniz gerekiyor:
Daha sonra da şuradan ScrollTo eklentisini indirip sayfanıza eklemelisiniz.
Bu işlemlerden sonra sayfanıza eklemeniz gereken kod ise şu şekilde:
Burada sayfa yüklendiğinde #content id’sine sahip element’imiz sayfanın odak noktası oluyor. Sondaki duration değeri ise bu kaydırma işleminin yapılacağı süreyi belirliyor. Bunun gibi easing, axis,margin vs. gibi çeşitli pek çok parametre de bulunuyor.
Umarım bu uygulama pek çok kişinin işine yarar 
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>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