astropaykartsatis.net
User Tag List

Konu Kilitli
Toplam 2 Sayfadan 1. Sayfa
30.08.2010, 19:11 1 (permalink)
trgy
trgy Guest
  • Üyelik Tarihi
  • Ticaret Sayısı
  • Mesajlarn/a
Jquery Öğreniyoruz - Ders 1 #permalink (permalink)
İnternette çok araştırdım ama düzgün Türkçe kaynak bulamadım bu yüzden Jquery ile ilgili dersleri başlatmak istedim. Hep beraber öğrenmek dileğiyle. İlk dersimizin içeriği;

A.Jquery indirme
B.Jquery'yi sayfa içerisine eklemek ve minik bir kod örneği.

1.adım

Öncelikle Jquery http://jquery.com/ anasayfasından Jqeury'yi indiriyoruz ve kullandığımız editör yardımıyla bir adet html şablonu oluşturuyoruz.

HTML-Kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlık</title>

</head>

<body>

<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2</div>
</body>
</html>
2.Adım

2.adımımızda indirdiğimiz jquery'yi tıpkı bir javascript ekler gibi hedef göstererek ekliyoruz.

Eklenmesi gereken kod
HTML-Kodu:
<script src="jquery.min.js" type="text/javascript"></script>
Son hali
HTML-Kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlık</title>

<script src="jquery.min.js" type="text/javascript"></script>

</head>
<body>
    
</body>
</html>
Örnek
Jquery'yi sayfamıza ekledik ve şimdi çalışmaya başlayabiliriz. Aşağıdaki verdiğim örnekte Tıkla Beni! butonuna bastığınızda ekrandaki kutu yavaşça kapanacaktır.

HTML-Kodu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="jquery.min.js" type="text/javascript">
</script>

    <style type="text/css">
    #box {
    background-color: red;
    width: 300px;
    height: 300px;
    }
    </style>

    <script type="text/javascript">
    $(function() {
        $('a').click(function() {
            $('#box').slideUp(4000);
        });
    });

    </script>

</head>

<body>
    <div id="box"></div>
        <a href="#">Tıkla beni!</a>
</body>
</html>
Kısa kısa kod açıklamaları:

HTML-Kodu:
<style type="text/css">
    #box {
    background-color: red;
    width: 300px;
    height: 300px;
    }
    </style>
Bu css kodları ile oluşturduğumuz box div'ine şekil verdik. 300 piksel genişlik, 300 piksel yükseklik ve arkaplan rengi olarak kırmızı ayarladık.

HTML-Kodu:
<script type="text/javascript">
    $(function() {
        $('a').click(function() {
            $('#box').slideUp(4000);
        });
    });

</script>
Yukarıdaki kod ise biraz karışık gelebilir ama çok basit. Jquery kodlarını yazmaya her zaman $ işareti ile başlarız. $ işaretinden sonra bir adet fonksiyon oluşturduk ve bu fonksiyona ait tanımlamalar yaptık. $('a') ile tüm linkleri seçmiş olduk. $('a') yerine $('p') yazsaydık tüm paragrafları seçmiş olacaktık. Kısacası $('hedef') yazabiliriz. .click ile fonksiyonumuzun tıklandığında ne yapacağını ayarlıyoruz. tıklandığında hedefimiz #box yani box div'i. tıklandıktan sonra ise slideUp(4000) fonksiyonu sayesinde ise kutumuz 4 saniye içerisinde kaybolacaktır. slideUp(4000) içindeki 4000 rakamı ne kadar sürede kapanacağını belirtir. slideUp(4000) yerine slideUp('fast') yazarsak bu sefer işlemi daha hızlı uygulayacaktır.

HTML-Kodu:
<div id="box"></div>
        <a href="#">Tıkla beni!</a>
Oluşturduğumuz div ve link.

Bu dersimizde sizlere kısaca jquery'yi anlattım ve bir örnek ile açıklamak istedim. Önümüzdeki dersimizde vereceğim örneklerle daha anlaşılır olacaktır. Yazım hatalarım ve anlatım bozukluklarım olabilir şimdiden özür dilerim.

Demo - Kaynak Kodları

dipnot: Çeviri değildir kendi anlatımımdır.
30.08.2010, 20:26 2 (permalink)
Emrah
  • Üyelik Tarihi10.06.2010
  • Yaş31
  • Ticaret Sayısı0
  • Mesajlar211
Hocam Teşekkür Ederim İnsanlara, Faydalı Bilgiler Sunduğunuz, İçin.
Hızlı PM Gönder
Gönder
30.08.2010, 20:46 3 (permalink)
ozanTi
  • NeredenAdana Şubesi
  • Üyelik Tarihi23.03.2010
  • Ticaret Sayısı0
  • Mesajlar3,392
eğer yukarı doğru değilde aşağı doğru kapansın isteseydik;

slideDown('fast')

şeklinde mi yazaacaktık?
bir de ortaya doğru kaybolsun istersek nasıl olacak?
Hızlı PM Gönder
Gönder
31.08.2010, 01:26 4 (permalink)
trgy
trgy Guest
  • Üyelik Tarihi
  • Ticaret Sayısı
  • Mesajlarn/a

eğer yukarı doğru değilde aşağı doğru kapansın isteseydik;
şeklinde mi yazaacaktık?
bir de ortaya doğru kaybolsun istersek nasıl olacak?

Aşağı doğru kapatmak derken tam anlayamadım? Aşağı doğru kapanması biraz mantık dışı oluyor.

slideDown şu şekilde kullanabilirsin. Css kısmına display: none; eklemelisin ve slideUp yerine slideDown yazarsan açılmaya başlar.

Senin aşağı ortaya doğru kaybolma olayını şu şekilde yapabiliriz. Animasyon olarak ayarlanır ve animasyon olarak yokedebilirsin. 2.derste bazı çeşitlerini göstereceğim zaten.
31.08.2010, 01:38 5 (permalink)
ozanTi
  • NeredenAdana Şubesi
  • Üyelik Tarihi23.03.2010
  • Ticaret Sayısı0
  • Mesajlar3,392
açık ve aşağı doğru kaybolsun istiyoruz yani. açılmak değil o örnk uygulamada Tıkla Beni yazan yere doğru gitsin kırmızı olan yer. onu demiştim.bu arada 2. dersi de sabırsızlıkla bekliyorum.
Hızlı PM Gönder
Gönder
31.08.2010, 15:45 6 (permalink)
trgy
trgy Guest
  • Üyelik Tarihi
  • Ticaret Sayısı
  • Mesajlarn/a
İyi de dediğin gibi olursa üst kısımda boşluk olması gerekir. Her ne olursa olsun üste doğru kayacaktır. Kırmızı alan aşağıya doğru kaybolsa bile sana bu üste doğru kayboluyor gibi gelecektir.
1.09.2010, 10:29 7 (permalink)
proofweb
  • Üyelik Tarihi26.02.2010
  • Yaş28
  • Ticaret Sayısı0
  • Mesajlar163
@trgy hocam çok teşekkür ederim çok iyi anladım ilk dersi güzeldi devamını bekliyoruz senden
Hızlı PM Gönder
Gönder
1.09.2010, 18:08 8 (permalink)
ozanTi
  • NeredenAdana Şubesi
  • Üyelik Tarihi23.03.2010
  • Ticaret Sayısı0
  • Mesajlar3,392

Aşağı doğru kapatmak derken tam anlayamadım? Aşağı doğru kapanması biraz mantık dışı oluyor.

slideDown şu şekilde kullanabilirsin. Css kısmına display: none; eklemelisin ve slideUp yerine slideDown yazarsan açılmaya başlar.

Senin aşağı ortaya doğru kaybolma olayını şu şekilde yapabiliriz. Animasyon olarak ayarlanır ve animasyon olarak yokedebilirsin. 2.derste bazı çeşitlerini göstereceğim zaten.

evet biraz mantık dışı oluyormuş deneyince farkettim.
onun örneği de ben koyayım;
http://editorden.co.cc/wp-content/up...0/09/trgy.html

tekrar teşekkürler bu arada jquery gerçekten süper bişey,senin makalelere başlamansa paha biçilemez
Hızlı PM Gönder
Gönder
1.09.2010, 18:27 9 (permalink)
GNeRaL
  • Üyelik Tarihi24.02.2005
  • Yaş30
  • Ticaret Sayısı0
  • Mesajlar1,947
Bir tıklayışta kapatıp diğerinde açan birşey yapın bakalım hadi :p
Hızlı PM Gönder
Gönder
1.09.2010, 18:29 10 (permalink)
ozanTi
  • NeredenAdana Şubesi
  • Üyelik Tarihi23.03.2010
  • Ticaret Sayısı0
  • Mesajlar3,392
slideup ve slidedown işini öğrendik. başka bişeyler yapalım
Hızlı PM Gönder
Gönder
Konu Kilitli
Toplam 2 Sayfadan 1. Sayfa
Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Yetkileriniz
Konu Acma Yetkiniz Yok Cevap Yazma Yetkiniz Yok Eklenti Yükleme Yetkiniz Yok Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık Smileler Açık [IMG] Kodları Açık HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Forum Kuralları
Benzer Konular
Konu Konuyu Başlatan Forum Cevap Son Mesaj
Jquery Öğreniyoruz (Toggle Methodu) - Ders 4 trgy Jquery Dersleri 10 3.09.2013 15:05
Jquery Öğreniyoruz (Show, Hide Methodları) - Ders 3 trgy Jquery Dersleri 5 5.04.2011 02:01
Jquery Öğreniyoruz (Fade, Slide Methodları) - Ders 2 trgy Jquery Dersleri 8 26.10.2010 13:35
Jquery Öğreniyoruz - Ders Arşivi trgy Jquery Dersleri 0 11.09.2010 13:43
jquery ders 3 - toggle iyinet jquery scriptler 5 12.04.2010 20:33

Forum Saati: 17:44. Zaman dilimi GMT +3 olarak ayarlanmıştır.
Powered by vBulletin™ Version 3.8.7
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.