Jquery Öğreniyoruz - Ders 1

Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...
T

trgy

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

trgy

Misafir
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

0
İyinet Üyesi
Katılım
23 Mart 2010
Mesajlar
4,807
Reaction score
88
Konum
Angara'nın Bağları
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

trgy

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

0
İyinet Üyesi
Katılım
26 Şubat 2010
Mesajlar
213
Reaction score
0
@trgy hocam çok teşekkür ederim çok iyi anladım ilk dersi güzeldi devamını bekliyoruz senden :)
 

ozanTi

0
İyinet Üyesi
Katılım
23 Mart 2010
Mesajlar
4,807
Reaction score
88
Konum
Angara'nın Bağları
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

0
İyinet Üyesi
Katılım
24 Şubat 2005
Mesajlar
2,869
Reaction score
16
Konum
Samsun
Bir tıklayışta kapatıp diğerinde açan birşey yapın bakalım hadi :p
 

UserControl

0
İyinet Üyesi
Katılım
2 Ekim 2010
Mesajlar
2
Reaction score
0
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...
 

b3yaz

0
İyinet Üyesi
Katılım
13 Mart 2011
Mesajlar
0
Reaction score
0
Teşekkürler Hocam Diğer Dersi Sabırsızlıkla Bekliyorum :)
 
Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...

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.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara Cicisex Porno
Üst