Pada tutorial kali ini anda akan belajar bagaimana cara Membuat Effect Filter Post Dengan Menggunakan Jquery .
Halo semuanya kali ini saya akan memberikan tutorial tentang jquery yaitu bagaimana cara Membuat Effect Filter Post Dengan Menggunakan Jquery. Apa sih filter post itu ? jujur aja nama itu penulis karang sendiri hahah karena bingung nama yang harus penulis ambil untuk effect tersebut karena penulis membuat sendiri jquery nya.
Jadi, intinya jquery tersebut mempunyai effect untuk menampilkan suatu element tergantung kategori apa yang kita pilih, dan berapa jumlah yang kita inginkan untuk di tampilkan. bingung ? langsung saja salin code berikut ini:
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding: 0;
}
.container{
width: 1000px;
margin: auto;
}
.data{
overflow: hidden;
}
.serengseng{
width: 500px;
float: left;
background: #e67e22
}
.grogol{
width: 500px;
float: right;
background: DeepPink
}
.gading{
width: 500px;
float: left;
background: #f1c40f
}
.depok{
width: 500px;
float: right;
background: #e74c3c
}
.tebet{
width: 500px;
background: #bdc3c7
}
menu {
background: #8e44ad;
height: 50px
}
menu a {
color:#fff;
margin-right: 50px;
line-height:50px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="container">
<menu>
<button class="all" >All</button>
<button class="satu" >Srengseng</button>
<button class="dua" >Grogol</button>
<button class="tiga" >Kelapa gading</button>
<button class="empat" >Tebet</button>
<button class="lima" >Depok</button>
</menu>
<article>
<div class="data">
<div class="serengseng">
<h3>Dumet School Srengseng</h3>
<table>
<tr>
<td>
Nama Instruktur
</td>
<td>
<ul>
<li><span>Ruly fabrian</span></li>
<li><span>Bayu fajar sidik</span></li>
<li><span>Puspita indah</span></li>
<li><span>Rizal</span></li>
</ul>
</td>
</tr>
<tr>
<td>Nama admin dan marketing</td>
<td>
<ul>
<li><span>Auliya</span></li>
<li><span>Fatimeh</span></li>
<li><span>Novita</span></li>
<li><span>Azizah</span></li>
</ul>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class="grogol">
<h3>Dumet School Grogol</h3>
<table>
<tr>
<td>
Nama Instruktur
</td>
<td>
<ul>
<li><span>Ruly fabrian</span></li>
<li><span>Bayu fajar sidik</span></li>
<li><span>Puspita Gak indah</span></li>
<li><span>Rizal buduk</span></li>
</ul>
</td>
</tr>
<tr>
<td>Nama admin dan marketing</td>
<td>
<ul>
<li><span>Auliya</span></li>
<li><span>Fatimeh </span></li>
<li><span>Novita</span></li>
<li><span>Azizah</span></li>
</ul>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class="gading">
<h3>Dumet School Kelapa gading</h3>
<table>
<tr>
<td>
Nama Instruktur
</td>
<td>
<ul>
<li><span>Ruly fabrian</span></li>
<li><span>Bayu fajar sidik</span></li>
<li><span>Puspita Gak indah</span></li>
<li><span>Rizal buduk</span></li>
</ul>
</td>
</tr>
<tr>
<td>Nama admin dan marketing</td>
<td>
<ul>
<li><span>Auliya</span></li>
<li><span>Fatimeh</span></li>
<li><span>Novita</span></li>
<li><span>Azizah</span></li>
</ul>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class="depok">
<h3>Dumet School Depok</h3>
<table>
<tr>
<td>
Nama Instruktur
</td>
<td>
<ul>
<li><span>Ruly fabrian</span></li>
<li><span>Bayu fajar sidik</span></li>
<li><span>Puspita Gak indah</span></li>
<li><span>Rizal buduk</span></li>
</ul>
</td>
</tr>
<tr>
<td>Nama admin dan marketing</td>
<td>
<ul>
<li><span>Auliya</span></li>
<li><span>Fatimeh</span></li>
<li><span>Novita</span></li>
<li><span>Azizah</span></li>
</ul>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class="tebet">
<h3>Dumet School Tebet</h3>
<table>
<tr>
<td>
Nama Instruktur
</td>
<td>
<ul>
<li><span>Ruly fabrian</span></li>
<li><span>Bayu fajar sidik</span></li>
<li><span>Puspita Gak indah</span></li>
<li><span>Rizal buduk</span></li>
</ul>
</td>
</tr>
<tr>
<td>Nama admin dan marketing</td>
<td>
<ul>
<li><span>Auliya</span></li>
<li><span>Fatimeh </span></li>
<li><span>Novita</span></li>
<li><span>Azizah</span></li>
</ul>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
</data>
</article>
</div>
</body>
</html>
Css nya :
*{
margin:0;
padding: 0;
}
.container{
width: 1000px;
margin: auto;
}
.data{
overflow: hidden;
}
.serengseng{
width: 500px;
float: left;
background: #e67e22
}
.grogol{
width: 500px;
float: right;
background: DeepPink
}
.gading{
width: 500px;
float: left;
background: #f1c40f
}
.depok{
width: 500px;
float: right;
background: #e74c3c
}
.tebet{
width: 500px;
background: #bdc3c7
}
menu {
background: #8e44ad;
height: 50px
}
menu a {
color:#fff;
margin-right: 50px;
line-height:50px;
margin-left:50px;
}
Jquerynya :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.all').click(function(event){
$('.grogol').show('slow');
$('.gading').show('slow');
$('.depok').show('slow');
$('.tebet').show('slow');
$('.serengseng').show('slow');
});
$('.satu').click(function(event){
$('.grogol').hide('slow');
$('.gading').hide('slow');
$('.depok').hide('slow');
$('.tebet').hide('slow');
$('.serengseng').show('slow');
});
$('.dua').click(function(event){
$('.serengseng').hide('slow');
$('.gading').hide('slow');
$('.depok').hide('slow');
$('.tebet').hide('slow');
$('.grogol').show('slow').css('float','left');
});
$('.tiga').click(function(event){
$('.serengseng').hide('slow');
$('.grogol').hide('slow');
$('.depok').hide('slow');
$('.tebet').hide('slow');
$('.gading').show('slow');
});
$('.empat').click(function(event){
$('.serengseng').hide('slow');
$('.gading').hide('slow');
$('.depok').hide('slow');
$('.gading').hide('slow');
$('.tebet').show('slow');
});
$('.lima').click(function(event){
$('.serengseng').hide('slow');
$('.gading').hide('slow');
$('.grogol').hide('slow');
$('.tebet').hide('slow');
$('.depok').show('slow').css('float','left');;
});
});
</script>
setelah di salin lalu silahkan di jalankan , maka kurang lebih hasilnya akan seperti ini :
Silahkan di klik tombol sesuai data yang ingin di tampilkan maka jika di klik jquery akan menyaring atau memfilter data yang mana yang di tampilkan.
oke cukup sekian dari saya untuk tutorial tentang bagaimana cara Membuat Effect Filter Post Dengan Menggunakan Jquery .