ホームページ >ウェブフロントエンド >jsチュートリアル >Layui を使用してタグ検索をサポートするモール商品分類ページを開発する方法
Layui を使用してタグ検索をサポートするモール商品分類ページを開発する方法
- WBOYオリジナル
- 2023-10-27 17:57:31906ブラウズ
Layui を使用してタグ検索をサポートするモール商品分類ページを開発する方法
インターネットの発展に伴い、電子商取引は一般的な買い物方法になりました。モールでは、ユーザーが欲しい商品をすぐに見つけられるように、商品を分類することが非常に重要です。商品分類ページでは、より良いユーザーエクスペリエンスを提供するために、タグ検索機能をサポートすることをお勧めします。この記事では、Layui を使用してタグ検索をサポートするモール商品分類ページを開発する方法と、具体的なコード例を紹介します。
Layui は、使いやすく、簡単に開始できる軽量のフロントエンド UI フレームワークです。テーブル、ドロップダウン ボックスなどを含む豊富なコンポーネントが提供されます。 Layui Developer City の製品分類ページを使用すると、ページのレイアウトとインタラクティブな効果をすぐに実現できます。サンプル プロジェクトのディレクトリ構造は次のとおりです。
- index.html - js - layui.js - category.js - jquery.min.js - css - layui.css - category.css
まず、index.html ファイルに Layui 関連ファイルを導入します。
<!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>category.js ファイルに動的に使用する JavaScript ロジック コードを記述します。製品データのロードと検索:
// 商品分类数据
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();
});category.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;
}上記は、Layui を使用して、以下をサポートするモール製品カテゴリ ページを開発する具体的なコード例です。タグ検索。この例を通じて、Layui を使用して商品分類ページのレイアウトとインタラクティブ効果を迅速に実装し、タグ検索機能をサポートできることがわかります。
以上がLayui を使用してタグ検索をサポートするモール商品分類ページを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。