chat eczaonline.com yazılım uzmanı gaziantep web tasarım

Jquery Öğreniyoruz - Ders 1

Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...
T
#1
İ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:
<!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:
<script src="jquery.min.js" type="text/javascript"></script>
Son hali
HTML:
<!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:
<!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:
<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:
<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:
<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.
 
T
#4
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.
 

ozanTi

Müptela
Katılım
23 Mar 2010
Mesajlar
4,812
Beğeniler
92
Konum
Angara'nın Bağları
#5
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.
 
T
#6
İ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.
 

proofweb

Profesyonel
Katılım
26 Şub 2010
Mesajlar
213
Beğeniler
0
Yaş
30
#7
@trgy hocam çok teşekkür ederim çok iyi anladım ilk dersi güzeldi devamını bekliyoruz senden :)
 

ozanTi

Müptela
Katılım
23 Mar 2010
Mesajlar
4,812
Beğeniler
92
Konum
Angara'nın Bağları
#8
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ş :D deneyince farkettim.
onun örneği de ben koyayım;
http://editorden.co.cc/wp-content/uploads/2010/09/trgy.html

tekrar teşekkürler bu arada jquery gerçekten süper bişey,senin makalelere başlamansa paha biçilemez ;)
 

GNeRaL

Müptela
Katılım
24 Şub 2005
Mesajlar
2,869
Beğeniler
16
Yaş
32
Konum
Samsun
#9
Bir tıklayışta kapatıp diğerinde açan birşey yapın bakalım hadi :p
 
Katılım
2 Eki 2010
Mesajlar
2
Beğeniler
0
Yaş
39
#13
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ş :D deneyince farkettim.
onun örneği de ben koyayım;
http://editorden.co.cc/wp-content/uploads/2010/09/trgy.html

tekrar teşekkürler bu arada jquery gerçekten süper bişey,senin makalelere başlamansa paha biçilemez ;)

Mantık hatası derken facebooktaki sohbet penceresini kastedmiyorsunuz değilmi?... Çünkü orada aşağı doğru kapanıyor yukarı doğru açılıyorda... ;)

ve aşağı doğru kapanıp yukarı doğru açılışı bilen varsa açıklarsa sevinirim...
 
Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...

Bu konuyu okuyanlar (Üyeler: 1, Misafirler: 0)

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur. iyinet.com sayfalarında yer alan yazı, görsel ve linklerle ilgili hukuki şikayetleriniz için Buradan iletişime geçmeniz durumunda, ilgili kanunlar ve yönetmelikler çerçevesinde en geç 7 gün içerisinde iyinet yönetimince tarafınıza dönüş sağlanacaktır. Betcup Artemisbet Forum canlı bahis sohbet - - chat
Üst