<!DOCTYPE html>
<
html
lang = "en">
<
head
>
<
meta
charset = "UTF-8">
<
title
>jQuery Tagsort Plugin</
title
>
<
style
>
html, body {
margin: 0;
padding: 0;
}
body {
text-align:center;
background-color: #FFF;
font-family:
"HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
.height{
height:10px;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 > small a {
color: #AAA;
text-decoration: none;
font-size: 70%;
margin-left: 10px;
}
.item {
box-sizing: border-box;
float: left;
width: 20%;
position: relative;
min-height: 2px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 50px;
height: 260px;
max-height: 350px;
overflow: hidden;
}
.item .wrapper {
background-color: #C3C3C3;
height: 100%;
padding: 10px;
}
.item .wrapper img {
width: 100%;
height:40%
}
.item .wrapper .item-tags {
color: #eee;
font-size: 12px;
}
.tagsort-tags-container {
margin: 50px 0;
}
</
style
>
<
link
href = "tagsort.css"
rel = "stylesheet"
type = "text/css"></
link
>
<
script
src = "jquery-3.2.1.min.js"
type = "text/javascript" charset = "utf-8">
</
script
>
<
script
src = "tagsort.min.js"
type = "text/javascript"
charset = "utf-8"> </
script
>
<
script
>
$(function(){
$('div.tagsort-tags-container').tagSort({
items:'.item-to-filter',
displaySelector: '.item-tags',
displaySeperator: ' / ',
tagElement: 'span',
tagClassPrefix: false,
itemTagsView: '.item-tags',
itemTagsSeperator: ' ',
itemTagsElement: false,
// Exclusive sorting display elements having all the selected tags
// Inclusive sorting display elements having any of the selected tags
// Single sorting allows only one tag selection by the user
sortType: 'exclusive',
tagAttr: 'data-item-tags',
fadeTime: 200,
});
});
</
script
>
</
head
>
<
body
>
<
h1
style="color:green">GeeksforGeeks </
h1
>
<
b
> jQuery Tagsort Plugin </
b
>
<
div
class="height"></
div
>
<
div
class = "container">
<
div
class = "tagsort-tags-container row"
style="background-color:green"></
div
>
<
div
class = "item-to-filter item col-md-3"
data-item-id = "1"
data-item-tags =
"PHP, React, Memcached, RocksDB, Cassandra, Flux, Rails, Java">
<
div
class = "wrapper">
<
img
src = "images/background1.jpg"
alt = "Computers">
<
h2
>Computers</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class = "item-to-filter item col-md-3"
data-item-id = "2"
data-item-tags =
"MySQL, JavaScript, jQuery, Scala, Rails, Hadoop, Redis">
<
div
class = "wrapper">
<
img
src = "images/background2.jpg"
alt = "Web Programs">
<
h2
>Web Programs</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class = "item-to-filter item col-md-3"
data-item-id = "3"
data-item-tags =
"Node.js, Python, JavaScript, jQuery, React, Java">
<
div
class = "wrapper">
<
img
src =
"images/background3.jpg" alt = "IOT">
<
h2
>IOT</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "4"
data-item-tags =
"MySQL, Python, Objective-C, PostgreSQL, MongoDB">
<
div
class = "wrapper">
<
img
src = "images/geeksimage1.png"
alt = "Data mining">
<
h2
>Data mining</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "5"
data-item-tags =
"MySQL, Python, Memcached, nginx, PHP">
<
div
class = "wrapper">
<
img
src =
"images/geeksimage2.png" alt = "Banking">
<
h2
>Banking</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "6"
data-item-tags =
"Python, Java, jQuery, Cassandra, Hadoop, PostgreSQL, Ruby">
<
div
class = "wrapper">
<
img
src =
"images/geeksimage3.png" alt = "Artificial Intelligence">
<
h2
>Artificial Intelligence</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "7"
data-item-tags =
"Javascript, jQuery, Redis, nginx, Rails, SASS">
<
div
class = "wrapper">
<
img
src =
"images/gfg1.png" alt = "Health care">
<
h2
>Health care</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "8"
data-item-tags =
"Go, Ruby, MySQL, Redis, Memcached, SASS, Rails, nginx">
<
div
class = "wrapper">
<
img
src = "images/gfg6.png" alt = "Digital marketing">
<
h2
>Digital marketing</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "9"
data-item-tags =
"Ruby, MySQL, Hadoop, nginx, PHP, Scala, Memcached">
<
div
class = "wrapper">
<
img
src = "images/gfg2.jpg" alt = "SEO">
<
h2
>SEO</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class =
"item-to-filter item col-md-3" data-item-id = "10"
data-item-tags =
"nginx, MySQL, Redis, Rails, Ruby, Hadoop, PHP">
<
div
class = "wrapper">
<
img
src =
"images/gfg3.png" alt = "Low level programming">
<
h2
>Low level programming</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class = "item-to-filter item col-md-3" data-item-id = "11"
data-item-tags =
"JavaScript, Python, jQuery, Redis, Java, Go, Cassandra, .NET, MongoDB">
<
div
class = "wrapper">
<
img
src = "images/gfg4.jpg" alt = "Stock Exchange">
<
h2
>Stock Exchange</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
<
div
class = "item-to-filter item col-md-3" data-item-id = "12"
data-item-tags =
"nginx, Redis, Python, Java, JavaScript, Scala, Cassandra">
<
div
class = "wrapper">
<
img
src = "images/gfg5.jpg" alt = "Reporting">
<
h2
>Reporting</
h2
>
<
p
class = "item-tags"></
p
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>