Jquery Hide & Show & Toggle Fonksiyonları Kullanımı

Merhaba Arkadaşlar,

Bu makalede sizlere günümüz yaygın teknolojilerinden Jquery ‘nin en basit ve kullanımı yaygın olan fonksiyonlarından nesneyi gizleme ve gösterme işlemlerinin nasıl yapıldığını anlatacağım. İlk ele alacağımız konu olan ” Hide ” fonksiyonu bir kutunun , bir yazının , bir resmin işlem uygulandığı anda sayfadan kaybolmasını sağlamaktadır. Sayfada kaybolan veri gizli bir biçimde yerini korumaz sayfadan tamamen kaldırılır. İkinci konumuz olan ” Show ” fonksiyonu ise genelde ” Hide ” ile sayfadan kaldırılmış verinin tekrar sayfadaki yerine getirilmesi amacı ile kullanılmaktadır. İçeriğinde belirtilen class , id gibi seçicilik değeri olan bileşenler sayesinde verilerin sayfada görünür halde tutulmasını sağlar. Son konumuz olan ” Toggle ” ise az önce bahsettiğim iki fonksiyonun tek bir butonda veya link verilmiş herhangi bir nesnede gerçekleştirilmesini sağlamaktadır. Örnek vermek gerekirse sayfada bulunan bir yazı için ilk tıklamada ” hide ” görevi işlenirken ikinci tıklamada ” show ” görevi işlenmektedir.

Bu açıklamalardan sonra uygulamamıza geçelim. İlk olarak jquery kütüphanesini bilgisayarınıza indirin. Bunun için en uygun adresler ” www.jquery.com ” ve ” developers.google.com ” adresleridir. Ben kütüphaneyi Google ‘dan edindim. Bunun için ” http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js ” adresine gidin ve sayfayı farklı kaydet seçeneğinden bilgisayarınızda uygulamanın kodlanacağı klasöre kaydedin. Daha sonra klasör içerisinde bir de ” index.html ” sayfası yaratın ve bir düzenleyici program açarak kodlamalara başlayalım. İlk olarak klasik html kodlarımızı yazıyoruz ve içerisine kütüphanemizi çekiyoruz. Görüntü şu şekilde olacaktır :


<html>
    <head>
    <title>BilgiSayaci.Org - JQuery Hide() , Show() , Toggle() Kullanımı</title>
    <script src="jquery.min.js"></script>
    </head>
    <body>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 1. Satır</p>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 2. Satır</p>
    <button id="gizle">Yazıyı Gizle</button>
    <button id="goster">Yazıyı Göster</button>
    <button id="gizlevegoster">Yazıyı Gizle & Göster</button>
    </body>
</html>

Şu anda sayfayı çalıştırdığımızda iki satırlık bir yazı ve üç adet buton görüntülenecektir. Butonlara tıkladığımızda herhangi bir işlev gerçekleşmediğini göreceğiz. Butonlara işlev kazandırmak içintag ‘lerimizi açıyoruz ve ilk olarak id ‘si ” gizle ” olan butonumuz için kodlarımızı yazıyoruz.


<html>
    <head>
    <title>BilgiSayaci.Org - JQuery Hide() , Show() , Toggle() Kullanımı</title>
    <script src="jquery.min.js"></script>
    <script>
        $('document').ready(function(){
            $('#gizle').click(function(){
                $('p').hide();
            });
        });
    </script>
    </head>
    <body>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 1. Satır</p>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 2. Satır</p>
    <button id="gizle">Yazıyı Gizle</button>
    <button id="goster">Yazıyı Göster</button>
    <button id="gizlevegoster">Yazıyı Gizle & Göster</button>
    </body>
</html>

Sayfayı yeniden çalıştırıp ” Yazıyı Gizle ” butonuna tıkladığımızda yazının kaybolduğunu göreceğiz. Burada kod içerisine baktığımızda yazıları kaybetmesinde kendisine baz aldığı değer

tag ‘leri arasındaki yazılar olduğunu göreceğiz.

Şimdi ikinci işlemimiz için ” Show ” fonksiyonunu kullanacağız. ID ‘si ” goster ” olan div ‘e tıklandığında

etiketleri arasındaki kaybolan yazıları tekrar görünür yap diyerek bu işlemimizi de tamamlıyoruz.


