Jquery ile basit Load More Content yapımı

load-more-content-yapimi

Çoğu sitede görmüşsünüzdür, çok fazla aşağıya inen içeriklerde Load More yada Türkçe adıyla Devamını Yükle gibi sayfanın en alt kısmında buton olur, buna bastığınız zaman ise sayfa hiç değişmeden yeni içerikler gelir. Normalde bu yöntem Ajax gibi yapılarla oluşturuluyor. Yani asıl mantık tüm içerikleri aynı anda sayfanıza çekmek yerine butona basıldığı zaman verileri getirmek üzerine kurulu.

Fakat daha basit yapılarda Ajax uğraştırıcı olabiliyor. Bunun için Jquery ile aslında gizlenmiş olan içerikleri belirli sayıya göre Devamını Yükle tekniği ile sayfanızda gösterebilirsiniz.

HTML

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>


<a href="#" id="loadMore">Load More</a>

<p class="totop"> 
    <a href="#top">Back to top</a> 
</p>

 CSS

body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.totop a {
    display: none;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}

JS

/*
  Load more content with jQuery - May 21, 2013
  (c) 2013 @ElmahdiMahmoud
*/   

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

Bütün bu kodların çalışması için sayfanıza Jquery kütüphanesini eklemeyi unutmayın.

See the Pen Load more content with jQuery by Mahmoud Elmahdi (@elmahdim) on CodePen.

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica