Antrium A35D

Jquery otomatik filtreleme çok kullanışlı bir özellik. 

Tüm kodları Eksiksiz paylaşıyorum (veritabanı bağlantısını kendinize göre veya kendi dilinize göre ayarlarsınız)

Kaynak : https://codepen.io/Musty129/pen/MOoXYv

<div class="container-fluid py-md-5 mb-md-5">
    <div class="container">
        <div class="row">@Html.Raw(firmaSitesi_katre.fon.fon_GLOBAL.yaziBilgiDondur(225, 2, ViewData["vLANG"].ToString()))</div>
    </div>
    <div class="container filtre1 ky16 mb-md-4">
        <ul>
            <li class="wow fadeInUp" data-wow-delay="0.2s"><a href="#" class="all">Hepsi</a></li>
            @{ int dly1 = 3;}
            @foreach (firmaSitesi_katre.Models.yazilar_ item in firmaSitesi_katre.fon.fon_.yazilistesi(27, 0, ViewData["vLANG"].ToString()))
            {
                <li class="wow fadeInUp" data-wow-delay="@firmaSitesi_katre.fon.fon_GLOBAL.wowdelaySTR(dly1.ToString())">
                    <a href="#" class="kt_@item.id">@Html.Raw(item.konu_tr)</a>
                </li>
                dly1++;
            }
        </ul>
    </div>

    <div class="container">
        <div class="row filtre1_alan">
            @{ int dly2 = 1;}
            @foreach (firmaSitesi_katre.Models.yazilar_ item in firmaSitesi_katre.fon.fon_.yazilistesi(19, 0, ViewData["vLANG"].ToString()))
            {
                <div class="item col-md-4 text-center kt_@item.bagID2">
                    <div class="ky17">
                        <img class="img-fluid" src="/upload/resimler/@item.resimk_tr" alt="@Html.Raw(item.konu_tr)" />
                        <b>@Html.Raw(item.konu_tr)</b>
                        <p>@Html.Raw(item.kisadetay_tr)</p>
                    </div>
                </div>
                dly2++;
            }
        </div>
    </div>

</div>

CSS KODU;

.filtre1 {
    display: flex;
    justify-content: center;
}

    .filtre1 ul {
    }

    .filtre1 li {
        display: inline-block;
    }

    .filtre1 a {
        color: #497691;
        background-color: #eaf2f7;
        display: inline-block;
        padding: 0.7em 2em;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 600;
        font-size: 15px;
        transition: all 0.5s;
    }

        .filtre1 a:hover, .filtre1 .active {
            color: #fff;
            background-color: #eca549;
        }

    .filtre1 a {
        color: #497691;
    }

.filtre1_alanb {
    margin-bottom: 30px;
}

    .filtre1_alanb img {
    }

    .filtre1_alanb b {
        color: #505a61;
        font-size: 27px;
        padding: 15px;
        font-weight: 700;
        display: block;
    }

    .filtre1_alanb p {
        color: #808b90;
        line-height: 25px;
        font-size: 16px;
    }

 

Javascript kodu;

   

 var fltrSAY = 0;
    setTimeout(function () {
        $('.filtre1 li a:first').click();
        fltrSAY++;

    }, 1000);

    $('.filtre1 li a').click(function () {

        var ourClass = $(this).attr('class');
        $('.filtre1 li a').removeClass('active');
        $(this).addClass('active');

        if (fltrSAY > 0) {
            $('html, body').stop().animate({
                'scrollTop': $(this).offset().top - 100
            }, 300, 'swing', function () { }
          );
        }
        fltrSAY++;

        if (ourClass == 'all') {
            $('.filtre1_alan').children('div.item').show();
        } else {
            $('.filtre1_alan').children('div:not(.' + ourClass + ')').hide();
            $('.filtre1_alan').children('div.' + ourClass).show();
        }
        return false;
    });

 

İyi Çalışmalar.

Yorum Yaz