Yazilim Kitabi: jquery dersleri

jquery dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Haziran 2012 Çarşamba

Jquery dersleri bölüm 1

, zaman: 04:09

jquery günümüz webyazılımcıları için çok önemli hale gelmeye başladı bizlerde bundan geri kalmamak için elimizden geldiğince takip etmeye çalışıyoruz ilk olarak jquery nasıl kullanılır onu öğrencez
ilk olarak jquery sayfasından http://docs.jquery.com/Downloading_jQuery son sürümünü indiriyoruz
daha sonra bir html sayfası oluşturup içine

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

Şeklinde html şablonumuzu oluşturuyoruz ve jquery yolumuzu koyu yazıldığı şekilde belirtiyoruz
jquery "<script type="text/javascript "></script>" taglari arasında yazılır
ve tek tip "var" dır kolar herzaman "$" ile yazılmaya başlar '$(function())' ,'$('a')' gibi
cümle bitiminde ";" konulmalıdır

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

</script>

yukardaki kod kısmında bir fonksiyon oluşturduk ve box adındaki div i 4000 mili saniye (4 saniye) bekledikten slideup ile sonra yukarı doğru kaybolsun dedik css mantıgı burdada devam ediyor id ler "#" ile classlar "." id ya da class oldugunu belirtmezsek tüm div ya da ne için yazıldıysan hepsini kapsayacak şekilde olacaktır. daha iyi anlamanız için küçük bir örnekte gösterelim

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>



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

    </script>

</head>

<body>
    <div id="kutu"></div>
        <a href="#">Tıkla!</a>
</body>
</html>

css

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

Devamı »

26 Haziran 2012 Salı

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

, zaman: 04:16

0 yorum

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

Devamı »

20 Haziran 2012 Çarşamba

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

, zaman: 02:28

0 yorum

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ış

Devamı »

Jquery dersleri bölüm 2 (Fade, Slide Methodları)

, zaman: 02:10

0 yorum

Slide Methodu

Slide methodu 1 derste görüdümüz gibi div i yavasça kaybolmasını sağladıgını görmüştük slide methodunun bir kaç çeşidi vardır

slideUp -- bu method yukarı doğru kaydır

slideDown -- bu method aşağı doğru kaydır anlamına gelmektedir

nasıl kullanıldığına bakalım

slideUp() //
slideUp(4000) // 4000 zaman belirtir. 4000 = 4 saniye
slideUp('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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() {
            $('#kutu').slideUp(4000);
        });
    });

    </script>

</head>

<body>
    <div id="kutu"></div>
        <a href="#">Tıkla beni!</a>
<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>

slideDown

slideDown() //
slideDown(4000) // 4000 zaman belirtir. 4000 = 4 saniye
slideDown('fast') // fast 'in Türkçe karşılığı hızlı demektir. hızlı 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;
    display: none;
    }
    </style>

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

    </script>

</head>

<body>
    <div id="box"></div>
        <a href="#">Tıkla beni!</a>
</body>
</html>

Untitled Document

Devamı »

Jquery dersleri bölüm 1

, zaman: 01:45

0 yorum

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

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

</script>

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



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

    </script>

</head>

<body>
    <div id="kutu"></div>
        <a href="#">Tıkla!</a>
</body>
</html>

css

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

Devamı »

Yazilim Kitabi

27 Haziran 2012 Çarşamba

Jquery dersleri bölüm 1

26 Haziran 2012 Salı

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

20 Haziran 2012 Çarşamba

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

Jquery dersleri bölüm 2 (Fade, Slide Methodları)

Jquery dersleri bölüm 1

MERAK ETTİĞİNİZ HERŞEY

Hangi teknolojiyi kullanıyorsun ?

Translate

Blog Archive

Yazılar

Popular Postlar