jQuery Mobile里xxx怎么用呀?(缓存篇)

jQuery Mobile初始页面DOM Cache所引发的问题

HTML元素事件多次触发:

    • jsFiddle: http://jsfiddle.net/gn9JA/2/
    • cause: 在jsFiddle示例中绑定了pageshow事件处理函数,因为btnTest按钮一直存在于DOM中,所以每次pageshow都会为btnTest按钮添加一次事件
    • solution: 
    • //off click event handler first
      $('#btnTest').off('click').on('click', function(){
        alert(1);
      });

使用jQuery无法获得正确的元素(could not get the correct elements using jquery selectors):

    • jsFiddle: http://jsfiddle.net/gn9JA/2/
    • cause: btnTest按钮同时存在于page1与page2,因为先后顺序的关系,使用$('#btnTest')只可以获得page1中的按钮
    • solution:
    • //add activePage as scope when jquerying elements
      $('#btnTest',$.mobile.activePage).off('click').on('click', function(){
        alert(1);
      });

 jQuery Mobile里初始页面的DOM Cache怎么删除?

相关链接:

为什么要移除第一页的DOM缓存:

    • eg: visit the 1st page, and then navigate to 2nd page, change some user preference,
    • back to the 1st page, you will find nothing happened because of DOM cache of the 1st page.

 

转载于:https://www.cnblogs.com/mrdo/p/FAQ_jQueryMobile_DOMCache.html

是的,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 可以实现更复杂的购物车应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值