Jquery exclusive list filtering plug-in and jquery exclusive Filtering

Jquery exclusive list filtering plug-in and jquery exclusive Filtering

Today, we are going to bring you a very useful jquery list filtering plug-in, with very good results. When you click an item, the animation filters the item list. Let's take a look:

 

Download Online Preview source code

 

Let's take a look at the implementation code:

Html code:

<Div class = "row"> <div class = "small-12 columns small-centered"> <fieldset class = "controls"> <div class = "row"> <! -- Filter buttons --> <div class = "small-9 columns" id = "controlsfilter"> <button class = "filter tiny round active" data-filter = "all"> all </button> <button class = "filter tiny round" data-filter = ". newyork "> temptation </button> <button class =" filter tiny round "data-filter = ". california "> pure </button> <button class =" filter tiny round "data-filter = ". texas "> Star </button> </div> <! -- Layout buttons --> <div class = "small-3 columns" id = "controlslayout"> <label> Layout: </label> <div class = "controlslayout"> <input type = "radio" class = "grid" checked = "checked" name = "layout" id = "grid"> <label id = "labelgrid" for = "grid"> <I class = "fa-th"> </I> </label> <input type = "radio" class = "list" name = "layout" id = "list"> <label id = "labellist" for = "list"> <I class = "fa-bars"> </I> </label> </div> </Div> </fieldset> </div> <div class = "row"> <! -- Container for images --> <div class = "small-12 columns small-centered"> <div class = "container" id = "Container"> <ul class = "small- block-grid-3 medium-block-grid-4 large-block-grid-5 "> <li class =" mix newyork "style =" display: inline-block; "> </li> <li class =" mix newyork "style =" display: inline-block; "> </li> <li class =" mix california "style =" display: inline-block; "> </li> <li class =" mix newyork "style =" display: inline-block; "> </li> <li class =" mix texas "style =" display: inline-block; "> </li> <li class =" mix newyork "style =" display: inline-block; "> </li> <li class =" mix newyork "style =" display: inline-block; "> </li> <li class =" mix california "style =" display: inline-block; "> </li> <li class =" mix california "style =" display: inline-block; "> </li> <li class =" gap "> </li> <li class =" gap"> </li> </ul> </div>View Code

Css code:

/** Controls **/. controls {padding: 0.5em 0.25em 0.5em 1em;-webkit-box-shadow: 0 0 20px rgba (0, 0, 0 ,. 2);-goog-ms-box-shadow: 0 0 20px rgba (0, 0, 0 ,. 2); box-shadow: 0 0 20px rgba (0, 0, 0 ,. 2);-moz-border-radius: 0 ;}. filter ,. controlslayout label {background: #33 cccc;} button ,. button {margin-bottom: 0.5em; outline: none ;}. controls button. active ,. controlslayout input [type = "radio"]: checked + label {background: #007295 ;}# controlslayout input [type = "radio"] {visibility: hidden; height: 0; width: 0 ;}# controlslayout input [type = "radio"] + label {margin: 0 ;}. controlslayout {display: block;} # controlslayout. fa {font-size: 1.5em; color: # ffffff ;}# labelgrid {border-radius: 1000px 0 0 1000px; padding-top: 0.5rem; padding-right :. 75rem; padding-bottom: 0.3rem; padding-left: 1rem;} # labellist {border-radius: 0 1000px 1000px 0; padding-top: 0.5rem; padding-right: 1rem; padding-bottom: 0.3rem; padding-left :. 75rem;}/** Container **/# Container. mix {display: none;} # Container. large-block-grid-5> li: nth-of-type (5n + 1), # Container. large-block-grid-5> li: nth-of-type (1n) {clear: none ;}View Code

Js Code:

$ ('# Iner '). mixItUp () ;}); $ ('input '). on ('click', function () {if ($ (this ). hasClass ('grid') {$ ('# Container ul '). removeClass ('small-block-grid-1 '). addClass ('small-block-grid-3 medium-block-grid-4 large-block-grid-5');} else if ($ (this ). hasClass ('LIST') {$ ('# Container ul '). removeClass ('small-block-grid-3 medium-block-grid-4 large-block-grid-5 '). addClass ('small-block-grid-1') ;}}); // @ sourceURL = pen. jsView Code

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/5794

Filtering functions of jQuery's isotope plug-in

Hello !!
<Ul id = "filters" class = "option-set clearfix" data-option-key = "filter"> <li> <a href = "# filter" data-option- value = ". first: not (. second) "class =" selected "> first group </a> </li> <a href =" # filter "data-option-value = ". second "> group 2 </a> </li> </ul>
Please adopt the answer. You can use it for me.
 
How does jquery implement filtering of a table, that is, searching and filtering by condition?

What software are you using? EXCEL? If yes, click the space in the upper-left corner of A and 1, and select the drop-down menu. Data => filtering => automatic filtering is OK. each column can have the following conditions, or multiple conditions can be filtered at the same time.