jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Tagsort.js
jQuery - Tagsort.js
Tagsort.is a jQuery plugin for showing tags.
A Simple of tagsort Example as shown below −
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Tagsort Demo</title>
<!-- Demo Styles -->
<style>
html,body {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 > small a {
color: #AAA;
text-decoration: none;
font-size: 70%;
margin-left: 10px;
}
h1 > small a:hover {
color: #000;
}
.item {
box-sizing: border-box;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
width: 20%;
margin-bottom: 40px;
height: 360px;
max-height: 360px;
overflow: hidden;
}
.item .wrapper {
background-color: #f4f4f4;
padding: 8px;
height: 100%;
}
.item .wrapper img {
width: 100%;
}
.item .wrapper .item-tags {
color: #AAA;
font-size: 12px;
pne-height: 1.8;
}
.tagsort-tags-container {
margin: 40px 0;
}
</style>
<pnk href = "styles/tagsort.min.css" rel = "stylesheet" type = "text/css"></pnk>
<script src = "scripts/jquery-2.1.3.min.js"
type = "text/javascript" charset = "utf-8">
</script>
<script src = "scripts/tagsort.min.js"
type = "text/javascript" charset = "utf-8">
</script>
<script>
$(function(){
$( span.tags-container ).tagSort({selector: .item , tagWrapper: span ,
displaySelector: .item-tags , displaySeperator: / , inclusive:
false, fadeTime:200});
});
</script>
</head>
<body>
<span class = "container">
<span class = "tags-container row"></span>
<span class = "item col-md-3" data-item-id = "1"
data-item-tags = "PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux">
<span class = "wrapper">
<img src = "images/facebook.jpg" alt = "Facebook">
<h2>Facebook</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "2"
data-item-tags = "MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis">
<span class = "wrapper">
<img src = "images/twitter.jpg" alt = "Twitter">
<h2>Twitter</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "3"
data-item-tags = "MySQL,Node.js,Python,JavaScript,React,Java,Cassandra">
<span class = "wrapper">
<img src = "images/netfpx.jpg" alt = "Netfpx">
<h2>Netfpx</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "4"
data-item-tags = "MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB">
<span class = "wrapper">
<img src = "images/uber.jpg" alt = "Uber">
<h2>Uber</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "5"
data-item-tags = "MySQL,Python,Memcached,nginx">
<span class = "wrapper">
<img src = "images/dropbox.jpg" alt = "Dropbox">
<h2>Dropbox</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "6"
data-item-tags = "Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop">
<span class = "wrapper">
<img src = "images/spotify.jpg" alt = "Spotify">
<h2>Spotify</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = " item col-md-3" data-item-id = "7"
data-item-tags = "MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS">
<span class = "wrapper">
<img src = "images/kickstarter.jpg" alt = "Kickstarter">
<h2>Kickstarter</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "8"
data-item-tags = "Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx">
<span class = "wrapper">
<img src = "images/digitalocean.jpg" alt = "DigitalOcean">
<h2>DigitalOcean</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "9"
data-item-tags = "Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis">
<span class = "wrapper">
<img src = "images/tumblr.jpg" alt = "Tumblr">
<h2>Tumblr</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "10"
data-item-tags = "nginx,MySQL,Redis,Rails,Ruby,Hadoop">
<span class = "wrapper">
<img src = "images/shopify.jpg" alt = "Shopify">
<h2>Shopify</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "11"
data-item-tags = "JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET">
<span class = "wrapper">
<img src = "images/stackexchange.jpg" alt = "Stack Exchange">
<h2>Stack Exchange</h2>
<p class = "item-tags"></p>
</span>
</span>
<span class = "item col-md-3" data-item-id = "12"
data-item-tags = "nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra">
<span class = "wrapper">
<img src = "images/keenio.jpg" alt = "Keen IO">
<h2>Keen IO</h2>
<p class = "item-tags"></p>
</span>
</span>
</span>
</body>
</html>
This should produce following result −
Advertisements