http://www.htmleaf.com/jQuery/Layout-Interface/201501171219.html
這是一款非常實用的 jQuery 內(nèi)容過濾器插件。一個設(shè)計良好的內(nèi)容過濾系統(tǒng)能夠為用戶帶來最佳的體驗和方便。如果你的網(wǎng)站有大量不同類別的內(nèi)容，例如一個商務(wù)網(wǎng)站，那么使用這個內(nèi)容過濾器系統(tǒng)能夠使客戶非常容易的就找到他們想要的商品。
在這個內(nèi)容過濾器系統(tǒng)中使用了 jQuery、CSS3 Transitions 和 CSS3 Transformations 來制作。
該jQuery內(nèi)容過濾器插件中集成了一款強大的內(nèi)容過濾插件- MixItUp 。MixItUp是一個能夠提供過濾和排序的jQuery插件。
這個jQuery內(nèi)容過濾器插件的HTML結(jié)構(gòu)稍微有點復(fù)雜。首先，它有兩個主要的內(nèi)容塊：<header>和<main>。<main> 用于頁面主體部分，它包裹了圖片畫廊.cd-gallery和過濾器選項面板.cd-filter。另外，還有一個標(biāo)簽導(dǎo)航（嵌套了兩層div）和一個觸發(fā)側(cè)邊欄的按鈕.cd-filter-trigger。
你還會注意到有很多的class和data-filters屬性，它們并不是用于賦予樣式的。
<header class="cd-header"> <h1>Content Filter</h1></header> <main class="cd-main-content"> <div class="cd-tab-filter-wrapper"> <div class="cd-tab-filter"> <ul class="cd-filters"> <li class="placeholder"> <a data-type="all" href="#0">All</a> <!-- selected option on mobile --> </li> <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li> <li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li> <li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li> </ul> <!-- cd-filters --> </div> <!-- cd-tab-filter --> </div> <!-- cd-tab-filter-wrapper --> <section class="cd-gallery"> <ul> <li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li> <li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li> <li><!-- ... --></li> <li class="gap"></li> </ul> <div class="cd-fail-message">No results found</div> </section> <!-- cd-gallery --> <div class="cd-filter"> <form> <div class="cd-filter-block"> <h4>Block title</h4> <div class="cd-filter-content"> <!-- filter content --> </div> <!-- cd-filter-content --> </div> <!-- cd-filter-block --> </form> <a href="#0" class="cd-close">Close</a> </div> <!-- cd-filter --> <a href="#0" class="cd-filter-trigger">Filters</a></main> <!-- cd-main-content --> |
這里要說的一個有趣的問題是：如何通過jQuery來定義和使用一些class來改變它們的行為。
例如：在所有的設(shè)備上，內(nèi)容過濾器導(dǎo)航條被固定在窗口的頂部，為了達到這種效果，我們在<main>元素上使用 .is-fixed class，這樣我們就可以控制它的子元素。特別的是， .cd-tab-filter-wrapper 的position是static的，而 .cd-filter 和 .cd-filter-trigger 的position是absolute的（相對于 .cd-main-content 元素）。當(dāng)我們在 .cd-main-content 上使用 .is-fixed 類的時候，我們將所有這些元素的position都修改為Fixed的。
.cd-tab-filter-wrapper { background-color: #ffffff; z-index: 1;} .cd-filter { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: #ffffff; z-index: 2; transform: translateX(-100%); transition: transform 0.3s, box-shadow 0.3s;} .cd-filter-trigger { position: absolute; top: 0; left: 0; height: 50px; width: 60px; z-index: 3;} .cd-main-content.is-fixed .cd-tab-filter-wrapper { position: fixed; top: 0; left: 0; width: 100%;} .cd-main-content.is-fixed .cd-filter { position: fixed; height: 100vh; overflow: hidden;} .cd-main-content.is-fixed .cd-filter-trigger { position: fixed;} |
另外值得一提的是，.filter-is-visible class。當(dāng)用戶觸發(fā)內(nèi)容過濾器面板時它被一些元素所使用。在所有的設(shè)備上，它被用于修改 .cd-filter 的translateX值（從-100%到0）。在大屏幕設(shè)備上（分辨率大于1170px），.cd-gallery和.cd-tab-filter也使到它，并減少它們的寬度，這樣可以使內(nèi)容過濾器面板不會遮住畫廊內(nèi)容。用戶可以不關(guān)閉內(nèi)容過濾器面板而看到畫廊內(nèi)容的變化情況。
為了實現(xiàn)內(nèi)容過濾器功能，我們集成了jQuery MixItUp 插件。要在畫廊中初始化這個插件，我們使用 mixItUp() 方法，并定義 buttonFilter 來包含所有過濾器的自定義功能。
我們使用jQuery來打開和關(guān)閉內(nèi)容過濾器面板，并將它固定在屏幕的左側(cè)位置，不隨頁面向下滾動。
聯(lián)系客服
