Maison >interface Web >js tutoriel >Comment utiliser Layui pour développer une page de classification de produits de centre commercial prenant en charge la recherche de balises

Comment utiliser Layui pour développer une page de classification de produits de centre commercial prenant en charge la recherche de balises

WBOYoriginal: 2023-10-27 17:57:31915parcourir

Avec le développement d'Internet, le commerce électronique est devenu une méthode d'achat courante. Dans un centre commercial, il est très important de classer les produits, ce qui aide les utilisateurs à trouver rapidement les produits qu'ils souhaitent. Dans la page de classification des produits, afin d'offrir une meilleure expérience utilisateur, c'est un bon choix de prendre en charge la fonction de recherche de balises. Cet article explique comment utiliser Layui pour développer une page de classification de produits de centre commercial prenant en charge la recherche de balises et fournit des exemples de code spécifiques.

Layui est un framework d'interface utilisateur frontal léger, facile à utiliser et facile à utiliser. Il fournit une multitude de composants, notamment des tableaux, des listes déroulantes, etc. En utilisant la page de classification des produits de Layui Developer City, vous pouvez rapidement réaliser la mise en page et les effets interactifs de la page. Voici la structure de répertoires d'un exemple de projet :

- index.html
- js
  - layui.js
  - category.js
  - jquery.min.js
- css
  - layui.css
  - category.css

Tout d'abord, introduisez les fichiers liés à Layui dans le fichier index.html :

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>商城商品分类页面</title>
  <link rel="stylesheet" href="css/layui.css">
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8">
        <div class="layui-collapse" lay-accordion>
          <!-- 商品分类列表 -->
          <div class="layui-colla-item">
            <h2 class="layui-colla-title">电子产品</h2>
            <div class="layui-colla-content layui-show">
              <!-- 商品列表 -->
              <div id="productList" class="layui-row"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <!-- 标签搜索 -->
        <div class="layui-card">
          <div class="layui-card-header">标签搜索</div>
          <div class="layui-card-body">
            <input type="text" id="searchTag" class="layui-input" placeholder="请输入标签">
            <button class="layui-btn layui-btn-sm" onclick="searchByTag()">搜索</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/layui.js"></script>
  <script src="js/category.js"></script>
</body>

</html>

Écrivez le code logique JavaScript dans le fichiercategory.js pour charger et rechercher dynamiquement les données du produit :

// 商品分类数据
var categoryData = [
  {
    name: "手机",
    products: [
      { name: "iPhone X", tags: ["高端", "苹果"] },
      { name: "小米10", tags: ["性价比高", "小米"] },
      { name: "华为P40", tags: ["华为"] }
    ]
  },
  {
    name: "电视",
    products: [
      { name: "小米电视", tags: ["性价比高", "小米"] },
      { name: "创维电视", tags: ["创维"] },
      { name: "索尼电视", tags: ["索尼"] }
    ]
  }
];

// 根据标签搜索商品
function searchByTag() {
  var tag = $("#searchTag").val();
  var productList = "";
  
  categoryData.forEach(function(category) {
    category.products.forEach(function(product) {
      if (product.tags.indexOf(tag) !== -1) {
        productList += "<div class='layui-col-md3'>" + product.name + "</div>";
      }
    });
  });
  
  $("#productList").html(productList);
}

// 加载商品分类列表
function loadCategory() {
  categoryData.forEach(function(category) {
    var categoryItem = "<div class='layui-colla-item'>"
      + "<h2 class='layui-colla-title'>" + category.name + "</h2>"
      + "<div class='layui-colla-content'>"
      + "<div class='layui-row'>";
      
    category.products.forEach(function(product) {
      categoryItem += "<div class='layui-col-md3'>" + product.name + "</div>";
    });
    
    categoryItem += "</div></div></div>";
    $(".layui-collapse").append(categoryItem);
  });
}

$(function() {
  loadCategory();
});

Définissez le style de la page dans le fichiercategory.css :

.layui-container {
  padding: 20px;
}

.layui-row {
  margin: 10px 0;
}

.layui-col-md8 {
  padding-right: 10px;
}

.layui-card {
  margin-bottom: 10px;
}

#searchTag {
  width: 200px;
  display: inline-block;
}

Ce qui précède est un exemple de code spécifique d'utilisation de Layui pour développer une page de catégorie de produits de centre commercial qui prend en charge la recherche de balises. Grâce à cet exemple, vous pouvez voir que vous pouvez utiliser Layui pour implémenter rapidement la mise en page et les effets interactifs des pages de classification de produits, et prendre en charge la fonction de recherche de balises.

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!

JavaScript css layui html JS ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le framework Layui pour développer une plateforme d'apprentissage en ligne prenant en charge les quiz instantanés et le suivi de l'apprentissageArticle suivant：Comment utiliser le framework Layui pour développer une plateforme d'apprentissage en ligne prenant en charge les quiz instantanés et le suivi de l'apprentissage

Articles Liés

Voir plus