Educational

Tagsort.js

Written by

Saim Khalid

in

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 &gt; small a {
        color: #AAA;
        text-decoration: none;
        font-size:70%;
        margin-left:10px;}
			

     h1 &gt; 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;}&lt;/style&gt;&lt;link href ="styles/tagsort.min.css" rel ="stylesheet" type ="text/css"&gt;&lt;/link&gt;&lt;script src ="scripts/jquery-2.1.3.min.js" 
     type ="text/javascript" charset ="utf-8"&gt;&lt;/script&gt;&lt;script src ="scripts/tagsort.min.js" 
     type ="text/javascript" charset ="utf-8"&gt;&lt;/script&gt;&lt;script&gt;$(function(){$('div.tags-container').tagSort({selector:'.item', tagWrapper:'span',
           displaySelector:'.item-tags', displaySeperator:' / ', inclusive:false, fadeTime:200});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="tags-container row"&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="1" 
        data-item-tags ="PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/facebook.jpg" alt ="Facebook"&gt;&lt;h2&gt;Facebook&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="2"  
        data-item-tags ="MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/twitter.jpg" alt ="Twitter"&gt;&lt;h2&gt;Twitter&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="3" 
        data-item-tags ="MySQL,Node.js,Python,JavaScript,React,Java,Cassandra"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/netflix.jpg" alt ="Netflix"&gt;&lt;h2&gt;Netflix&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="4" 
        data-item-tags ="MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/uber.jpg" alt ="Uber"&gt;&lt;h2&gt;Uber&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="5" 
        data-item-tags ="MySQL,Python,Memcached,nginx"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/dropbox.jpg" alt ="Dropbox"&gt;&lt;h2&gt;Dropbox&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="6" 
        data-item-tags ="Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/spotify.jpg" alt ="Spotify"&gt;&lt;h2&gt;Spotify&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=" item col-md-3" data-item-id ="7" 
        data-item-tags ="MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/kickstarter.jpg" alt ="Kickstarter"&gt;&lt;h2&gt;Kickstarter&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="8" 
        data-item-tags ="Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/digitalocean.jpg" alt ="DigitalOcean"&gt;&lt;h2&gt;DigitalOcean&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="9" 
        data-item-tags ="Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/tumblr.jpg" alt ="Tumblr"&gt;&lt;h2&gt;Tumblr&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="10"
        data-item-tags ="nginx,MySQL,Redis,Rails,Ruby,Hadoop"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/shopify.jpg" alt ="Shopify"&gt;&lt;h2&gt;Shopify&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="11" 
        data-item-tags ="JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/stackexchange.jpg" alt ="Stack Exchange"&gt;&lt;h2&gt;Stack Exchange&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="12" 
        data-item-tags ="nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/keenio.jpg" alt ="Keen IO"&gt;&lt;h2&gt;Keen IO&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts