|
http://www./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插件,。
HTML結(jié)構(gòu)
這個jQuery內(nèi)容過濾器插件的HTML結(jié)構(gòu)稍微有點復(fù)雜,。首先,，它有兩個主要的內(nèi)容塊：<header>和<main>。<main> 用于頁面主體部分,，它包裹了圖片畫廊.cd-gallery和過濾器選項面板.cd-filter。另外,，還有一個標簽導(dǎo)航（嵌套了兩層div）和一個觸發(fā)側(cè)邊欄的按鈕.cd-filter-trigger,。
你還會注意到有很多的class和data-filters屬性,，它們并不是用于賦予樣式的。
注意：代碼中通過在.cd-gallery使用text: justify;屬性,，然后聯(lián)合.cd-gallery下面的.gap元素來制作畫廊的網(wǎng)格。你需要創(chuàng)建最大行數(shù)-1個.gap元素,。
<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 -->
|
CSS樣式
這里要說的一個有趣的問題是：如何通過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 元素）,。當我們在 .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,。當用戶觸發(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)容的變化情況。
JAVASCRIPT
為了實現(xiàn)內(nèi)容過濾器功能,，我們集成了jQuery MixItUp 插件,。要在畫廊中初始化這個插件，我們使用 mixItUp() 方法,，并定義 buttonFilter 來包含所有過濾器的自定義功能。
我們使用jQuery來打開和關(guān)閉內(nèi)容過濾器面板,，并將它固定在屏幕的左側(cè)位置,，不隨頁面向下滾動,。
|
