jQuery套件《Quicksand》畫面酷炫重新排序篩選項目

梅問題-jQuery套件《Quicksand》重新排序篩選項目
  最近梅干接的網頁專案中,遇到一個相當有趣的功能,就是上方有所有的分類項目,當使用者點了某一類別後,畫面就會自動篩選,並重新排列,如此一下來就無需換頁,而本來梅干打算自己動手寫,但上網谷哥一下後,發現網路上已有不少的相關套件可用,在研究了幾款的篩選套件後,發現Quicksand最為簡單,除了有類別排序外,還加入了CSS3滾動效果,讓在篩選項目重新排列時,畫面更有變化性,而梅干從官網下載範例後,也作了點小修正,讓原先只有二筆的分類項目,更改為無限,因此可任意的新增所需的項目,且無需更改js立即就使用,因此有需項目篩選的朋友,不妨也可參考看看囉!

Quicksand:
網站名稱:Quicksand
官方網站:http://razorjack.net/quicksand/
範例下載:官方網站 | 本站下載
範例預覽:官方網站 | 本站預覽

Step1
首先,先將javascript一一的載入到網頁中。
梅問題-jQuery套件《Quicksand》重新排序篩選項目
Step2
接著是HTML的結構,而結構也很單純,上方是分類選單,同時data-value則是分類搜尋名稱,下方是篩選的項目,篩選規則是透過class來設定,因此要與上方的篩選項目的data-value一致即可。
梅問題-jQuery套件《Quicksand》重新排序篩選項目
Step3
這樣就完成了。
梅問題-jQuery套件《Quicksand》重新排序篩選項目
Step4
當點上方的分類選項時,下方立即會進行篩選與排序,同時還會有css3的動態效果,畫面感覺相當的酷,因此有需要的朋友,也趕快來下載囉!
梅問題-jQuery套件《Quicksand》重新排序篩選項目

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。