Implementasi Parameter Data Filter pada HTML5

Banyak hal menarik yang bisa kita pelajari pada versi teranyar HTML yaitu HTML5. Pada HTML5 terdapat banyak fitur tambahan salah satunya adalah penambahan parameter “data-filter” didalam tag DIV. Parameter Data Filter pada HTML 5 dapat digunakan untuk menyaring atau memfilter tag DIV apa saja yang akan ditampilkan di browser. berikut logo resmi HTML 5:

Ok kita langsung saja.. berikut implementasi parameter data filter pada HTML5 yang akan dikombinasikan dengan JQuery dan CSS3 :
1. Buatlah 3 buah folder yaitu folder “image”,”css” dan “js”. Folder image berisi gambar-gambar yang akan di filter sedangkan css dan js berisi file pendukung. File pendukung silahkan download di link download yg ada dibawah.
2. Buatlah CSS kemudian simpen dengan nama style.css pada folder css, berikut isi lengkap dari file style.css

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="style.css"]
 .creations-filter a {
 margin-right: 10px;
 color:#666;
 text-decoration:none;
 }

.creations-filter a.current {
 font-weight:bold;
 }

.creations-filter {
 text-align: center;
 }

.panel-body {
 width: 920px;
 margin:auto;
 }

.creations-container {

}
 img {
 margin:5px;
 }

.isotope-item {
 z-index: 2;
 }
 .isotope-hidden.isotope-item {
 pointer-events: none;
 z-index: 1;
 }
 .isotope,
 .isotope .isotope-item {
 /* change duration value to whatever you like */

-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 transition-duration: 0.8s;
 }
 .isotope {
 -webkit-transition-property: height, width;
 -moz-transition-property: height, width;
 transition-property: height, width;
 }
 .isotope .isotope-item {
 -webkit-transition-property: -webkit-transform, opacity;
 -moz-transition-property: -moz-transform, opacity;
 transition-property: transform, opacity;
 }
 [/css]

3. Desain tampilan menggunakan HTML5 seperti berikut simpan dengan nama index.html

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Bootstrap 3 and Isotope jQuery Image Centering - jsFiddle demo</title>

</head>
 <body>
 <div class="container">

<div class = "panel panel-info">

<div class = "panel-heading">
 <h3 style = "text-align: center;"><img src="image/header.png" width="200"></h3>

<div class="creations-filter">

<a href="#all" data-filter="*" class="active btn btn-default">All Creations</a>
 <a href="#scratch" data-filter=".mikrotik" class="btn btn-default">Mikrotik</a>
 <a href="#games" data-filter=".hotel" class="btn btn-default">Hotel</a>

</div>
 </div>

<div class = "panel-body center">

<div class="creations-container">

<div class="mikrotik">
 <img src="image/DISCOVERY1.png" alt="image" width="200">
 </div>

<div class="hotel">
 <img src="image/holiday-resort-lombok.jpg" width="200" alt="image">
 </div>
 <div class="mikrotik">
 <img src="image/MTCNA.png" alt="image" width="200">
 </div>

<div class="hotel">
 <img src="image/logo1.png" alt="image" width="200">
 </div>

<div class="mikrotik">
 <img src="image/Mikrotik-4-e1400047790920.png" width="200">
 </div>
 <div class="mikrotik">
 <img src="image/MTCRE.png" alt="image" width="200">
 </div>

</div>

</div>
 </div> <!-- END container div -->


dibagian head tambahkan css dan javascipt :

 

<script type='text/javascript' src='js/jquery-1.9.1.js'></script>

<link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type='text/javascript' src="js/jquery.isotope.min.js"></script>

Berikutnya tambahkan JQuery dibagian akhir dari file index.html

&lt;script type='text/javascript'&gt;//&lt;![CDATA[
 
$(window).load(function(){
 var $container = $('.creations-container');
 $container.isotope({
 filter: '.hotel',
 animationOptions: {
 duration: 750,
 easing: 'linear',
 queue: false
 }
 });
 
$('.creations-filter a').click(function(){
 $('.creations-filter .current').removeClass('current');
 $(this).addClass('current');
 
var selector = $(this).attr('data-filter');
 $container.isotope({
 filter: selector,
 animationOptions: {
 duration: 750,
 easing: 'linear',
 queue: false
 }
 });
 return false;
 });
 });
 //]]&gt;
 
&lt;/script&gt;

 

terakhir silahkan di coba. Untuk Sourcecode lengkapnya silahkan download disini

Related Post

Jquery: Mengisi Form Input Otomatis Berdasarkan Ka... Ada beberapa kasus yang mengharuskan kita untuk mengisi form input otomatis berdasarkan kata kunci (keyword) tertentu. Misalnya form pembayaran SPP si...
Membuat Image Galery Lightshot Seperti Facebook Setelah mendapatkan kasus bagaimana membuat Image Galery Lightshot seperti facebook pada salah satu project website ada keinginan untuk memposting ata...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

four − two =