網頁設計, 網頁資源

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

梅干 2017/02/27
梅問題-Bootstrap教學-Bootstrap專用的資料篩選器
  之前梅干曾分享過Quicksand這套jQeury外掛,來動態重新排序資料,雖然說Quicksand使用上很方便,只需在標籤內輸入該項目的名稱,當使用點選選單時,再去作比對,把相同的項目給秀出來,如此一來就可實現出,免重新整理,就可達到資料篩選的效果,是一個相當不錯的外掛效果,但唯一比較讓梅干感到困擾的是,在產生html標籤中,還需針對項目,去設定它的ID序號,因此無論是靜態頁面,還是日後要套用程式時,相當的麻煩。
  因此最近梅干花了點時間,找到另一個也是資料篩選的jQuery語法,不但整合了Bootstrap的GridSystem,同時設定上更簡單,而梅干也作了點小修正,讓在設定上更加的方便,無論是靜態或套程式都方便,因此有需要的朋友,現在也一塊來看看!
Step1
首先,先建立搜尋選單項目的名稱,而「data-rel」是項目篩選的ID。
<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>

Step2
首先,將id設為「combo」,接著再資料項目的區塊中,先建立一個ds接著後方再打項目的ID名稱。
<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>

Step3
加入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);
    }

Step4
接著分別先載入jQuery與Bootstrap的js後,再下方輸入篩選器的控制碼。
<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>  

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