- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Tagsort.js
Tagsort.是一个用于显示标签的 jQuery 插件。
一个简单的 tagsort 示例如下所示 -
<!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>
这应该产生以下结果 -
点击这里