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-4 Varyasyon oluşturma ve silme

Posted on 15 Mart 2010 by admin

Dördüncü jQuery video dersimizde, sayfamıza jquery kullanarak var komutu ile yeni bir varyasyon oluşturma daha sonra bu varyasyonu fonksiyonlarımızda kullanarak örnek olarak yaptığımız listemizde yeni listelerin oluşmasını sağladık.

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 – slide, hide ve fade Metodları

Posted on 12 Mart 2010 by admin

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;

CSS


&lt;style type=&quot;text/css&quot;&gt;
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
&lt;/style&gt;

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ı

Jquery

&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt;

$(function()  {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});

});
&lt;/script&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot;&gt;

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