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 jQuery... SyntaxHighlighter. all ();

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:

• Hypermotard 796 SilverDucati
  
• Hypermotard 796 RedDucati
  
• Hypermotard 1100 Evo RedDucati
  
• Streetfighter 848Ducati
  
• Diavel CarbonDucati
  
• BMW K1300S HPBMW
  
• 2012 BMW G650GSBMW
  
• Tre-K 1130 AmazonasBeneli
  
• 2012 KTM 1190 RC8RKTM
  
• 012 KTM 990 Duke RKTM
  
• DB10B MotardBimota
  
• DB10B MotardYamaha
  
• VMAX/VMX17Yamaha
  
• Honda CBR1000RRHonda
  
• HayabusaSuzuki
  
• V-Strom 1000 SESuzuki
  
• Ninja ZX-14RKawasaki
  
• XL883N iron883Harley David son
  

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