"glossary"
Bootstrap 3.3.0 Snippet by timbusken

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
<link rel="stylesheet" href="http://timbusken.com/css/dropdown-enhancement.css">
<script src="http://timbusken.com/js/dropdown-enhancement.js"></script>
<div class="container">
<div class="row">
<h1>Isotope - filtering & sorting</h1>
<h2>Filter</h2>
<div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".metal">metal</button>
<button class="button" data-filter=".transition">transition</button>
<button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
<button class="button" data-filter=":not(.transition)">not transition</button>
<button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
<button class="button" data-filter="numberGreaterThan50">number > 50</button>
<button class="button" data-filter="ium">name ends with –ium</button>
</div>
<h2>Sort</h2>
<div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
<button class="button" data-sort-by="weight">weight</button>
<button class="button" data-sort-by="category">category</button>
</div>
<div class="isotope">
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Mercury</h3>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- button ---- */
.button {
display: inline-block;
padding: 0.5em 1.0em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// external js: isotope.pkgd.js
$( document ).ready( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit

Questions / Comments: