是的，
jQuery Mobile 可以用来编写购物车应用程序。
jQuery Mobile 是一个基于 HTML、CSS 和
JavaScript 的框架，它提供了许多用于创建移动应用程序的
UI 组件和工具。使用这些组件和工具，可以轻松地创建购物车应用程序。
以下是一个基于
jQuery Mobile 的购物车示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shopping Cart</title>
<link rel="stylesheet" href="https://code.
jquery.com/
mobile/1.4.5/
jquery.
mobile-1.4.5.min.css">
<script src="https://code.
jquery.com/
jquery-1.11.3.min.js"></script>
<script src="https://code.
jquery.com/
mobile/1.4.5/
jquery.
mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 商品列表 -->
<div data-role="page" id="product-page">
<div data-role="header">
<h1>商品列表</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#" data-name="Shirt" data-price="20">Shirt - $20</a></li>
<li><a href="#" data-name="Pants" data-price="30">Pants - $30</a></li>
<li><a href="#" data-name="Shoes" data-price="50">Shoes - $50</a></li>
</ul>
</div>
</div>
<!-- 购物车 -->
<div data-role="page" id="cart-page">
<div data-role="header">
<h1>购物车</h1>
<a href="#product-page" data-icon="arrow-l" data-transition="slide" data-direction="reverse">返回</a>
</div>
<div data-role="content">
<ul data-role="listview" id="cart-list">
<li data-role="list-divider">购物车</li>
</ul>
<p>总价: <span id="total-price">$0</span></p>
<a href="#" data-role="button" data-icon="check" id="checkout-btn">结账</a>
</div>
</div>
<script>
// 购物车数据
var cart = [];
// 添加商品到购物车
function addToCart(name, price) {
var item = {
name: name,
price: price
};
cart.push(item);
updateCart();
}
// 从购物车中删除商品
function removeFromCart(index) {
cart.splice(index, 1);
updateCart();
}
// 更新购物车列表和总价
function updateCart() {
var cartList = $("#cart-list");
var totalPrice = 0;
cartList.empty();
for (var i = 0; i < cart.length; i++) {
var item = cart[i];
var li = $("<li>");
var a = $("<a>").text(item.name + " - $" + item.price).attr("href", "#");
var btn = $("<a>").text("删除").attr("href", "#").addClass("
ui-btn-right");
btn.click((function(index) {
return function() {
removeFromCart(index);
};
})(i));
li.append(a, btn);
cartList.append(li);
totalPrice += item.price;
}
$("#total-price").text("$" + totalPrice);
}
// 页面初始化
$(document).on("pageinit", function() {
// 添加商品到购物车
$("[data-role=listview] a").click(function() {
var name = $(this).data("name");
var price = $(this).data("price");
addToCart(name, price);
});
// 结账
$("#checkout-btn").click(function() {
alert("总价为: $" + $("#total-price").text());
});
});
</script>
</body>
</html>
```
在这个示例中，我们创建了两个页面：商品列表页面和购物车页面。在商品列表页面中，我们使用
jQuery Mobile 提供的列表视图组件来显示商品列表。每个商品链接都带有 `data-name` 和 `data-price` 属性，用于添加商品到购物车中。
在购物车页面中，我们使用列表视图组件来显示购物车中的商品列表。当用户点击商品链接时，我们将商品添加到 `cart` 数组中，并调用 `updateCart()` 函数来更新购物车列表和总价。当用户点击删除按钮时，我们将相应的商品从 `cart` 数组中删除，并再次调用 `updateCart()` 函数来更新购物车列表和总价。最后，当用户点击结账按钮时，我们使用 `alert()` 函数来显示购物车的总价。
这只是一个简单的购物车示例，实际上，使用
jQuery Mobile 可以实现更复杂的购物车应用程序。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
