Loading
jquery Türkçe kaynak etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jquery Türkçe kaynak etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

26 Haziran 2012 Salı

Jquery dersleri bölüm 4 (Toggle Methodu)

,


Toggle Methodu 


Toggle methodu  çok kullanışlı bir methoddur bir çok sitede rasgelmişsinizdir aslında show ve hide methodlarının karışımıdır diyebiliriz.Zaten Türkçe olarak bir işlemden diğerine geç gibi bir anlamı var.
kullanımına bakalım;


toggle()
toggle(4000) // 4000 zaman belirtir. 4000 = 4 saniye
toggle('slow') // slow'un Türkçe karşılığı yavaş demektir.
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').toggle('slow');
        });
    });

    </script>

</head>

<body>
    <div id="box"></div>
        <a href="#">Tıkla beni!</a>
</body>
</html>
Tıkla beni yazısına tıkladıgımız div açılacak tekrar tıkladıgımızda kapanacaktır kullanımı bu şekildedir

20 Haziran 2012 Çarşamba

Jquery dersleri bölüm 3 (Show, Hide Methodları)

,
Show methodu


Bu method ile kapalı "display:none" div imizi açılır hale getircez güzel bir efekt bence :)


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.
<!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>
Hide methodu


Bu method ile açık haldeki div imizi tıkladığımızda kapalı hale geitrcez




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.
<!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>


aslında show ve hide methodlarının slide ve fade methodlarından pek bir varki yok sadece efeklerde biraz değişim var kullanımı siz geliştirebilrsiniz hayal gücünüze kalmış
 

Yazilim Kitabi Copyright © 2012