亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件實(shí)例【附demo源碼下載】

 更新時(shí)間：2016年10月17日 10:53:37   作者：dengwz7788  
這篇文章主要介紹了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件,結(jié)合完整實(shí)例形式分析了JS結(jié)合HTML5的storage特性存儲(chǔ)數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車(chē)功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件。分享給大家供大家參考，具體如下：

最近做一個(gè)商城，需要用到一個(gè)簡(jiǎn)答的購(gòu)物車(chē)功能，當(dāng)然，后端實(shí)現(xiàn)比較容易，，這里重點(diǎn)還是講一下前端的JS插件。

從源代碼里面沒(méi)看出來(lái)，它叫啥，好像叫：ctshop .js，不管啦，反正我提供下載就好，我做了一些簡(jiǎn)單的修復(fù)，支持了中文

這個(gè)插件使用了HTML5的新特效：storage ，就是游覽器數(shù)據(jù)庫(kù)的功能，這跟之前把數(shù)據(jù)存在cookies里面原理是相識(shí)的，這樣的好處在于用戶刷新頁(yè)面，數(shù)據(jù)還在，，又不需要跟后端進(jìn)行數(shù)據(jù)交互。

create_storage_cart: function() {
 for (var t = this, e = t.storage_get(), a = 0, n = e.items.length; n > a; a++) {
  var i = e.items[a].id,
  r = e.items[a].name,
  s = e.items[a].price,
  c = e.items[a].input;
  t.cart.append('<li class="animated ' + t.settings.animation + '" data-id=' + i + "><span class=" + t.settings.cart + "-name>" + r + "</span><span class=" + t.settings.cart + "-price>" + s + '</span><input type="number" min="1" value="' + c + '" class=' + t.settings.cart + "-input><button class=" + t.settings.cart + "-remove>x</button></li>")
  }
},

需要兼容老版的游覽器，需要在上面進(jìn)行修改。下面是插件的配置文件

s = {
  currency: "$",
  currency_after_number: "false",
  permanent_cart_buttons: "false",
  display_total_value: "true",
  permanent_total_value: "false",
  animation: "fadeIn",
  empty_disable: "false",
  empty_text: "Your cart is empty",
  paypal: {
  business: "office@createit.pl",
  currency_code: "USD",
  lc: "EN",
  cpp_cart_border_color: "",
  cpp_payflow_color: "",
  no_note: "0",
  no_shipping: "0",
  "return": "",
  cancel_return: ""
  },
 lang:{  //我新增的屬性，主要是用來(lái)支持多語(yǔ)言
  clear:'清空',
  checked:'結(jié)算'
 },
};

實(shí)例化

$('body').ctshop({
  currency: '$',
  paypal: {
  currency_code: 'RMB'
 },
  empty_text:'您敢信，你的購(gòu)物車(chē)居然是空的！',
});

很簡(jiǎn)單的吧。。

運(yùn)行效果圖如下：

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論