jquery仿外卖点餐购物车页面代码.zip唯一好用的

  • q1_808451
    了解作者
  • 146.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-01 06:55
    上传日期
购物车,列表都有了,稍微美化就可以用。
jquery仿外卖点餐购物车页面代码.zip
  • image
  • cart.png
    2.9KB
  • img.jpg
    49.9KB
  • minus.png
    8KB
  • add.png
    8.8KB
  • script
  • aui-slide.js
    11.5KB
  • aui-tab.js
    2.2KB
  • aui-scroll.js
    1.8KB
  • aui-pull-refresh.js
    5.5KB
  • aui-toast.js
    3.4KB
  • aui-list-swipe-backup.js
    7.9KB
  • aui-popup.js
    3.4KB
  • aui-actionsheet.js
    5.4KB
  • aui-collapse.js
    2.1KB
  • aui-list-swipe.js
    7.3KB
  • aui-dialog.js
    5.7KB
  • add.js
    6.1KB
  • jquery.min.js
    90.9KB
  • aui-popup-new.js
    5.6KB
  • aui-lazyload.js
    1.6KB
  • aui-sharebox.js
    5.1KB
  • api.js
    17.9KB
  • aui-range.js
    2KB
  • aui-skin.js
    3.3KB
  • css
  • aui.css
    64.3KB
  • aui-iconfont.ttf
    35.5KB
  • classify.css
    21.2KB
  • demo.html
    5.4KB
内容介绍
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <title>商品</title> <link rel="stylesheet" type="text/css" href="css/aui.css"> <link rel="stylesheet" href="css/classify.css"> <style> html,body{height: 100%;max-width: 640px;margin:0 auto;} .aui-bar-nav{border:none;background: #f5f5f5;} .main{height: calc(100% - 4.5rem);} #tab1-con1{padding-bottom: 3rem;} #tab1-con1,#tab1-con2{height: 100%;} .aui-tab{border-bottom: solid 1px #eee;background: #f5f5f5;height: 2.25rem;} .aui-tab-item{font-size: .75rem;color: #666;width: 25%;} .aui-tab-item.aui-active{border:none;color: #000;position: relative;} .aui-tab-item.aui-active:after{position: absolute;left: 40%;width: 20%;height: 2px;background: #00ae66;content: '';bottom:0;} </style> </head> <body> <header class="aui-bar aui-bar-nav"> <a class="aui-pull-left aui-btn" rel='nofollow' onclick='return false;'> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">商品</div> <div class="aui-pull-right"></div> </header> <div class="aui-tab" id="tab"> <div class="aui-tab-item aui-active">点菜</div> <div class="aui-tab-item">商家</div> </div> <div class="main"> <div class="aui-item" id="tab1-con1"> <div class="left-menu" id="left"> <ul> <li><span>营养套餐</span></li> <li><span>实惠炒菜</span></li> </ul> </div> <div class="con"> <div class="right-con con-active" style="display: none;"> <ul> <li> <div class="menu-img"></div> <div class="menu-txt"> <h4 data-icon="00">珍珠奶茶</h4> <p class="list1">月销量:123</p> <p class="list2"> <b>¥</b><b>2.00</b> </p> <div class="btn"> <button class="minus"></button> <i>0</i> <button class="add"></button> <i class="price">2.00</i> </div> </div> </li> <li> <div class="menu-img"></div> <div class="menu-txt"> <h4 data-icon="01">辣子鸡</h4> <p class="list1">月销量:123</p> <p class="list2"> <b>¥</b><b>3.00</b> </p> <div class="btn"> <button class="minus"></button> <i>0</i> <button class="add"></button> <i class="price">3.00</i> </div> </div> </li> </ul> </div> <div class="right-con" style="display: none;"> <ul> <li> <div class="menu-img"></div> <div class="menu-txt"> <h4 data-icon="10">宫保鸡丁</h4> <p class="list1">月销量:123</p> <p class="list2"> <b>¥</b><b>4.00</b> </p> <div class="btn"> <button class="minus"></button> <i>0</i> <button class="add"></button> <i class="price">4.00</i> </div> </div> </li> <li> <div class="menu-img"></div> <div class="menu-txt"> <h4 data-icon="11">回锅肉</h4> <p class="list1">月销量:123</p> <p class="list2"> <b>¥</b><b>5.00</b> </p> <div class="btn"> <button class="minus"></button> <i>0</i> <button class="add"></button> <i class="price">5.00</i> </div> </div> </li> </ul> </div> </div> <div class="up1"></div> <div class="shopcart-list fold-transition"> <div class="list-header"> <h1 class="title">购物车</h1> <span class="empty">清空所有</span> </div> <div class="list-content"> <ul></ul> </div> </div> <div class="footer"> <div class="left"> <div class="count_num"><span id="totalcountshow">0</span></div> <span id="cartN" class="nowrap">总计:<span id="totalpriceshow">0</span>元</span> </div> <div class="right"> <a id="btnselect" class="xhlbtn disable" rel='nofollow' onclick='return false;'>去结算</a> </div> </div> </div> <div class="aui-item aui-hide" id="tab1-con2"> 2 </div> </div> <script type="text/javascript" src="script/api.js" ></script> <script src="script/jquery.min.js"></script> <script type="text/javascript" src="script/add.js"></script> <script type="text/javascript" src="script/aui-tab.js" ></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); } var tab = new auiTab({ element: document.getElementById("tab"), }, function(ret) { if (ret) { //定义获取对象的所有兄弟节点的函数, function siblings(elm) { var a = []; var p = elm.parentNode.children; for (var i = 0, pl = p.length; i < pl; i++) { if (p[i] !== elm) a.push(p[i]); } return a; } var index = ret.index; var activeC = document.getElementById("tab1-con" + index); activeC.className = ""; for (var i = 0; i < siblings(activeC).length; i++) { siblings(activeC)[i].className = "aui-hide"; } } }); </script> </body> </html>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询