Maison > Article > interface Web > Comment utiliser Layui pour implémenter la fonction de composant de nuage de tags pliable
Comment utiliser Layui pour implémenter la fonction de composant de nuage de tags pliable
- WBOYoriginal
- 2023-10-25 08:41:041083parcourir
Comment utiliser Layui pour implémenter la fonction de composant de nuage de balises pliable
Vue d'ensemble :
Le nuage de balises est un élément Web courant qui peut présenter les balises sur la page dans différents styles, permettant aux utilisateurs de parcourir et de sélectionner rapidement les balises qui les intéressent. Le nuage de tags peut être plié pour utiliser efficacement l'espace de la page et améliorer l'expérience utilisateur. Dans cet article, nous présenterons comment utiliser le framework Layui pour implémenter la fonction de composant de nuage de tags pliable et fournirons des exemples de code détaillés.
Étape 1 : Importez les fichiers de ressources associés du framework Layui
Tout d'abord, assurez-vous d'avoir importé les fichiers de ressources associés du framework Layui. En tête du HTML, ajoutez le code suivant :
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
Étape 2 : Créer la structure HTML
Dans le HTML, créez un conteneur contenant les balises. Chaque balise nécessite un élément HTML indépendant, comme indiqué ci-dessous :
<div class="tags"> <span>标签1</span> <span>标签2</span> <span>标签3</span> <span>标签4</span> <span>标签5</span> <span>标签6</span> ... </div>
Étape 3 : Écrire des styles CSS
Afin d'obtenir l'effet pliable du nuage de balises, vous devez écrire des styles CSS. Dans la feuille de style CSS, ajoutez le code suivant :
.tags span{
display: inline-block;
padding: 0.5em;
margin: 0.5em;
background-color: #f5f5f5;
border-radius: 3px;
cursor: pointer;
}
.tags span.active{
background-color: #FFB800;
color: #fff;
}
.tags .more{
display: none;
}
.tags .toggle{
margin-top: 0.5em;
text-align: center;
cursor: pointer;
}Étape 4 : Écrire du code JavaScript
Dans la partie JavaScript, nous devons utiliser le mécanisme d'écoute d'événements de Layui pour réaliser le changement, le repli et l'expansion d'étiquette. Ajoutez le code suivant :
layui.use('jquery', function(){
var $ = layui.jquery;
$('.tags span').on('click', function(){
$(this).toggleClass('active');
});
$('.tags .toggle').on('click', function(){
$(this).siblings('.more').toggle();
});
}); Étape 5 : Exemple de code complet
Combinez les codes HTML, CSS et JavaScript ci-dessus pour implémenter un composant de nuage de tags pliable. Ce qui suit est un exemple de code complet :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可折叠的标签云</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.tags span{
display: inline-block;
padding: 0.5em;
margin: 0.5em;
background-color: #f5f5f5;
border-radius: 3px;
cursor: pointer;
}
.tags span.active{
background-color: #FFB800;
color: #fff;
}
.tags .more{
display: none;
}
.tags .toggle{
margin-top: 0.5em;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="tags">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签4</span>
<span>标签5</span>
<span>标签6</span>
<span>标签7</span>
<span>标签8</span>
<span>标签9</span>
<span>标签10</span>
<span class="more">
<span>标签11</span>
<span>标签12</span>
<span>标签13</span>
<span>标签14</span>
...
</span>
</div>
<div class="tags toggle">更多标签</div>
<script src="layui/layui.js"></script>
<script>
layui.use('jquery', function(){
var $ = layui.jquery;
$('.tags span').on('click', function(){
$(this).toggleClass('active');
});
$('.tags .toggle').on('click', function(){
$(this).siblings('.more').toggle();
});
});
</script>
</body>
</html> Résumé :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès un composant de nuage de tags pliable à l'aide du framework Layui. Les utilisateurs peuvent cliquer sur une étiquette pour la sélectionner ou la décocher, puis cliquer sur « Plus d'étiquettes » pour développer ou réduire les étiquettes masquées. De cette manière, les utilisateurs peuvent facilement sélectionner les balises qui les intéressent en fonction de leurs besoins, tout en économisant de l'espace sur la page. J'espère que ce tutoriel pourra vous aider à comprendre et à utiliser le framework Layui !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!