JQUERY ile yazının devamını/tamamını görüntüleme

Uzun metinlerde DEVAMI niteliğinde kullandığımız MORE özelliğini WORDPRESS kullananlar bilir. Sayfada fazla kalabalık yapılmaması amacıyla kullanılır, yazı bir bölümünde kesilir ve DEVAMI tıklandığında yazının tamamı görüntülenir.

WordPress değilde kendi sayfalarımızda bu özelliği ajax olarak yani dinamik sayfa üzerinden JQUERY ile kullanmak oldukça kolay. Hem görüntü ve estetik açısından hemde işlev olarak oldukça güzel bir özellik.

Yapmak için :

Öncelikle <head> tagları arasına aşağıdaki scriptlerimizi ekliyoruz.

  • <script type=”text/javascript” src=”js/jquery.js”></script><script type=”text/javascript”>
    $(document).ready(function() {

    $(“span.devam”).hide();

    $(‘<a>Tamamını görüntüle &gt;&gt;</a> ‘).insertBefore(‘.devam’);

    $(“a.reveal”).click(function(){
    $(this).parents(“p”).children(“span.devam”).fadeIn(2500);
    $(this).parents(“p”).children(“a.reveal”).fadeOut(600);
    });

    });
    </script>

Burada bulunan jquery.js kütüphanesini BURAYA TIKLAYARAK edinebilirsiniz. Ayrıca jquery resmi sayfasındanda indirebilirsiniz.

Yazmış olduğumuz scriptte bir devam adında span classı oluşturduk.Bu sayede <span class=”devam”> GIZLENECEK METIN </span> arasında yazdığımız metin gizlenecek ve tamamını görüntüle’ye basıldığında ise efektli bir şekilde sayfa içerisinde açılacak. Yani şu şekilde :

Bu metin sayfanın ilk açıldığında gözükür.  <span class=”devam”>buradaki metin ise tamamını görüntüye basıldıktan sonra gözükür.</span></p>

şeklinde. Hepsi bu kadar. İlk okuyuşda anlamayabilirsiniz. Ancak alt taraftaki linkten örneğine/demosuna ulaşarak inceleyebilirsiniz.

JQUERY-yazının tamamını görüntüle ÖRNEK / DEMO

Bu bölüme bağış sistemi ekleyebilirsiniz.
Henüz yorum yok.