Membuat Effect Filter Post Dengan Menggunakan Jquery
Di panduan kali ini sahabat akan belajar bagaimana cara Merancang Effect Filter Post Dengan Menggunakan Jquery .
Halo semuanya kali ini saya akan memberikan panduan mengenai jquery yaitu bagaimana cara Merancang Effect Filter Post Dengan Menggunakan Jquery. Apa sih filter post itu ? jujur aja nama itu penulis karang sendiri hahah karena bingung nama yang mesti penulis ambil bagi effect tersebut karena penulis membangun sendiri jquery nya.
Jadi, intinya jquery tersebut mempunyai effect bagi menampilkan suatu element tergantung kategori apa yang kita pilih, dan berapa jumlah yang kita inginkan bagi di tampilkan. bingung ? seketika 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
}
fitur {
background: #8e44ad;
height: 50px
}
fitur a {
color:#fff;
margin-right: 50px;
line-height:50px;
margin-left:50px;
}
</style>
</head>
<body>
<div class=container>
<fitur>
<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>
</fitur>
<article>
<div class=data>
<div class=serengseng>
<h3>Source Code Aplikasi 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>
Tempat tinggal
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class=grogol>
<h3>Source Code Aplikasi 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>
Tempat tinggal
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class=gading>
<h3>Source Code Aplikasi 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>
Tempat tinggal
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class=depok>
<h3>Source Code Aplikasi 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>
Tempat tinggal
</td>
<td>
Jl. Haji kelik , ruko permata regensi Srengseng jakarta barat
</td>
</tr>
</table>
</div>
<div class=tebet>
<h3>Source Code Aplikasi 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>
Tempat tinggal
</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
}
fitur {
background: #8e44ad;
height: 50px
}
fitur 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 , karenanya kurang lebih hasilnya akan seperti ini :
Silahkan di klik tombol sesuai data yang ingin di tampilkan karenanya sekiranya di klik jquery akan menyaring atau memfilter data yang mana yang di tampilkan.
oke lumayan demikianlah dari saya bagi panduan mengenai bagaimana cara Merancang Effect Filter Post Dengan Menggunakan Jquery .
Sumber https://kursuswebsite.org
