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
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
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
Daha önceki video derslerimizde jQuery hide metodu ile belirlediğimiz nesneyi kaybedebilme özelliğini göstermiştim.Bu derste de yine hide ve bunun yanında parents fonksiyonunu kullanarak Bir disappear yöntemine örnek vereceğim..Aşağıdaki ekran görüntüsünde de gördüğünüz gibi çarpı işaretine tıklanıldığı zaman belirlenen kutunun kapanmasına dair bir örnek olacaktır. Continue reading
Dünkü dersimizde jQuery‘de hover metodunu kullanarak resmimizin şeffaflık ayarlarının, mouse hareketi ile değişmesini sağladık. Continue reading
Zingocan.com Bloğumuzun logosunda olduğu gibi, yukarıda verdiğim resimde, jquery – hover() metodundan bahsedeceğim. Hover metodu nesnelere mouse pozisyonu ile fonksiyon atama işlevidir. Daha önce oluşturduğumuz animate tekniğini bu dersimizde tekrar işleyeceğiz. jQuery derslerimizin 6. dersi olan Hover metodunda;
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