jQuery proporciona el complemento Tagsort que se usa para mostrar etiquetas o elementos de filtro basados en diferentes etiquetas en un DOM. El complemento toma atributos de datos de la estructura de la página HTML y crea dinámicamente etiquetas fáciles de usar que se utilizan para filtrar elementos. La filtración de elementos se realiza de muchas maneras que se manejan en la función de configuración de opciones proporcionada por el complemento de clasificación de etiquetas.
Nota: descargue los siguientes archivos de biblioteca del complemento Tagsort y guárdelos en su carpeta de trabajo para incluirlos en sus códigos. Descargue el archivo «jquery-3.2.1.min.js» desde este enlace.
Enlaces para el complemento jQuery Tagsort:
<link href=”tagsort.css” rel=”stylesheet” type=”text/css”>
<script src=”jquery-3.2.1.min.js”></script>
<script src=”tagsort.min .js”></secuencia de comandos>
Ejemplo 1: El siguiente ejemplo demuestra el uso básico del método tagSort() del complemento tagsort que toma el atributo de datos, a saber, «etiquetas de elementos de datos», que contiene muchas etiquetas separadas por comas (,) que se agregan a los elementos a considerar para filtración Muestra todos los elementos respectivos en función de las etiquetas seleccionadas por el usuario, como se muestra a continuación en la imagen de salida.
html
<!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>
Producción :
Ejemplo 2: El siguiente ejemplo demuestra la función de configuración de opciones proporcionada por el complemento tagsort usando javascript. La opción itemTagsView se establece en ‘.item-tags’ para que todas las diferentes etiquetas de «data-item-tags» se muestren en el elemento «p» de la clase «item-tags» como se muestra en la imagen de salida. El programador puede hacer uso de otras opciones dependiendo del requerimiento de la aplicación.
html
<!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>
Producción:
Ejemplo 3: El siguiente ejemplo demuestra la función de clasificación de etiquetas múltiples utilizando el código javascript como se implementa a continuación. El resultado se muestra en la misma página, dependiendo de las múltiples etiquetas seleccionadas por el usuario.
html
<!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>
Producción:
Cuando se seleccionan las etiquetas «Python» y «Objective-C»:
Cuando se seleccionan las etiquetas «PHP» y «Memcached»:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA