Baştan Sona jQuery Dersleri

Posted on 14 Aralık 2010 by admin

Merhaba arkadaşlar.. Arşivimde dolanırken, Birden karşıma jQuery Dersleri’ne rastladım.Geçen yıl bu zamanlarda, takip edenlerinde hatırlayacağı üzerine jQuery kategorsinde bir Video Ders serisi hazırlamıştım.

Bu seri sayesinde jQuery öğrenen bir çok arkadaş oldu.. Aynı zamanda bilgiler sayesinde jQuery öğrenerek Tema editleme hatta ücretli jQuery işleri alan arkadaşlarım dahi olmuştur. Continue reading →

jQuery & CSS Vertical Scrol Menu Dersi

Posted on 20 Mart 2010 by admin

Daha önceki dersimizde Horizontal scrol menü nasıl yapılır onu göstermiştim. Bu dersimizde de aynı kodlarla biraz daha farklı tasarım katarak vertical menü yapımını göstereceğim.
Continue reading →

jQuery Slidedown Metodu Kullanımı

Posted on 15 Mart 2010 by admin

jQuery kullanımını en baştan ele alarak, şu dersimizde belirttiğimiz slideDown metoduna bir örnektir.

jQuery Nasıl Kullanılır

İ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.


&lt;script src=&quot;jquery-1.2.6.pack.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

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.

Elementleri Nasıl Çağırırız

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.

Elementlere Nasıl Fonksiyon Atanır

Yukarıda belirttiğimiz $(“elamanımız”) olarak örneklendirdiğim gibi fonksiyon ataması yapabilmek içinde, jquery kodlarımın başında;


$(function() {

&lt;&lt;- Bu alana jQuery içerisinde kullanacağımız kodlarımız gelecektir  -&gt;&gt;

});

$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


$(&quot;.button&quot;).click(function() {

yapısı ile button adlı nesneye (click) komutu ile tıklanıldığında yeni bir fonksiyon oluşmasını sağlarız;


$(&quot;#panel&quot;).slideDown(&quot;slow&quot;);

});

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;

Diğer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Me todları

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 Video Dersleri – jQuery Başlangıç

Posted on 12 Mart 2010 by admin

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.

&lt;script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;