日期：2012-5-2來源： GBin1.com

在線演示1 在線演示2 本地下載

大家在開發(fā)過程中往往需要有效的展示不同類別下的圖片或者文字內(nèi)容，這個(gè)過程中你可能需要使用不同的標(biāo)簽來過濾不同類別下的圖片內(nèi)容，或者提供給用戶一個(gè)方便的方式來選擇不同的列別。今天我們這里將使用jQuery插件 - filtrify 來快速精致的實(shí)現(xiàn)一個(gè)超酷的摩托車分類展示應(yīng)用，大家可以看到使用filtrify來使用標(biāo)簽分類顯示圖片是多么的簡(jiǎn)單，而且使用isotype來生成動(dòng)畫展示特效，希望大家喜歡！

這個(gè)插件使用了很多偽類，例如:after和:before，如果你不熟悉它，可以看看 這篇文章 ，希望對(duì)大家有幫助！

注意IE8需要指定!DOCTYPE來支持偽類:after和before中的"content“屬性，同時(shí)如果你需要支持IE7，你可以考慮使用 IE7.js 。

HTML代碼

在HTML代碼中，我們使用HTML5的data屬性來定義類別，如下：

      <ul id="container">
 <li data-tag="Ducati"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
 <li data-tag="Ducati"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><span>Ducati</span></lspan>
 <li data-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><span>Ducati</span></lspan>
 <li data-tag="Ducati"><strong>Streetfighter 848</strong><img src="img/motor/Color_SF-848_R_NC_298x168.jpg"><span>Ducati</span></lspan>
 <li data-tag="Ducati"><strong>Diavel Carbon</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span>Ducati</span></lspan>
 <li data-tag="BMW"><strong>BMW K1300S HP</strong><img src="img/motor/2012-BMW-K1300SHPb-298x168.jpg"><span>BMW</span></lspan>
 <li data-tag="BMW"><strong>2012 BMW G650GS</strong><img src="img/motor/2012-BMW-G650GSd-298x168.jpg"><span>BMW</span></lspan>
 <li data-tag="Beneli"><strong>Tre-K 1130 Amazonas</strong><img src="img/motor/2012-Benelli-TreK1130Amazonas1-298x168.jpg"><span>Beneli</span></lspan>
 <li data-tag="KTM"><strong>2012 KTM 1190 RC8R</strong><img src="img/motor/2012-KTM-1190RC8R4-298x168.jpg"><span>KTM</span></lspan>
 <li data-tag="KTM"><strong>012 KTM 990 Duke R</strong><img src="img/motor/2012-KTM-990DukeR4-298x168.jpg"><span>KTM</span></lspan>
 <li data-tag="Bimota"><strong>DB10B Motard</strong><img src="img/motor/2012-Bimota-DB10BMotard1-298x168.jpg"><span>Bimota</span></lspan>
 <li data-tag="Yamaha"><strong>DB10B Motard</strong><img src="img/motor/2012-Yamaha-YZFR1d-298x168.jpg"><span>Yamaha</span></lspan>
 <li data-tag="Yamaha"><strong>VMAX / VMX17</strong><img src="img/motor/2012-Yamaha-VMAX-VMX17a-298x168.jpg"><span>Yamaha</span></lspan>
 <li data-tag="Honda"><strong>Honda CBR1000RR</strong><img src="img/motor/2012-Honda-CBR1000RRe-298x168.jpg"><span>Honda</span></lspan>
 <li data-tag="Suzuki"><strong>Hayabusa</strong><img src="img/motor/2012-Suzuki-Hayabusaa-298x168.jpg"><span>Suzuki</span></lspan>
 <li data-tag="Suzuki"><strong>V-Strom 1000 SE</strong><img src="img/motor/2012-Suzuki-VStrom1000SE1-298.x168.jpg"><span>Suzuki</span></lspan>
 <li data-tag="Kawasaki"><strong>Ninja ZX-14R</strong><img src="img/motor/2012-Kawasaki-NinjaZX14Ra-298x168.jpg"><span>Kawasaki</span></lspan>
 <li data-tag="Harley Davidson"><strong>XL883N Iron 883</strong><img src="img/motor/2012-Harley-Davidson-XL883N-Iron883z-298x168.jpg"><span>Harley Davidson</span></lspan>
</ul>
    

CSS

這里我們使用filterify的缺省css，并且添加isotope的css樣式定制，如果你沒有使用過isotope，請(qǐng)查看 這篇文章 ，樣式代碼如下：

      /**** 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.8s;
 -moz-transition-duration: 0.8s;
 -ms-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
}

.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: 0s;
 -moz-transition-duration: 0s;
 -ms-transition-duration: 0s;
 -o-transition-duration: 0s;
 transition-duration: 0s;
}
    

Javascript代碼

      $(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代碼非常簡(jiǎn)單，只需要在filtrify的callback方法中調(diào)用isotope即可。是不是非常簡(jiǎn)單。

希望大家喜歡這個(gè)超酷的內(nèi)容過濾插件。如果你有任何問題和建議請(qǐng)給我們留言，謝謝！

來源： 使用jQuery插件filtrify實(shí)現(xiàn)的超酷動(dòng)態(tài)標(biāo)簽分類摩托車新款展示