astropaykartsatis.net
User Tag List

Yeni Konu Aç Cevap Yaz
5.09.2010, 01:16 1 (permalink)
trgy
trgy Guest
  • Üyelik Tarihi
  • Ticaret Sayısı
  • Mesajlarn/a
Jquery Öğreniyoruz (Show, Hide Methodları) - Ders 3 #permalink (permalink)
jquery ders serisinde 3. dersimizde show ve hide methodlarını anlatmaya çalışacağım. Her zamanki gibi dersin kaynak kodlarını dersin sonunda bulabilirsiniz.

Show Methodu

Show methodu ile kapalı olan herhangi bir şeyi güzel bir efekt ile göstermiş olacağız. Kullanımı oldukça basit.

Türkçe anlamı
show, göster.

Örnek - 1 Show methodu

Kullanımı
HTML-Kodu:
show()
show(4000) // 4000 zaman belirtir. 4000 = 4 saniye
show('slow') // slow'un Türkçe karşılığı yavaş demektir. yavaş bir şekilde açılmasını söyler.
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;
    display: none;
    }
    </style>

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

    </script>

</head>

<body>
    <div id="box"></div>
        <a href="#">Tıkla beni!</a>
</body>
</html>
Üstteki örnekte tıkla beni yazısına tıkladığınız zaman 300px genişliğinde ve 300px uzunluğunda bir kırmızı bölge gözükecektir. Slide ve fade methodları ile yazım şekli ve kullanım şekli aynıdır.

Demo

Örnek - 2 Hide methodu

Kullanımı
HTML-Kodu:
hide()
hide(4000) // 4000 zaman belirtir. 4000 = 4 saniye
hide('slow') // slow'un Türkçe karşılığı yavaş demektir. yavaş bir şekilde kapanmasını söyler.
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').hide('slow');
        });
    });

    </script>

</head>

<body>
    <div id="box"></div>
        <a href="#">Tıkla beni!</a>
</body>
</html>
Bu örnekte ise görünün bir kırmızı bölgeyi Tıkla beni! linkine tıkladığımızda yok eder.

Demo

Sonuç olarak;
Show ve hide methodlarınının slide ve fade methodlarının kullanımı arasında fark yoktur. Sadece basit efekt değişiklikleri oluşuyor.

Bir sonraki dersimizde ise sizlere toggle methodunu göstereceğim.

Kaynak Kodlar
Alıntı ile Cevapla
5.09.2010, 02:06 2 (permalink)
ozanTi
  • NeredenAdana Şubesi
  • Üyelik Tarihi23.03.2010
  • Ticaret Sayısı0
  • Mesajlar3,392
yapmak istediğim yaklaşık olarak buydu trgy ellerine sağlık
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
5.09.2010, 02:15 3 (permalink)
mhmt
  • Neredenİzmir Şubesi
  • Üyelik Tarihi5.11.2007
  • Yaş33
  • Ticaret Sayısı0
  • Mesajlar297
Güzel paylaşım için teşekkürler.
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
5.09.2010, 06:02 4 (permalink)
ilyasbat
  • Üyelik Tarihi22.07.2009
  • Yaş28
  • Ticaret Sayısı0
  • Mesajlar90
Nacizane tavsiye. Click function metodu yerine fonksiyonlarla çalışılırsa daha rahat olur. Ayrıca her istediğimiz yerde kullanabiliriz:

function ac(id)
{
$('#'+id).show('slowly');
}

kullanımı

<a href="javascript:void(0)" onclick="ac('merhaba')">Tıklandığında merhaba idsini gösterir</a>

veya

<a href="javascript:ac('merhaba');">Tıklandığında merhaba idsini gösterir</a>

Zamanım oldukça ben de yardımcı olabilirim bu konuda.
Malum Jquery artık vazgeçilmez gibi bir şey oldu.
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
4.12.2010, 13:12 5 (permalink)
dizayner
  • Üyelik Tarihi20.10.2010
  • Yaş25
  • Ticaret Sayısı0
  • Mesajlar37
eywallah hocam
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
5.04.2011, 02:01 6 (permalink)
ymt19
  • Üyelik Tarihi3.04.2011
  • Ticaret Sayısı0
  • Mesajlar10
teşekkürler
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
Yeni Konu Aç Cevap Yaz
Ş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 - Ders 1 trgy Jquery Dersleri 15 22.01.2013 14:35
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

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