• jQuery Video Tutorials

jQuery - Tagsort.js

Advertisements

Previous Page
Next Page  

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;
            line-height: 1.8;
         }
			
         .tagsort-tags-container {
            margin: 40px 0;
         }
      </style>
		
      <link href = "styles/tagsort.min.css" rel = "stylesheet" type = "text/css"></link>
		
      <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(){
            $('div.tags-container').tagSort({selector:'.item', tagWrapper:'span',
               displaySelector: '.item-tags', displaySeperator: ' / ', inclusive:
               false, fadeTime:200});
         });
      </script>
   </head>
	
   <body>
      <div class = "container">

         <div class = "tags-container row"></div>
			
         <div class = "item col-md-3" data-item-id = "1" 
            data-item-tags = "PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux">
            <div class = "wrapper">
               <img src = "images/facebook.jpg" alt = "Facebook">
               <h2>Facebook</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "2"  
            data-item-tags = "MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis">
            <div class = "wrapper">
               <img src = "images/twitter.jpg" alt = "Twitter">
               <h2>Twitter</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "3" 
            data-item-tags = "MySQL,Node.js,Python,JavaScript,React,Java,Cassandra">
            <div class = "wrapper">
               <img src = "images/netflix.jpg" alt = "Netflix">
               <h2>Netflix</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "4" 
            data-item-tags = "MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB">
            <div class = "wrapper">
               <img src = "images/uber.jpg" alt = "Uber">
               <h2>Uber</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "5" 
            data-item-tags = "MySQL,Python,Memcached,nginx">
            <div class = "wrapper">
               <img src = "images/dropbox.jpg" alt = "Dropbox">
               <h2>Dropbox</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "6" 
            data-item-tags = "Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop">
            <div class = "wrapper">
               <img src = "images/spotify.jpg" alt = "Spotify">
               <h2>Spotify</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = " item col-md-3" data-item-id = "7" 
            data-item-tags = "MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS">
            <div class = "wrapper">
               <img src = "images/kickstarter.jpg" alt = "Kickstarter">
               <h2>Kickstarter</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "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/digitalocean.jpg" alt = "DigitalOcean">
               <h2>DigitalOcean</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "9" 
            data-item-tags = "Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis">
            <div class = "wrapper">
               <img src = "images/tumblr.jpg" alt = "Tumblr">
               <h2>Tumblr</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "10"
            data-item-tags = "nginx,MySQL,Redis,Rails,Ruby,Hadoop">
            <div class = "wrapper">
               <img src = "images/shopify.jpg" alt = "Shopify">
               <h2>Shopify</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "11" 
            data-item-tags = "JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET">
            <div class = "wrapper">
               <img src = "images/stackexchange.jpg" alt = "Stack Exchange">
               <h2>Stack Exchange</h2>
               <p class = "item-tags"></p>
            </div>
         </div>
			
         <div class = "item col-md-3" data-item-id = "12" 
            data-item-tags = "nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra">
            <div class = "wrapper">
               <img src = "images/keenio.jpg" alt = "Keen IO">
               <h2>Keen IO</h2>
               <p class = "item-tags"></p>
            </div>
				
         </div>
      </div>
   </body>
</html>

This should produce following result −

Click here
Advertisements