Use the jQuery plug-in filtrify to implement the new display of ultra-Cool dynamic tag classification motorcycles

During development, you often need to effectively display images or text content of different categories. In this process, you may need to use different tags to filter the image content of different categories, you can also select different columns in a convenient way. Today, we will use the jQuery plug-in-filtrify to quickly and precisely implement a cool motorcycle classification display application. You can see how easy it is to use filtrify to display images by TAG classification, we also hope you will like it if you use isotype to generate animation display effects!
This plug-in uses many pseudo classes, such as after and before. If you are not familiar with this plug-in, you can read this article and hope it will be helpful to everyone!
Note that IE8 must be specified! DOCTYPE to support pseudo classes: the "content" attribute in after and before. If you need to support IE7, you can consider using IE7.js.
HTML code
In HTML code, we use the HTML5 data attribute to define a category, as shown below:
<Ul id = "container">
<Li data-tag = "Ducati"> <strong> Hypermotard 796 Silver </strong> <span> Ducati </span> </lspan>
<Li data-tag = "ducatati"> <strong> Hypermotard 796 Red </strong> <span> ducatati </span> </lspan>
<Li data-tag = "ducatati"> <strong> Hypermotard 1100 Evo Red </strong> <span> ducatati </span> </lspan>
<Li data-tag = "Ducati"> <strong> Streetfighter 848 </strong> <span> Ducati </span> </lspan>
<Li data-tag = "ducata"> <strong> Diavel Carbon </strong> <span> ducata </span> </lspan>
<Li data-tag = "BMW"> <strong> BMW K1300S HP </strong> <span> BMW </span> </lspan>
<Li data-tag = "BMW"> <strong> 2012 BMW G650GS </strong> <span> BMW </span> </lspan>
<Li data-tag = "Beneli"> <strong> Tre-K 1130 Amazonas </strong> <span> Beneli </ span> </lspan>
<Li data-tag = "KTM"> <strong> 2012 KTM 1190 RC8R </strong> <span> KTM </span> </lspan>
<Li data-tag = "KTM"> <strong> 012 KTM 990 Duke R </strong> <span> KTM </ span> </lspan>
<Li data-tag = "Bimota"> <strong> DB10B Motard </strong> <span> Bimota </span> /lspan>
<Li data-tag = "Yamaha"> <strong> DB10B Motard </strong> <span> Yamaha </span> </lspan>
<Li data-tag = "Yamaha"> <strong> VMAX/VMX17 </strong> <span> Yamaha </span> </lspan>
<Li data-tag = "Honda"> <strong> Honda CBR1000RR </strong> <span> Honda </span> </lspan>
<Li data-tag = "Suzuki"> <strong> Hayabusa </strong> <span> Suzuki </span>/ lspan>
<Li data-tag = "Suzuki"> <strong> V-Strom 1000 SE </strong> <span> Suzuki </ span> </lspan>
<Li data-tag = "Kawasaki"> <strong> Ninja ZX-14R </strong> <span> Kawasaki </span> /lspan>
<Li data-tag = "Harley David son"> <strong> XL883N Iron 883 </strong> <span> Harley David son </ span> </lspan>
</Ul>
CSS
Here we use filterify's default css and add isotope css style customization. If you have not used isotope, please refer to this article. The style code is as follows:
/***** Isotope Filtering ****/

. Isotope-item {
Z-index: 2;
}

. Isotope-hidden.isotope-item {
Pointer-events: none;
Z-index: 1;
}

/***** Isotope CSS3 transitions ****/

. Isotope,
. Isotope. isotope-item {
-Webkit-transition-duration: 0.8 seconds;
-Moz-transition-duration: 0.8 s;
-Ms-transition-duration: 0.8 s;
-O-transition-duration: 0.8 s;
Transition-duration: 0.8 s;
}

. Isotope {
-Webkit-transition-property: height, width;
-Moz-transition-property: height, width;
-Ms-transition-property: height, width;
-O-transition-property: height, width;
Transition-property: height, width;
}

. Isotope. isotope-item {
-Webkit-transition-property:-webkit-transform, opacity;
-Moz-transition-property:-moz-transform, opacity;
-Ms-transition-property:-ms-transform, opacity;
-O-transition-property: top, left, opacity;
Transition-property: transform, opacity;
}

/***** Disabling Isotope CSS3 transitions ****/

. Isotope. no-transition,
. Isotope. no-transition. isotope-item,
. Isotope. isotope-item.no-transition {
-Webkit-transition-duration: 0 s;
-Moz-transition-duration: 0 s;
-Ms-transition-duration: 0 s;
-O-transition-duration: 0 s;
Transition-duration: 0 s;
}
Javascript code
$ (Function (){

Var container = $ ("# container ");

Container. isotope ({
ItemSelector: 'ul # container> li ',
LayoutMode: 'fitrows'
});

$. Filtrify ("container", "placeHolder ",{
Hide: false,
Callback: function (query, match, mismatch ){
Container. isotope ({filter: $ (match )});
}
});

});
Javascript code is very simple. You only need to call isotope in the filtrify callback method. Is it very simple.
I hope you will like this cool content filtering plug-in. If you have any questions or suggestions, please leave us a message. Thank you!

From GBin1.com