全面基于ajax
category_all.dwt html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="{$ectouch_themes}/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/gloabal.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/slider.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/ycaidao.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/category.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/alert.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/swiper-3.3.1.min.css">
<link rel="stylesheet" type="text/css" href="{$ectouch_themes}/cssnew/all-animation.css">
<script src="{$ectouch_themes}/jsnew/jquery-2.2.1.min.js"></script>
<style> .ycd-header-search-box-top form{ width:100%; height:100%; } .yc-swiper-categry-left-tab .ycd-left-tab-slide a{ display:block; width:100%; height:100%; color:#2b2b2b; } </style>
<title>{$page_title} 触屏版</title>
</head>
<body>
<script type="text/javascript"> var process_request = "{$lang.process_request}"; var username_exist = "{$lang.username_exist}"; var compare_no_goods = "{$lang.compare_no_goods}"; var btn_buy = "{$lang.btn_buy}"; var is_cancel = "{$lang.is_cancel}"; var select_spe = "{$lang.select_spe}"; </script>
<div id="ohsnap"></div>
<div class="ycd-header-search-box-top">
<div class="ycd-js-search-input-box">
<i class="ycd-font-icon ycd-js-service-icon inline-block"></i>
<form method="post" action="search.php" name="searchForm" id="searchForm_id">
<input type="text" name="search" value="" placeholder="搜索菜品名称" class="ycd-js-search-input ycd-font-icon">
<i class="ycd-font-icon ycd-js-search-icon"></i>
</form>
</div>
</div>
<div class="ycd-js-container">
<div class="swiper-container" id="swiper-container2" >
<div class="swiper-wrapper swiper-catogry-tab-title-list">
{if $cat.cat_id }
{if $smarty.foreach.no.index eq 0}
<div class="swiper-slide active-nav">{$cat.name|escape:html}</div>
{else}
<div class="swiper-slide">{$cat.name|escape:html}</div>
{/if}
{else}
<div class="swiper-slide"><a href="{$cat.url}">{$cat.name|escape:html}</a></div>
{/if}
</div>
</div>
<div class="swiper-container" id="swiper-container3">
<div class="swiper-wrapper">
{if $cat.cat_id }
<div class="swiper-slide">
<ul class="yc-swiper-categry-left-tab" data-listview="6" data-listheight="" >
{if $smarty.foreach.no1.index eq 0}
<li class="ycd-left-tab-slide active-nav">
<a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a>
</li>
{else}
<li class="ycd-left-tab-slide">
<a href="javascript:void(0);" data-target="{$child.url}" data-id="{$child.id}">{$child.name|escape:html}</a>
</li>
{/if}
</ul>
<div class="yc-swiper-right-list-content" id="ycd-content-{$child.id}" data-target="{$child.url}" data-parentid="{$child.id}">
<div class="yc-swiper-right-list-item">
<div class="pro-inner"></div>
</div>
<a href="javascript:;" class="get_more"></a>
</div>
</div>
{/if}
</div>
</div>
<div class="ycd-bottom-fixed">
</div>
</div>
<script> Zepto(function($){ var mySwiper2 = new Swiper('#swiper-container2',{ watchSlidesProgress : true, watchSlidesVisibility : true, slidesPerView : 4, loop:false, spaceBetween:60, onTap: function(){ mySwiper3.slideTo( mySwiper2.clickedIndex); if(mySwiper2.clickedIndex !== undefined){ $('#swiper-container3 .swiper-slide').eq(mySwiper2.clickedIndex).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap'); } } } ); var mySwiper3 = new Swiper('#swiper-container3',{ onSlideChangeStart: function(){ updateNavPosition(); }, onSlideChangeEnd:function(){ if(mySwiper3.activeIndex !== undefined){ $('#swiper-container3 .swiper-slide').eq(mySwiper3.activeIndex).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap'); } } }); function updateNavPosition(){ $('#swiper-container2 .active-nav').removeClass('active-nav') var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav'); if (!activeNav.hasClass('swiper-slide-visible')) { if (activeNav.index()>mySwiper2.activeIndex) { var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1 mySwiper2.slideTo(activeNav.index()-thumbsPerNav) } else { mySwiper2.slideTo(activeNav.index()) } } } $('.swiper-slide .yc-swiper-categry-left-tab li').tap(function(event){ event.preventDefault(); var index = $(this).index(); $(this).parent().find('li').removeClass('active-nav').eq(index).addClass('active-nav') $(this).parent().parent().find('.yc-swiper-right-list-content').hide().eq(index).show('slow'); var id = $(this).find('a').data('id'); var data_target= '#ycd-content-'+id; jQuery(data_target).html(' <div class="yc-swiper-right-list-item"><div class="pro-inner"></div></div><a href="javascript:;" class="get_more"></a>'); jQuery(data_target).more({'address': 'category.php?act=asynclist&category='+id+'&brand=0&price_min=0&price_max=0&filter_attr=0&page=1&sort=goods_id&order=DESC', 'template':'.yc-swiper-right-list-item','spinner_code':'<div style="text-align:center; margin:10px;"><img src="{$ectouch_themes}/images/loader.gif" /></div>','last':0}); }); $('.swiper-slide').each(function(index,item){ $(this).find('.yc-swiper-right-list-content').hide().eq(0).show('slow'); }); $('#swiper-container3 .swiper-slide').eq(0).find('.yc-swiper-categry-left-tab').find('li').eq(0).trigger('tap'); }); var _num = null; var _goods_id = 1; var _parent_id = 0; var _origin_num = 1; var _goods_num = 1; function changePrice(_this) { var _operation = _this.getAttribute('data-operation'); _goods_id = _this.getAttribute('data-goods-id'); _parent_id = _this.getAttribute('data-cat-id'); if( _operation === 'pre'){ _num = _this.nextElementSibling; }else if(_operation === 'next'){ _num = _this.previousElementSibling; } var qty = _num.value; _origin_num = qty; jQuery.get('goods.php',{act:'price',id:_goods_id,attr:'',number:qty},changePriceResponse,'JSON'); } function changePriceResponse(res) { if (res.err_msg.length > 0) { alert(res.err_msg); } else { _num.value = _goods_num = res.qty; addToCartflow(_goods_id); } } function addToCartflow(goodsId, parentId) { var goods = new Object(); var spec_arr = new Array(); var fittings_arr = new Array(); var quick = 0; goods.quick = quick; goods.spec = spec_arr; goods.goods_id = goodsId; goods.number = _goods_num; goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId); jQuery.post('flow.php?step=add_to_cart',{goods:jQuery.toJSON(goods)},addToCartflowResponse,'JSON'); } function addToCartflowResponse(result) { if (result.error > 0) { if (result.error == 2) { Zepto('body').popup({ title:'提示信息' ,id:'alert' ,closeOnOk:true ,ok:'确定', message:result.message }); } else if (result.error == 6) { openSpeDivflow(result.message, result.goods_id, result.parent); } else { Zepto('body').popup({ title:'提示信息' ,id:'alert' ,closeOnOk:true ,ok:'确定', message:result.message }); } } else { var cartInfo = document.getElementById('ECS_CARTINFO'); var cartNum = document.getElementById('ECS_CARTINFO_TOTAL_NUMBER'); var cart_url = 'flow.php?step=cart'; if (cartInfo) { jQuery(cartInfo).fadeIn(600).delay(3000).fadeOut(600); jQuery(cartInfo).find('.cart-info-total').html(result.content); cartNum.innerHTML = result.cart_number; } switch(result.confirm_type) { default : break; } } } function openSpeDivflow(message, goods_id, parent) { if(document.getElementById('specDivForm')){ document.body.removeChild(document.getElementById('specDivForm')); } var specDivForm= document.createElement('form'); specDivForm.id="specDivForm"; var i = 0; var sel_obj = document.getElementsByTagName('select'); while (sel_obj[i]) { sel_obj[i].style.visibility = "hidden"; i++; } for (var spec = 0; spec < message.length; spec++) { specDivForm.innerHTML += '<h2>'+message[spec]['name']+'</h2>' if (message[spec]['attr_type'] == 1) { for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { if (val_arr == 0) { specDivForm.innerHTML += "<p><input type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' checked /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>'; } else { specDivForm.innerHTML += "<p><input type='radio' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + '</font> [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>'; } } specDivForm.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; }else{ for (var val_arr = 0; val_arr < message[spec]['values'].length; val_arr++) { specDivForm.innerHTML += "<p><input type='checkbox' name='spec_" + message[spec]['attr_id'] + "' value='" + message[spec]['values'][val_arr]['id'] + "' id='spec_value_" + message[spec]['values'][val_arr]['id'] + "' /> <font color=#555555>" + message[spec]['values'][val_arr]['label'] + ' [' + message[spec]['values'][val_arr]['format_price'] + ']</font></p>'; } specDivForm.innerHTML += "<input type='hidden' name='spec_list' value='" + val_arr + "' />"; } } document.body.appendChild(specDivForm); Zepto('body').popup({ title:select_spe ,id:'pop-1' ,closeOnOk:true ,ok:'提交', formId:'specDivForm', onOk:function(){ submit_divflow(goods_id,parent); }, message:'' }); } function submit_divflow(goods_id, parentId) { var goods = new Object(); var spec_arr = new Array(); var fittings_arr = new Array(); var input_arr = document.getElementsByTagName('input'); var quick = 1; var spec_arr = new Array(); var j = 0; for (i = 0; i < input_arr.length; i ++ ) { var prefix = input_arr[i].name.substr(0, 5); if (prefix == 'spec_' && ( ((input_arr[i].type == 'radio' || input_arr[i].type == 'checkbox') && input_arr[i].checked))) { spec_arr[j] = input_arr[i].value; j++ ; } } goods.quick = quick; goods.spec = spec_arr; goods.goods_id = goods_id; goods.number = _goods_num; goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId); jQuery.post('flow.php?step=add_to_cart',{goods:jQuery.toJSON(goods)},addToCartflowResponse,'JSON'); var i = 0; var sel_obj = document.getElementsByTagName('select'); while (sel_obj[i]) { sel_obj[i].style.visibility = ""; i++; } } </script>
<div class="ycd-bottom-cart-info" id="ECS_CARTINFO" style="display:none;">
<div class="cart-info-total">
共：221元（免运费）
</div>
<a class="cart-info-checkout" href="flow.php">
结算(<span id="ECS_CARTINFO_TOTAL_NUMBER"></span>)
</a>
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class="ycd-bottom">
<div class="ycd-foot-tab">
<a class="ycd-foot-tab-a " href="./">
<span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-index " data-current="" data-default=""></span>
<div class="ycd-foot-tab-name">首页</div>
</a>
</div>
<div class="ycd-foot-tab">
<a class="ycd-foot-tab-a ycd-foot-tab-a-cur" href="cat_all.php">
<span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-categry" data-current="" data-default=""></span>
<div class="ycd-foot-tab-name">全部商品</div>
</a>
</div>
<div class="ycd-foot-tab">
<a class="ycd-foot-tab-a" href="flow.php?step=cart">
<span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-cart" data-current="" data-default=""></span>
<div class="ycd-foot-tab-name">购物车</div>
</a>
</div>
<div class="ycd-foot-tab">
<a class="ycd-foot-tab-a" href="user.php">
<span class="ycd-font-icon ycd-foot-icon ycd-foot-icon-my" data-current="" data-default=""></span>
<div class="ycd-foot-tab-name">我的</div>
</a>
</div>
</div>
<script src="{$ectouch_themes}/jsnew/zepto.js"></script>
<script src="{$ectouch_themes}/jsnew/utils.js"></script>
<script src="{$ectouch_themes}/jsnew/common.js"></script>
<script src="{$ectouch_themes}/jsnew/jquery.more.js"></script>
<script src="{$ectouch_themes}/jsnew/zepto.slider.js"></script>
<script src="{$ectouch_themes}/jsnew/zepto.popup.js"></script>
<script src="{$ectouch_themes}/jsnew/swiper3.1.zepto.js"></script>
<script src="{$ectouch_themes}/jsnew/jquery.json.js"></script>
<script src="{$ectouch_themes}/jsnew/app.js"></script>