<html>
    <head>
    <title>BilgiSayaci.Org - JQuery Hide() , Show() , Toggle() Kullanımı</title>
    <script src="jquery.min.js"></script>
    <script>
        $('document').ready(function(){
            $('#gizle').click(function(){
                $('p').hide();
            });
            $('#goster').click(function(){
               $('p').show();
            });
        });
    </script>
    </head>
    <body>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 1. Satır</p>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 2. Satır</p>
    <button id="gizle">Yazıyı Gizle</button>
    <button id="goster">Yazıyı Göster</button>
    <button id="gizlevegoster">Yazıyı Gizle & Göster</button>
    </body>
</html>

Eklenen kod sonrası sayfayı çalıştırıp ilk olarak ” Yazıyı Gizle ” butonumuza tıklıyoruz ve yazıların kaybolduğunu görüyoruz. Daha sonra hemen yanındaki buton olan ” Yazıyı Göster ” butonuna tıklayarak yazıların sayfadaki yerini tekrar aldığını göreceğiz.

Bu makalede ki son işlem için ” Toggle ” fonksiyonunu kullanacağız. Makale başında da anlattığım gibi ” Hide ” ve ” Show ” fonksiyonlarını ” Toggle ” sayesinde tek bir buton içerisinde toplayacağız ve ilk tıklama ile gizlediğimiz yazılarımızı ikinci tıklama ile tekrar görünür hale büründüreceğiz. Bunun için ” gizlevegoster ” id ‘li buton için click olayına kodlarımızı yazıyoruz ve sayfanın şu ana kadar ki son görünümü şu şekilde oluyor :


<html>
    <head>
    <title>BilgiSayaci.Org - JQuery Hide() , Show() , Toggle() Kullanımı</title>
    <script src="jquery.min.js"></script>
    <script>
        $('document').ready(function(){
            $('#gizle').click(function(){
                $('p').hide();
            });
            $('#goster').click(function(){
               $('p').show();
            });
            $('#gizlevegoster').click(function(){
               $('p').toggle();
            });
        });
    </script>
    </head>
    <body>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 1. Satır</p>
        <p>Sıradan Bir BilgiSayaci.Org Uygulamasındaki 2. Satır</p>
    <button id="gizle">Yazıyı Gizle</button>
    <button id="goster">Yazıyı Göster</button>
    <button id="gizlevegoster">Yazıyı Gizle & Göster</button>
    </body>
</html>

Son hali bu şekilde olan sayfayı kaydedip çalıştırdığımızda en sağda bulunan ve içerisinde ” Yazıyı Gizle & Göster ” yazılı butona ilk tıkladığımızda her iki satırında kaybolduğunu ve ikinci tıkladığımızda da her ikisinin de görünür olduğunu farkedeceğiz.

Başka Neler Yapılabilir ?

Bu uygulama için bence en uygun düzenleme ani bir hareket ile kapanıp açılan yazıların animasyon sayesinde örneğin 1 saniye de kapanmasını sağlamak olacaktır. Bunu yapmak için her fonksiyonun hemen bitişiğindeki parantez içerisine 1000 yazmak yeterli olacaktır.tag ‘leri içerisindeki son görüntü şu şekilde olacaktır :


<script>
        $('document').ready(function(){
            $('#gizle').click(function(){
                $('p').hide(1000);
            });
            $('#goster').click(function(){
               $('p').show(1000);
            });
            $('#gizlevegoster').click(function(){
               $('p').toggle(1000);
            });
        });
    </script>

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 19 No ‘lu Maddeden İndirebilirsiniz..

Reklamlar

Tüm Yorumlar

2 Responses to “Jquery Hide & Show & Toggle Fonksiyonları Kullanımı”

  1. ismail says:

    hocam örnek çok güzel fakat bunu aynı sayfada bir kaç kez kullanmak istersek nasıl yapabiliriz? javascript bilgim az araştırıyorum ve bulamadım. bir değişkenim var veri tabanından gelen bunu kullanarak yapmak istiyorum.

    • admin says:

      @ismail,
      Bunu bir sayfada bir kaç kez kullanmak derken aynı div üzerinde kullanmak istiyorsan zaten bunu konu içerisinde anlattım. Sen farklı div’lerde bu işlemi uygulamak istiyorsan sana iki yol söyleyebilirim :

      1-) Her div için farklı bir class atayıp bu class’ lara ayrı ayrı jQuery kodları ile işlem yaptırırsın.
      2-) Üç adet class belirleyip bunlara ilk olarak jQuery tarafında yapacağı işlemleri yaptırır daha sonrada hangi div’ in hangi işlemi yapmasını istiyorsan ona istediğin class’ı verirsin.

Leave a Reply