網頁開發 網頁設計

Bootstrap教學-將Bootstrap網格系統加入資料篩選器功能

2017/02/26

梅問題-Bootstrap教學-Bootstrap專用的資料篩選器

  之前梅干曾分享過Quicksand這套jQeury外掛,來動態重新排序資料,雖然說Quicksand使用上很方便,只需在標籤內輸入該項目的名稱,當使用點選選單時,再去作比對,把相同的項目給秀出來,如此一來就可實現出,免重新整理,就可達到資料篩選的效果,是一個相當不錯的外掛效果,但唯一比較讓梅干感到困擾的是,在產生html標籤中,還需針對項目,去設定它的ID序號,因此無論是靜態頁面,還是日後要套用程式時,相當的麻煩。


  因此最近梅干花了點時間,找到另一個也是資料篩選的jQuery語法,不但整合了Bootstrap的GridSystem,同時設定上更簡單,而梅干也作了點小修正,讓在設定上更加的方便,無論是靜態或套程式都方便,因此有需要的朋友,現在也一塊來看看!


Step1
首先,先建立搜尋選單項目的名稱,而「data-rel」是項目篩選的ID。
[html]
<div class="container">
<div class="select-btn">
<a href="#" data-rel="all">全部</a>
<a href="#" data-rel="animal">動物</a>
<a href="#" data-rel="building">建築</a>
<a href="#" data-rel="landscape">風景</a>
</div>
</div>
[/html]
Step2
首先,將id設為「combo」,接著再資料項目的區塊中,先建立一個ds接著後方再打項目的ID名稱。
[html]
<div class="container" >
<div class="row" id="combo">
<div class="col-md-4 ds animal">
<img src="https://unsplash.it/5472/3648?image=1074" alt="animal" />
</div>
………..
</div>
</div>
[/html]
Step3
加入CSS樣式效果。
[css]
.container{text-align: center;}
.select-btn>a{
display: inline-block;
padding: 7px 10px;
border: solid 1px #333;
color: #333;
margin-top: 20px;
margin-bottom: 20px;
text-decoration: none;
}
.select-btn>a:hover{
background: #333;
color: #fff;
}
#combo>div{
overflow: hidden;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.ds {
-lifekit-transform: scale(0);
transform: scale(0);
-lifekit-transition: all 350ms ease;
transition: all 350ms ease;
}
.scale {
transform: scale(1);
}
[/css]
Step4
接著分別先載入jQuery與Bootstrap的js後,再下方輸入篩選器的控制碼。
[javascript]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$(‘.ds’).addClass(‘all’).addClass(‘scale’);
$(‘#combo img’).addClass(‘img-responsive’);
var selectedClass = "";
$(".select-btn>a").click(function(){
selectedClass = $(this).attr("data-rel");
$("#combo").fadeTo(100, 0.1);
$("#combo div").not("."+selectedClass).fadeOut().removeClass(‘scale’);
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass(‘scale’);
$("#combo").fadeTo(300, 1);
}, 300);

return false;
});
});
</script>
[/javascript]


Step5
完成後,畫面一開始會將所有的資料項目全部顯示出來。
梅問題-Bootstrap教學-Bootstrap專用的資料篩選器
Step6
當點選後,就會自動切換,並顯示當前所選擇的項目內容,是不是比先前更簡單,少了序號的設定,只需設定對應的名稱就可以,更酷的是也支援Booststrap的網格系統,因此就可任何的設定版面區塊的顯示數量了。
梅問題-Bootstrap教學-Bootstrap專用的資料篩選器
[範例預覽]