Browse Tag

div

jQuery ile Tıklanan Linki Sayfayı Yenilemeden Açmak

Merhaba arkadaşlar. Bugünkü yazımda sizlere JQuery ile tıklanan bir bağlantıyı aynı sayfa içindeki bir div içerisinde sayfayı yenilemeden açmayı anlatmaya çalışacağım. Böylece siz de artık bir çok web sayfasında kullanılan bu yöntemi kullanabileceksiniz.

İlk olarak sayfamızda JQuery kullanmak için sayfamızın başında JQuery’i çağırmamız gerekiyor. Bunun için iki yol izleyebilirsiniz. Birincisi ki ben de bunu tavsiye ederim JQuery’i indirmek ve ona referans vermek; ikincisi ise direk JQuery sayfasına referans vererek kullanmak ki burada hızlı olması açısından ben bunu tercih edeceğim.

Şimdi sayfamıza JQuery’i çağırıyoruz

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

Daha sonra tıklanan bağlantıya göre içeriği güncellenecek bir div oluşturuyoruz.

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

Şimdi de div’imizin içeriğini değiştirmek için kullanacağımız bir bağlantı oluşturalım

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

Farkettiğiniz gibi oluşturduğumuz linkin href kısmına bir değer yerine # yazdık. Böylece linkimize tıklandığında bir sayfa açmamasını, az sonra oluşturacağımız java script koduyla istediğimizi yapmasını sağlayacağız. Tabi href kısmı da kullanılabilir ancak ben burada en basit anlaşılabileceğini düşündüğümü yazdım.

Diğer taraftan linkimize bir class ve div’imize de bir id atadığımızı görüyorsunuz. Bunların nedenini de açıklayalım hemen. Div’e bir id atayarak yazacağımız script ile o div’i seçebiliyoruz. Bu nedenle unutmayalım aynı sayfada aynı isimde sadece bir id olabilir; yoksa kodlarımız çalışmayacak ve hata verecektir. Eğer sayfamızda birden fazla id kullanacaksak her birine farklı isim vermeliyiz. Class’larda ise durum daha farklı. Aynı sayfa içinde istediğimiz kadar aynı isimde class kullanabiliriz. Böylece aynı isimleri taşıyan class’lara istediğimizi, hepsi için tek tek kod yazmamıza gerek kalmadan uygulayabiliriz. Linkimize de bu yüzden class verdik zaten. Aynı class adına sahip bütün linklerle oluşturduğumuz div içinde farklı sayfalar açabileceğiz ancak bunun için de her linke farklı bir id daha atayacağız ki script kodumuz gelen id’ye göre ayrı ayrı davranabilsin. Fakat bunu bir sonraki yazımda anlatacağım.

Daha fazla uzatmadan ilgili script kodumuzu da yazalım. Öncelikle kodumuzun ne zaman çalışmaya başlamasını yani ne zaman aktif olmasını istiyoruz? tabiki sayfamız açıldığında. O zaman document ready bloğunu kullanacağız Genelde sayfa yükleme süresini geciktirmemesi için java script kodları sayfanın altına yazılır. Ben de öyle yapacağım ama dikkat etmemiz gereken bir nokta var. Bir sayfada sadece bie kez document ready bloğu olur. Zaten ikincisine de gerek yok. Bu blok içine kullanmak istediğimiz herşeyi yazabiliyoruz zaten.

Bloğumuzu aşağıdaki gibi yazalım

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

	});
</script>

 Şimdi sıra geldi bu blok içine yazacağımız koda ki böylece tıklanan linkimiz div’in içeriğini değiştirebilsin. Oluşturduğumuz icerik_degistir isimli class’a sahip linkimize tıklanınca bir fonksiyon çalıştırmak istiyoruz. Dolayısıyla document ready bloğumuzun içine aşağıdaki kodu yazıyoruz

$(".icerik_degistir").click(function(){

});

 Şimdi de bu fonksiyonumuzun içine, linkimize tıklandığında ne olmasını istediğimizi yazalım

 $('#icerik').load("ornek2.php");

 Burada gördüğünüz gibi icerik id’sine sahip div’imizin içine ornek2.php sayfamızı yükledik. Burada dikkat etmemiz gereken bir nokta var. Çağıracağımız sayfa kendi sitemize ait bir sayfa.. Dışardan bir sayfa çağırmak istersek kodumuz daha farklı olacaktı onu da başka bir yazımda anlatmaya çalışırım.

