Authored by xuqi

sort

... ... @@ -33,12 +33,28 @@
<div class="sort section">
<span class="title">分类:</span>
<div class="attr-content clearfix">
{{#each sort}}
<span class="attr" data-id="{{id}}">
{{name}}
</span>
{{/each}}
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<span class="attr" data-id="{{id}}">
{{name}}
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr">
<a href="{{href}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
... ... @@ -160,7 +176,7 @@
{{name}}
<span class="iconfont"></span>
<div class="sub hide" data-attr="{{attr}}">
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
... ...
... ... @@ -15,6 +15,7 @@ moreUnicode = {
down: '&#xe600;'
};
//品牌相关变量
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandAttrs = $('.brand .attr'),
... ... @@ -23,6 +24,14 @@ var $brandDefault = $('.brand .default'),
var $brandMoreTxt, $brandMoreIcon;
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
... ... @@ -55,16 +64,25 @@ function uriLoc(attr, val) {
window.location.href = newHref;
}
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//【分类】
$('.sort-pre').on('click', 'li', function() {
var index = $(this).index();
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
});
//【品牌】
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//【品牌】多选
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
... ... @@ -183,20 +201,13 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
});
//【价格】用户定义价格处理
(function() {
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
if ($udPrice.length === 0) {
return;
}
if ($udPrice.length > 0) {
$limit = $udPrice.find('.limit');
$min = $limit.filter('.min');
$max = $limit.filter('.max');
$btn = $udPrice.find('.price-sure');
//【价格】输入
$limit.keyup(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
... ... @@ -212,7 +223,7 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
}
});
//价格多项查询
//【价格】多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
... ... @@ -227,21 +238,21 @@ $('.brand, .senior').on('click', '.attr > a', function(e) {
uriLoc('price', min + ',' + max);
});
}());
}
//【高级选项】鼠标移入显示子项
$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
$(this).children('.sub').removeClass('hide');
$(this).children('.senior-sub').removeClass('hide');
}).on('mouseleave', '.attr', function() {
$(this).children('.sub').addClass('hide');
$(this).children('.senior-sub').addClass('hide');
});
//【高级选项】多选
$('.sub').on('click', '.multi-select', function() {
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.sub'),
$sub = $btn.closest('.senior-sub'),
val = '';
if ($btn.hasClass('dis')) {
... ...
... ... @@ -57,6 +57,14 @@
}
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
padding: 15px 0;
}
}
.brand {
position: relative;
... ... @@ -195,10 +203,10 @@
.senior-attr-wrap {
position: relative;
.sub {
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 15px;
padding: 15px 0;
left: 0;
right: -16px;
background: #fff;
... ...
... ... @@ -34,7 +34,21 @@ class IndexController extends AbstractAction
'sort' => array(
array(
'id' => '1',
'name' => '上衣'
'name' => '上衣',
'sub' => array(
array(
'href' => '',
'name' => 'T恤'
),
array(
'href' => '',
'name' => '棉袄'
),
array(
'href' => '',
'name' => '外套'
)
)
),
array(
'id' => '2',
... ...