(X)HTML sayfalarında bir çok tag iç içe geçmiş durumda olabilir. Bir katmanda içeriği oluşturan paragraflar, paragrafların içinde bağlantılar vs. olabilir. Bütün bu durumlarda hiyerarşik seçicileri kullanarak sayfamız içinde belli bir bölümde yer alan (tags) etiketleri seçebiliriz. Bu video da 4 hiyerarşik seçiciyi anlatmaya çalıştım.

Bu bölümde neler var?

1. Çocuk Seçiciler
2. Gelişmiş Çocuk Seçiciler (ebeveyn > cocuk)
3. Gelişmiş Çocuk Seçiciler (önceki + sonraki)
4. Gelişmiş Çocuk Seçiciler (önceki ~ kardeşler)

Çalışmaya Hazır Default klasörü indir

Bu konuda yayınlanmış diğer videolar:

• jQuery Temel Seçiciler (2.Gün)
• jQuery Kurulum (1.Gün)

Yorumların benim için önemli, paylaşırsan sevinirim.

jQuery ile websitenizi şenlendirmek çok zor değil, jQuery’i tam olarak kullanmak için ise seçicileri iyi anlamakta fayda var. Bir (X)HTML içinde etiketler(tags) farklı sevilerde iç içe geçmiş durumda olabilir, her ne şekilde olursa olsun jQuery zengin seçici özellikleriyle bu karmaşık yapı içersinde bir elemanı seçmek için bir çok yöntem sunar. Bir paragraf etiketini seçmekten, belli bir ebeveyne sahip çocuk etiketleri seçmeye kadar birçok özellikli seçici mevcuttur. Seçiciler önemlidir; jQuery bir elemana bir özellik ataması yaparken mutlaka o elemanın seçili olması gerekir

Bu bölümde neler var?

1. XHTML Eleman (Tag) Seçicisi
2. Sınıf (Class) Seçicisi
3. Özellik (ID) Seçicisi
4. Tüm Elemanların (*) Seçicisi
5. Çoklu Sınıf (.class1.class2) Seçicisi
6. Çoklu Eleman (p,a,div) Seçicisi

Çalışmaya Hazır Default klasörü indir

Bu konuda yayınlanmış bir önceki video bağlantısı: jQuery Kurulum (1.Gün)

Yorumların benim için önemli, paylaşırsan sevinirim.

Çalışma Dosyaları:

1. default klasörü indir
2. Tamamlanmış bölüm dosyası indir

Yorumların benim için önemli, paylaşırsan sevinirim.

Web 2.0 teknolojilerinin hayatımıza girdiği günlerden beri web sitelerinin birbiri ile etkileşimleri artmakta, Web 2.0 felsefesi gereği facebook, friendfeed, digg, twitter gibi araçlardan verileri paylaşmak, bir araya getirmek çok revaçta, kendi sitelerine facebook, vimeo, twitter, digg gibi birçok Web 2.0 platformunda yayınladıklarını ekleyen birçok blog yazarı var. Bu anlamda twitter, friendfeed, bizim blogçularımız arasında en çok kullanılanlar sanırım. Ancak bu tür uygulamalar yazmak isteyen kodcular genelde PHP, JavaScript, RegExp, Asp, JSON, Ajax gibi birçok yapı hakkında bilgi sahibi olması gerekliği olduğu düşüncesiyle bu işi hazır kodlara bırakıyor, ben bugün yalnızca JQuery, JavaScript kullanarak Twitter etkinliklerimizi bloğumuza nasıl ekleriz ondan bahsetmek istiyorum. Bu yazı temelde Twitter uygulaması gibi gözükse de JSON verilerini okumayı, biçimlendirmeyi içeriyor. Hadi çok uzattım artık yazayım;

JSON Mantığını Anlamak!

