Authored by 郝肖肖

搜索筛选tab 放在一排

... ... @@ -94,44 +94,8 @@
<div class="coupon-group"></div>
{{/ifor}}
<div>
<ul id="list-nav" class="list-nav clearfix">
<li class="default active buriedpoint first-li-more" data-bp-id="shop_listnav_default_1">
<a href="javascript:void(0);">
<span class="nav-txt">默认</span>
<span class="iconfont up cur hide">&#xe615;</span>
<span class="iconfont down cur">&#xe616;</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="nav-txt">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount buriedpoint" data-bp-id="shop_listnav_discount_1">
<a href="javascript:void(0);">
<span class="nav-txt">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">
<a href="javascript:void(0);">
<span class="nav-txt">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
<!--搜索默认排序列表-->
{{> product/search-default-sort-list}}
</div>
{{!--筛选tab--}}
{{> product/filter-tab}}
<div id="goods-container" class="goods-container">
{{#@root.introText}}
... ...
<div class="filter-tab">
<ul id="list-nav" class="list-nav clearfix">
<li class="default active buriedpoint" data-bp-id="shop_listnav_default_1">
<a href="javascript:void(0);">
<span class="nav-txt">默认</span>
</a>
</li>
<li class="new buriedpoint" data-bp-id="shop_listnav_new_1">
<a href="javascript:void(0);">
<span class="nav-txt">最新</span>
</a>
</li>
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="nav-txt">价格</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="discount buriedpoint" data-bp-id="shop_listnav_discount_1">
<a href="javascript:void(0);">
<span class="nav-txt">折扣</span>
<span class="icon">
<i class="iconfont up cur">&#xe615;</i>
<i class="iconfont down">&#xe616;</i>
</span>
</a>
</li>
<li class="filter buriedpoint" data-bp-id="shop_listnav_filter_1">
<a href="javascript:void(0);">
<span class="nav-txt">筛选</span>
<span class="iconfont cur">&#xe613;</span>
</a>
</li>
</ul>
</div>
... ...
... ... @@ -26,8 +26,7 @@ var $goodsContainer = $('#goods-container'),
$ngc = $goodsContainer.children('.new-goods'),
$sgc = $goodsContainer.children('.sale-goods'),
$pgc = $goodsContainer.children('.price-goods'),
$dgc = $goodsContainer.children('.discount-goods'),
$newList = $('.new-list');
$dgc = $goodsContainer.children('.discount-goods');
var winH = $(window).height();
... ... @@ -66,19 +65,19 @@ var $listNav = $('#list-nav'),
default: {
order: 0,
reload: true,
page: 1,
page: 0,
end: false
},
new: {
order: 0,
reload: true,
page: 1,
page: 0,
end: false
},
sale: {
order: 0,
reload: true,
page: 1,
page: 0,
end: false
}
},
... ... @@ -873,88 +872,6 @@ $listNav.bind('contextmenu', function() {
return false;
});
function newListHide() {
var $firstLi = $listNav.find('li.first-li-more');
if ($newList.hasClass('hide')) {
$firstLi.find('span.up').addClass('hide');
$firstLi.find('span.down').removeClass('hide');
} else {
$firstLi.find('span.down').addClass('hide');
$firstLi.find('span.up').removeClass('hide');
}
}
$newList.on('touchstart', 'li', function(e) {
var navType, bpIdData = $(this).attr('data-bp-id') || '',
$firstLiDom = $listNav.find('li.first-li-more');
e.preventDefault();
if ($(this).hasClass('new')) {
navType = 'new';
} else if ($(this).hasClass('default')) {
navType = 'default';
} else if ($(this).hasClass('sale')) {
navType = 'sale';
}
$newList.addClass('hide');
$firstLiDom.find('.nav-txt').text($(this).text());
$firstLiDom.attr('data-bp-id', bpIdData).addClass('active').siblings().removeClass('active');
$listNav.find('.first-li-more').removeClass('new default sale').addClass(navType);
$(document).trigger('shouldSendBpData', [bpIdData]);
newListHide();
if (navType !== 'default') {
$fsgc.addClass('hide');
}
if ($(this).hasClass('active')) {
return;
}
// 切换container显示
$goodsContainer.children('.container:not(.hide)').addClass('hide');
switch (navType) {
case 'new':
$ngc.removeClass('hide');
break;
case 'price':
$pgc.removeClass('hide');
break;
case 'discount':
$dgc.removeClass('hide');
break;
case 'default':
$defaultgc.removeClass('hide');
$fsgc.removeClass('hide');
break;
case 'sale':
$sgc.removeClass('hide');
break;
default:
break;
}
$pre = $firstLiDom;
search({filtering: true});
});
$(document).on('touchstart', function(e) {
if (!$newList.hasClass('hide') &&
$(e.target).closest('.new-list, li.first-li-more').length <= 0) {
$newList.addClass('hide');
newListHide();
}
});
$listNav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
nav,
... ... @@ -962,23 +879,6 @@ $listNav.on('touchend touchcancel', function(e) {
$active;
var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
if ($this.hasClass('first-li-more')) {
filter.hideFilter();
$newList.toggleClass('hide');
if ($this.hasClass('default')) {
$newList.find('li.default').addClass('active').siblings().removeClass('active');
} else if ($this.hasClass('new')) {
$newList.find('li.new').addClass('active').siblings().removeClass('active');
} else if ($this.hasClass('sale')) {
$newList.find('li.sale').addClass('active').siblings().removeClass('active');
}
newListHide();
return true;
}
// 最新li 列表
$newList.addClass('hide');
if ($this.hasClass('filter')) {
// 筛选面板切换状态
... ... @@ -1014,8 +914,8 @@ $listNav.on('touchend touchcancel', function(e) {
if ($this.hasClass('active')) {
// 最新无排序切换
if ($this.hasClass('new')) {
// 默认、最新无排序切换
if ($this.hasClass('default') || $this.hasClass('new')) {
return;
}
... ...
... ... @@ -216,7 +216,7 @@
> li {
float: left;
width: 25%;
width: 20%;
height: 33PX;
line-height: 33PX;
text-align: center;
... ...