Bütün bunların sonunda script kodumuzun tamamı aşağıdaki gibi olacak

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Dikkat ettiyseniz icerik_degistir’in önünde bir nokta var. Bu icerik_degistir’in bir sınıf olduğunu gösterir. Aynı şekilde icerik’in önündeki diyez (#) işareti de onun bir id’yi temsil ettiğini gösterir.

Siz de önce kodu yazdığımız sayfadaki div içinde açılacak başka bir sayfa oluşturun ve adını kodu aynen uygulayacaksanız ornek2.php olarak verin.

Sonuçta yazdığımız kodun tamamı aşağıdaki gibi olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Yukarıdaki kodu bir html ya da php sayfası olarak kaydederseniz çalıştığını göreceksiniz. Tabi çalışması için basit bir ornek2.php sayfası oluşturup aynı dizine koymanız ve bir php server üzerinde çalışmanız kaydıyla… İsterseniz ornek2.php yerine ornek2.html kullanarak php den bağımsız çalışabilirsiniz.

Bir sonraki yazımda sayfayı yenilemeden aynı sayfa içinde form gönderme yani POST ve GET‘in nasıl yapıldığını anlatmaya çalışacağım

CSS’de div Kavramı

Merhaba arkadaşlar bu yazımızda, bundan sonraki bir kaç yazımın temelini oluşturan divkavramına başlıyoruz. Öncelikle kısaca div nedir niçin kullanmamız gerekir gibi kavramlardan bahsettikten sonra CSS ile divlerin nasıl kullanılacağına ve ne tür efektler verileceğine dair yazılar yazmayı planlıyorum.

Div kavramını daha esnek tablolar gibi düşünsek çok ta yanlış birşey söylemiş olmam herhalde. Normalde sayfa içeriğinin istediğimiz yerlerde düzgün çıkması için <table> etiketiyle oluşturduğumuz tablolar, günümüzde gelinen noktada artık istediğimiz kolaylığı sağlayamayabiliyor. Bu nedenle içeriğimizin istediğimiz gibi görünmesi için sayfanın istediğimiz bölümüne yerleştirebildiğimiz divleri tercih ediyoruz. Öyle ki bu divleri sayfa aşağı yukarı kaydırılsa da hep sabit duracak şekilde ayarlayabiliyoruz; ya da dikkat çekmek istediğimiz içeriğimizi belirli bir süre için tüm içeriklerin üstünde gösterebiliyoruz ki facebook’taki fotoğraflar buna örnek gösterilebilir.

Konuyu daha fazla uzatmadan divler için yüzen katmanlardır gibi diyelim ve konunun daha iyi anlaşılması için aşağıdaki kodu inceleyelim

<html>
<head>
<title>Katman Örneği</title>

<style type="text/css">

	#ornek_div {

		width:300px;
		height:90px;
		background-color:#8F1FD3;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		color:#FFFFFF;
		}

</style>
</head>
<body>
<h2>Örnek olarak oluşturduğunuz div</h2>

<div id="ornek_div">
Oluşturduğumuz divin için her türlü yazı ve resim gibi içeriği yerleştirebiliriz
</div>
</body>
</html>

Yukarıdaki örnekte önce CSS ile bir id oluşturduk ve daha sonra bu id yi oluşturduğumuz dive atadık. Konuyu daha önceki derslerimizde işlediğimiz için bunun ne anlama geldiğine değinmeyeceğim. Yazdığımız kodu bir HTML dosyası olarak kaydederek çalıştırdığımızda aşağıdaki sonucu elde ederiz.

Resimde görüldüğü gibi sanki tek hücreli bir tablo oluşturmuşuz gibi görünüyor. Ancak bu yapı tablolardan çok daha fazla esneklik sunar.  Örneğin divleri sayfanın istediğiniz yerine konumlandırabiliriz.

İsterseniz şimdi kısaca divleri sayfamızda konumlandırmak için gerekli kodlara ve açıklamalarına göz atalım

Kod Alabileceği Değerler Etkisi
position static: nesneye pozisyon verilmeyeceği anlamına gelir. relative: nesneye sayfadaki doğal yeri baz alınarak değer verileceğini belirtir. absolute: nesneye tarayıcı penceresinin sol üst köşesi baz alınarak değer verileceğini belirtir. Nesneye nasıl pozisyon verileceğini belirten bir özelliktir. Daha sonraki yazımızda inceleyeceğimiz gibi bu özellikle div’in verilen değerleri sayfayımı yoksa bir önceki nesneyimi referans alarak yerine getireceğini belirler.
top pt, px, cm değerinden pozitif ya da negatif bir ölçü Nesnenin üst sınırının orjine olan uzaklığı
left pt, px, cm değerinden pozitif ya da negatif bir ölçü Nesnenin sol sınırının orjine olan uzaklığı
right pt, px, cm değerinden pozitif ya da negatif bir ölçü Nesnenin sağ sınırının orjine olan uzaklığı
bottom pt, px, cm değerinden pozitif ya da negatif bir ölçü Nesnenin alt sınırının orjine olan uzaklığı
height pt, px, cm değerinden bir ölçü Divin yüksekliğini belirler
height pt, px, cm değerinden bir ölçü Divin yüksekliğini belirler
clip:rect(a,b,c,d) pt, px, cm değerinden pozitif ya da negatif bir ölçü Divin görünür kısmını sınırlayan dikdörtgenin boyutsal özellikleri
overflow visible, hidden, auto, scroll Pozisyon verilen nesnenin kendisi için ayrılmış olan bölgeden dışarı taşan kısmının tarayıcı tarafından nasıl muamele göreceğini belirleyen özelliktir.
visibility visible, hidden Nesnenin görünülürlüğünü kontrol eden özelliktir.
z-index  Bir tamsayı  Nesnelerin üst üste istiflenmesi durumunda hangi sırada bulunacağını belirleyen özelliktir.

Yukarıdaki tablodaki kodlardan position, top ve left parametreleirini kodumuza ekleyince kodumuz ve elde ettiğimiz sayfa aşağıdaki gibi oldu.

<html>
<head>
<title>Katman Örneği</title>

<style type="text/css">

	#ornek_div {

		width:300px;
		height:90px;
		background-color:#8F1FD3;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		color:#FFFFFF;
		position:absolute;
		top:160px;
		left:250px;

		}

</style>
</head>
<body>
<h2>Örnek olarak oluşturduğunuz div</h2>

<div id="ornek_div">
Oluşturduğumuz divin için her türlü yazı ve resim gibi içeriği yerleştirebiliriz
</div>
</body>
</html>

 

Görüldüğü gibi oluşturduğumuz divin pozisyonunu rahatça değiştirdik. Bunu tablolarda bu kadar rahat yapamazdık.

Bu yazımızda divlere kısaca giriş yapmış olduk. İlerleyen yazılarda daha kapsamlı konu ve örneklerde görüşmek üzere hoşcakalın.