AJAX uygulamalarında JSON JavaScriptler tarafından daha kolay okunabilen veri kaynakları olduğu için sıklıkla XML’ye tercih edilirler. Nispeten daha yalın bir görünüm sunduğu içinde anlaşılması gayet kolaydır. JSON hakkında daha fazla bilgi için http://www.json.org/json-tr.html adresine bakabilirsin.

Twitter bize XML ve JSON formatlarında veri kaynakları sunuyor. Bütün bu Twitter Api kaynaklarına buradan göz atabilirsin. Genellikle XML içerik bilgisi sunulmuş olsa da http://tiny.cc/rhRma bağlantısını kullanarak sonuçları JSON olarak görebilirsin. Şimdilik burada bir ara verelim.

JQuery Kullanarak JSON verilerini Okumak!

JQuery’nin zengin kütüphanesi içinde JSON biçimli verileri okumak için özel ve güzel bir fonksiyonumuz var.  JQuery.getJSON() bu fonksiyonu kullanarak AJAX işlemlerine hiç bulaşmadan JSON verilerini okuyabiliyoruz.

JQuery.getJSON(URL,[data],callback) şeklinde tanımlanan fonksiyonumuz ile URL parametresi olarak verilen sorgu sonucu geri dönen JSON verisini alıyoruz ve sonrasında bize bu verileri işlemek kalıyor.

Kullanımı:

