jQuery Tagsort 插件

jQuery提供了Tagsort插件，用于显示标签或根据DOM中的不同标签过滤元素。该插件采用HTML页面结构的数据属性，动态地创建用户友好的标签，用于过滤元素。对元素的过滤有很多方式，在tagsort插件提供的选项设置功能中都有处理。

注意：请从Tagsort插件中下载以下库文件，并将其保存在你的工作文件夹中，以包括在你的代码中。请从这个链接下载 “jquery-3.2.1.min.js “文件。

jQuery Tagsort Plugin的链接：

<link href=”tagsort.css” rel=”stylesheet” type=”text/css”>
<script src=”jquery-3.2.1.min.js”></script>
<script src=”tagsort.min.js”></script>

示例1：下面的例子演示了tagsort插件的tagSort()方法的基本用法，该方法接收data-attribute即 “data-item-tags”，其中包含许多用逗号(,)分隔的标签，它们被添加到要考虑过滤的项目中。它根据用户选择的标签显示所有相应的项目，如下面的输出图片所示。

<!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: 220px;
            max-height: 350px;
            overflow: hidden;
        }
         
        .item .wrapper {
            background-color: #C3C3C3;
            height: 100%;
            padding: 10px;
        }
         
        .item .wrapper img {
            width: 100%;
            height: 60%
        }
         
        .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'
            });
        });
    </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>

输出 :

jQuery Tagsort Plugin

例子2：下面的例子用javascript演示了tagsort插件所提供的选项设置功能。选项itemTagsView被设置为’.item-tags’，这样 “data-item-tags “的所有不同标签就会显示在 “item-tags “类的 “p “元素中，如输出图片中所示。程序员可以根据应用程序的要求使用其他选项。

<!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>

输出:

jQuery Tagsort Plugin

例子3：下面的例子演示了使用javascript代码实现的多个标签分类功能。根据用户选择的多个标签，其结果显示在同一页面上。

<!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>
        ().ready(function() {
    ('div.tagsort-tags-container').each(function() {
        $(this).tagSort({
            items: '.item-to-filter',
            itemTagsView: '.item-tags',
            tagAttr: this.getAttribute("tagname") || "data-item-tags"
        });
    });
});
     
      </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>