$(document).ready(function(){
	var url = "http://twitter.com/status/user_timeline/bitlimakina.json?count=1&callback=?";
	$.getJSON(url, function(data){
		$.each(data, function(i,results){
			$("#icerik”).html(results.text);
 		});
  	});
});

Şimdi yukarıdaki kullanımdan kısaca bahsedelim;

URL kısmı; Bu sorgu sonucunda twitter.com’dan geriye bitlimakina kullanıcısına ait son durum bilgileri (ben twitter da ne paylaşmışsam o işte) JSON formatında geri gelecek. Gelen veriler function(data) içindeki data’ya aktarılmış olacak sonuçta. Data değişkeni bir array(dizi) dir. Daha sonra bir bu dizinin elemanları içinde $.each fonksiyonunu kullanarak geziniyoruz ve her elemanı da results diye bir değişkene kaydediyoruz ki içindeki verileri işleyebilelim.url değişkeninde verilen stringi http://tiny.cc/rhRma adresinde incelersen ne demek istediğimi daha iyi anlamış olacaksın. ?count=1 kısmı son twitter paylaşımımı ifade ediyor. 2-3-5, kaç tane istiyorsan buraya yazabilirsin.

URL de verdiğimiz sorgu sonucunu şimdi buraya yazalım.

Ben user sekmesine tıklamadım. Orada da bir sürü veri var aslında. Amacımız son twitimi almak bunun içinde $(“#icerik”).html(results.text); satırını kullanıyorum. Bu arada söylemeden geçmeyelim HTML sayfamda bir <div id=”icerik”></div> katmanı oluşturmuştum. Sonuç olarak HTML sayfamda bitlimakina kullanıcısının son twiti gözükmüş oldu.
Tek başına JQuery kullanarak JSON verilerini okumak bu kadar basit. Şimdi işleri biraz zorlaştıralım.
Önce sonuca bakalım.

Sonucu online olarak incelersen göreceksin ki linkler dahil her şey bir text ve linkler çalışmıyor. Şimdi bu sorunu çözmek için ihtiyacımız olan şey “Regular Expression” (düzenli ifadeler). Yazının başında demiştik ki her şey JavaScript ile olacak o zaman JavaScript kullanarak RegExp nasıl yaparız ona bakalım.

JavaScript ve RegExp Kavramlarını Harmanlamak!

RegExp işlemlerini gerçekleştirmek için aslında abarttığım kadar karmaşık bir şey yapmayacağız çünkü JavaScript bize her türlü imkanı vermiş. Biraz abartmazsak tadı çıkmaz dimi. JavaScript de metin içinde regexp kuralımıza uyan kısmı yenisi ile değiştirmek için replace () fonksiyonu kullanılıyor. Bundan da önce nasıl bir şeye ihtiyacımız var ona bakalım. Biz Twitter dan  verileri aldık öyleyse bu veri içindeki url leri düzenleyecek bir fonksiyona ihtiyacım var. Şöyle olsun;

function urldondur(metin){
//düzenli ifade tanımı yapayım,
//metin içinde bulayım,
//yerine <a href=”link”>link</a> yazayım
}

O zaman JQuery için yazalım;

var urldon = function(metin){
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/g
var result = metin.replace(regexp, function(url){
return '<a href='+url+'>'+url+'</a>';
});
return result;
}

Yukarıda yazdığım var regexp tanımını anlamamış olabilirsin, Bunun için birçok araç var. Unutmadan yukarıdaki regexp ifadesini de ben yazmadım.  Google söyledi…  Kullandığım programı buradan indirebilir veya buradan buradan online kullanabilirsin.
Son Not; Eğer JSON içersinde user sekmesi içinden bir veri almak istersen results.text satırını results.user.neyseo olarak değiştirmen yeterli.
Şimdi Son uygulamanın kodlarını verelim.
Head tagları arasına

body tagları arasına bunu yazalım;

İstersen hiç yazma indir.
Yukarıda verdiğim kodlamanın yorumunu sizlere bırakıyorum. Kıymetli yorumlarını okumaktan keyif alacağım!

Kaynaklar:

RegExp : http://bit.ly/tsPhv
RegExp : http://bit.ly/J7R18
JSON : http://www.json.org/json-tr.html
Twitter Api : http://apiwiki.twitter.com/Twitter-API-Documentation
Free RegExp App: http://www.gskinner.com/RegExr/desktop/

Baloncu eklentisi 4 renkte 2 yönde kulp içerirken, yaptığım güncelleme ile artık 4 yönde kulpa sahip oldu.

Daha önce yayınladığım. Tooltipi biraz daha geliştirerek ve güzelleştirerek tekrar hazırladım. Bu tooltip de iki farklı yönde ok ve dört farklı renk seçeneği var. Kodlamadan bahsetmiyecem fakat sayfaya nasıl eklenir tekrar hatırlatalım.

Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel

Yukarıda da gördüğünüz gibi baloncu.js ve style.css tanımlarının doğru şekilde yapılması gerekiyor. Sonra balon göstermek istediğiniz linklerde “rel” etiketi içinde 16 farklı tanım yapabilirsiniz ve title etiketinde verdiğiniz bilgiyi görüntüleyebilirsiniz.
B1L — Balon 1 sol işaretçi anlamına gelmektedir.
B harfinden sonraki sayı renk L, R, B, T harfi ise kulp yönünü belirtmektedir.
(Demo) Örnek sayfayı burada görebilirsiniz.
(Project File) Proje Dosyalarını indirmek ve kullanmak için buraya tıklaman yeterli.

Bir de yorum yaparsan bende güzel mi değilmi anlamış olurum. Hadi üşenme!

JQuery çalışmalarıma bir yenisini daha ekledim “slideShowTr”. SlideShow adında JQuery ile yapılmış bir benzeri kod yazarken çok işime yaradı. Peki farkı ne resimleri yalnızca bir div tagı içine yazmanız yeterli oluyor gerisini kendisi hallediyor. Başka resimleri ve slayt alanını isteğe bağlı olarak boyutlandırabiliyorsunuz. Daha ne olsun
Örnek uygulama için buraya tıkla..

Öncelikle HTML dosyamıza bakalım.

Html dosyamız içersinde slideShowTR sınıfına sahip bir div içersinde resimleri tanımladık. rel etiketine dikkat edin bu bölümde resimle ilgili bir başlık ve resimin açıklaması yapılmış durumda. WordPress kullananlar bunu resim yüklerken yazabilirler.

Şimdi slideShowTR css dosyasına göz gezdirelim.

.slideShowTR img {border:none;}
.slideShowTR ul,.slideShowTR  li {
	list-style-type:none;
	text-decoration:none;
}
.slideShowTR{
	position:relative;
	width:448px;
	height:336px;
	overflow:hidden;
	background-color:#CCC;
	border: #000 10px solid;
}
.slideShowTR  ul.imageList {
	position:relative;
}
.slideShowTR  ul.imageList li {
	position:absolute;
	float:left;
}
.slideShowTR .show {
	z-index:999;
}
.slideShowTR div.baslik{
	position:absolute;
	background-color: #000;
	width:448px;
	height:1px;
	display:block;
	z-index:1000;
	bottom:0px;
	color:#FFF;
	text-indent:10px;
}
.slideShowTR div.baslik h3{
	color:#dfdf0a;
}

Son olarak JQUERY kodları burda

/*
 * JavaScript slideShowTR
 * Copyright (c) 2009 Yücel YILMAZ (bitlimakina.com)
 * Licensed GNU General Public License.
 */
$(document).ready(function(){
	//Slide alınının büyüklük değerlerini girerek slideShowTR fonkisyonunu çağırdık.
	slideShowTR(640,480);

});
 function slideShowTR(WSize,HSize) {
	//Çerçeve boyutlarnı yeni değerlere göre değiştirdik.
	$(".slideShowTR").css({width:WSize,height:HSize});
	// Tüm resim dosyalarını li etiketleri arasına aldık.
	$(".slideShowTR img").wrap(document.createElement("li"));
	// Resimlerin genişlik değerini Slide genişliğine göre güncelledik.
       ......
       ......
}

Uzun olduğu için yukarıda bütün JS kodunu vermedim.İsteyenler indirdikten sonra inceler. Her satırın üstünde açıklamasına dilim döndüğünce yer vermeye çalıştım. Umarım olmuştur.
İlgilenenler kodları satır satır inceleyebilir ancak şimdi ben kodlarla ilgilenmeden nasıl kullanacağız onu anlatayım.

İlk olarak buradan slideshowtr gerekli dosyaları indirin.
Hem WordPress kullanıcıları hemde HTML sayfalarında kullanacak olanlar öncelikle aşağıdaki tanımlama satırlarını kendi sayfalarına eklemeli ve stil dosyası ile slideShowTr.js dosyalarının konumunu doğru olarak yazdığından emin olmalılar.

Sayfanın başında verdiğim HTML sayfasında da görüleceği gibi slide şeklinde göstermek isteğiniz resimleri class=”slideShowTR” olan bir div etiketi içersinde yazmalılar. rel etiketi wordpress kullananlar için problem olmuyacaktır. Eğer resim yüklerken yazarsanız büyük rahatlık olucaktır.

Yapacak başkada bir şey yok. Örnek uygulama için buraya tıkla..

Eğer slideShowTR boyutlarını değiştirmek isterseniz. JS dosyasında slideShowTR(640,480) satırındaki rakamları değiştirmeniz yeterli.

Umarım beğenenler olur, yorum yazarsanız sevinirim.

Sanırım yeni bir yazı yazmanın zamanı geldi. Bu yazıda linkler hakkında küçük açıklamalar gösterebileceğimiz bir uygulamadan bahsedeceğim. Kendi kodlamam olan bu uygulama için uzun uzun kodlamanın nasıl yapıldığından değil sayfalarımızda nasıl kullanırız ona değinelim. Örnek Uygulama Balon adlı JQuery eklentisi sayfamıza eklendiğinde title etiketi içeren tüm linklerde bir açıklama balonu (tooltip) görüntüler ve title etiketinde yazılan metni ekrana getirir. JQuery kodları üzerinde değişiklikler yaparak farklı amaçlarla da bu balonları kullanmanız elbette mümkün.

Aşağıda vermiş olduğum satırları çalışma sayfanıza ekleyerek başlayabilirsiniz. Tabi ki öncelikle burdan gerekli dosyaları indirmelisiniz.

1
2
3
4
5

<head>
  <script src="js/jquery.js"></script>
  <script src="js/balon.js"></script>
  <link type="text/css" href="js/css/balon.css" rel="stylesheet">
</head>

Örnek Uygulama (Example) Evet sonucu eğer beğendiyseniz sitelerinizde kullanmak size kalmış.

Örnekler:

1-Tüm tagları seçmek.

  $(“*”)

2-Tüm paragrafları seçmek.

  $(“p”);

3-Tüm div leri seçmek.

$(“div”);

4-Sınıf Seçiciler

  $(“.kirmizi”);//tüm kırmizi adlı sınıfları seçer.

5-Gelişmiş Seçiciler

  $(“div”,xml.responseXML);
  $(“input:text”, document.forms[0]);
  $(“<div>Hello</div>”).appendTo(“body”);

Satır-1: Ajax kullanarak alınan bir xml belgesindeki tüm div taglarını seçer.

Satır-2: Sayfada kullanılan ilk formun “[0]” tüm textbox larını seçer.

Satır-3: appendTo fonksiyonu seçme tagında verilen HTML kodunu body tagının en altına ekler. Body yerine bir id kullanarak başka bir elemanada ekleme yapabilirsiniz.

6-JQuery kodlarını sayfa yüklendiğinde çalıştırmak.

  $(function(){
    // HTML dosyası yüklendiğinde çalışacak.
  });

Html dosyamız tarayıcıda yüklendiğinde aradaki kod bloğunu çalışacaktır. $(function(){ global bir tanımdır.

7-JQuery kodlarını sayfa yüklendiğinde çalıştırmak.

  $(document).ready(function(){
	// HTML dosyası yüklendiğinde çalışacak.
  });

Html dosyamız tarayıcıda yüklendiğinde aradaki kod bloğunu çalışacaktır. Ayrıca ready kullanarak sayfa yüklendiğinde çalışmasını istediğiniz fonksiyonları belirleye bilirsiniz. Diğerine nazaran daha güvenli bir yapı sağladığı için tercih edilir.

Bir örnek vererek tamamlayalım

Örneğimiz de tüm “a” etiketlerinden class=”bag” özelliğini taşıyanların Css etiketi ile üzerleri çiziliyor.

<script src="js/jquery.js"></script>
.bag {
	font-size:12px;
}
.bag2{
	font-size:20px;
}
<script type="text/javascript"></script>
 
Bu Bir Paragraf
 
	<a class="bag" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag" href="#">Bu bir bağlantı</a>
<div id="metin">Bu Bir Div</div>

Şimdilik bu kadar, farklı örnekler yaparak kalıcı bir öğrenme sağlayabilirsiniz. Jquery Cheat Sheet bu konuda size çok yardımcı olacak.

Altta Jquery kodunu görebilirsiniz; Öncelikle hızlı bir gözgezdirin;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function(){
$("a.buton").toggle(
/*Birinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideUp(200);
 $("a.buton").removeClass("acik");
 $("a.buton").addClass("kapali");
 $(".baslik").css("color","#ffe500");
},
/*İkinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideDown(200);
 $("a.buton").removeClass("kapali");
 $("a.buton").addClass("acik");
 $(".baslik").css("color","#FFF");
}
);
});

toggle() fonksiyonu kullanarak herhangi bir seçiciye “a,p,div” iki farklı durum atayabiliyoruz. Çalışması için atandığı seçicinin üzerine tıklamak yeterlidir. Bizim örneğimizde seçici “.buton” sınıf adına sahip bir <a> tagıdır. <a> etiketine ilk kez tıkladığımızda function() lardan birincisi aktif olacaktır, ikinci defa tıkladığımızda ise function() lardan ikincisi aktif olacaktır. toggle(fn1,fn2) yapısına sahiptir. burada function() bloklarının “,” ile ayrıldığına dikkat edin.

Çalışma dosyasının tamamını indirmek için buraya tıklayabilirsiniz.

Ayrıca Yazdırılabilir versiyonu için buraya tıklaman yeterli.