Authored by xuqi

product filter

... ... @@ -73,8 +73,8 @@
{{/each}}
</p>
<div id="brand-search" class="brand-search">
<input type="text">
<div class="brand-search">
<input id="brand-search-input" type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
... ... @@ -83,15 +83,17 @@
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-href="{{href}}" data-id="{{id}}" data-index="{{index}}">
<span class="iconfont checkbox">&#xe613;</span>
<li class="attr" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
... ... @@ -152,24 +154,23 @@
<span class="title">高级选项:</span>
<div class="attr-content">
<ul class="clearfix">
<ul class="clearfix senior-attr-wrap">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont"></span>
</li>
{{/each}}
</ul>
<div class="sub-senior-wrap hide">
{{#each seniorChose}}
<div class="sub check-container" data-attr="{{attr}}">
<div class="sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
<ul class="clearfix">
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<span class="iconfont checkbox">&#xe613;</span>
<span data-id="{{id}}" data-href="{{href}}">{{name}}</span>
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
... ... @@ -178,8 +179,9 @@
<button class="multi-select-cancel">取消</button>
</div>
</div>
</li>
{{/each}}
</div>
</ul>
</div>
</div>
{{/if}}
... ...
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Wed Nov 25 18:16:02 2015
Created by FontForge 20120731 at Thu Nov 26 10:18:10 2015
By Ads
</metadata>
<defs>
... ... @@ -69,6 +69,9 @@ d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
<glyph glyph-name="uniE610" unicode="&#xe610;"
d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
<glyph glyph-name="uniE611" unicode="&#xe611;"
d="M892 41l-236 236q54 77 54 172q0 81 -39.5 150t-108.5 108.5t-150 39.5q-123 0 -210.5 -87t-87.5 -211t87.5 -211t210.5 -87q95 0 173 55l236 -236q16 -17 38 -18t37 14q10 10 12.5 23.5t-1.5 27t-15 24.5zM213 449q0 82 58.5 140.5t140.5 58.5t140.5 -58.5t58.5 -140.5
t-58.5 -140.5t-140.5 -58.5t-140.5 58.5t-58.5 140.5z" />
<glyph glyph-name="uniE612" unicode="&#xe612;"
d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
... ...
... ... @@ -17,10 +17,19 @@ moreUnicode = {
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandMore = $('#brand-more');
$brandAttrs = $('.brand .attr'),
$brandMore = $('#brand-more'),
$brandMulti = $('#brand-multi');
var $brandMoreTxt, $brandMoreIcon;
// var uriLoc = require('./uri');
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
}
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
... ... @@ -33,19 +42,36 @@ function brandHideMore() {
$brandDefault.removeClass('hide');
}
//url构造&跳转
function uriLoc(attr, val) {
var href = decodeURIComponent(window.location.search),
query = attr + '=' + val,
newHref;
if (href === '') {
newHref = '?' + query;
} else {
newHref = href + '&' + query;
}
window.location.href = newHref;
}
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr', function() {
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//checkbox
$('.check-container').on('click', '.attr', function() {
var $check = $(this).find('.checkbox');
var $this = $(this),
$check = $this.find('.checkbox'),
$btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
$check.toggleClass('checked');
... ... @@ -54,10 +80,18 @@ $('.check-container').on('click', '.attr', function() {
} else {
$check.html(checkUnicode.unchecked);
}
//更新按钮状态
if ($check.hasClass('checked') ||
$this.siblings('.attr').find('.checked').length > 0) {
$btnOk.removeClass('dis');
} else {
$btnOk.addClass('dis');
}
});
//品牌多选
$('#brand-multi').click(function() {
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
... ... @@ -86,7 +120,139 @@ $brandMore.click(function() {
$(this).toggleClass('more');
});
//品牌索引
$('.brands-index').on('click', 'span', function() {
var $this = $(this),
index = $this.data('index');
if ($this.index() === 0) {
//全部
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
}
});
//品牌搜索
$('#brand-search-input').keyup(function() {
var val = $(this).val().toLowerCase();
if (val === '') {
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
}
});
$('#brand-multi-ok').click(function() {
var val = '';
if ($(this).hasClass('dis')) {
return;
}
$brandPanel.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc('brand', val);
});
//多选取消(品牌/高级选项)
$('.multi-select-cancel').click(function() {
var $panel = $(this).closest('.multi');
if ($panel.hasClass('brand-panel')) {
brandHideMore();
$brandMulti.removeClass('hide'); //显示多选按钮
}
$panel.removeClass('multi');
clearChecked($panel.find('.checkbox.checked')); //清除选中状态
});
//用户定义价格处理
(function() {
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
if ($udPrice.length === 0) {
return;
}
$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()),
isMinInt = interReg.test(min),
isMaxInt = interReg.test(max);
if (isMaxInt && (min === '' || isMinInt) ||
isMinInt && (max === '' || isMaxInt)
) {
$btn.removeClass('hide');
} else {
$btn.addClass('hide');
}
});
//价格多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
tmp;
//对于min大于max的情况,交换位置
if (min !== '' && max !== '' && +min > +max) {
tmp = max;
max = min;
min = tmp;
}
uriLoc('price', min + ',' + max);
});
}());
//高级选项
$('.senior-attr-wrap').on('mouseenter', '.attr', function() {
$(this).children('.sub').removeClass('hide');
}).on('mouseleave', '.attr', function() {
$(this).children('.sub').addClass('hide');
});
//高级选项多选
$('.sub-senior-wrap').on('click', '.multi-select', function() {
$('.sub').on('click', '.multi-select', function() {
$(this).closest('.sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.sub'),
val = '';
if ($btn.hasClass('dis')) {
return;
}
$sub.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc($sub.data('attr'), val);
});
//当多选时阻止品牌和高级选项的默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
if ($(this).closest('.multi').length > 0) {
e.preventDefault();
}
});
\ No newline at end of file
... ...
... ... @@ -49,7 +49,7 @@ a {
}
.hide {
display: none;
display: none !important;
}
a:focus {
... ...
... ... @@ -90,6 +90,8 @@
span {
margin: 0 5px;
cursor: pointer;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
... ... @@ -100,6 +102,7 @@
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
... ... @@ -119,6 +122,7 @@
background: #b0b0b0;
color: #fff;
text-align: center;
cursor: default;
}
}
... ... @@ -126,6 +130,7 @@
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
min-height: 30px;
}
}
... ... @@ -147,6 +152,11 @@
color: #fff;
font-size: 15px;
margin-right: 15px;
cursor: pointer;
&.dis {
background: #ccc;
}
}
.ud-price-range {
... ... @@ -182,20 +192,35 @@
margin-right: 5px;
}
.sub-senior-wrap {
.senior-attr-wrap {
position: relative;
padding: 15px;
.sub {
box-sizing: border-box;
position: absolute;
padding: 15px;
left: 0;
right: -16px;
background: #fff;
border: 1px solid #ccc;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 15px;
top: 20px;
right: 15px;
}
}
}
.checkbox {
display: none;
... ...
... ... @@ -107,31 +107,36 @@ class IndexController extends AbstractAction
'id' => '1',
'href' => '',
'index' => '0-9',
'name' => '5cm'
'name' => '5cm',
'key' => '5cm'
),
array(
'id' => '2',
'href' => '',
'index' => 'k',
'name' => 'KTZ'
'name' => 'KTZ',
'key' => 'ktz'
),
array(
'id' => '3',
'href' => '',
'index' => 't',
'name' => 'Tapenade特芙娜'
'name' => 'Tapenade特芙娜',
'key' => 'tapenade特芙娜'
),
array(
'id' => '4',
'href' => '',
'index' => 'j',
'name' => '金银帝国Imperial Taels'
'name' => '金银帝国Imperial Taels',
'key' => '金银帝国imperial taels'
),
array(
'id' => '5',
'href' => '',
'index' => 'a',
'name' => 'ABLE JEANS'
'name' => 'ABLE JEANS',
'key' => 'able jeans'
)
)
),
... ... @@ -171,18 +176,35 @@ class IndexController extends AbstractAction
array(
'attr' => 'style',
'name' => '风格',
'showMulti' => true,
'sub' => array(
array(
'id' => '',
'id' => '1',
'href' => '',
'name' => '街头'
),
array(
'id' => '',
'id' => '2',
'href' => '',
'name' => '简约'
)
)
),
array(
'attr' => 'weather',
'name' => '适用季节',
'sub' => array(
array(
'id' => '1',
'href' => '',
'name' => '春天'
),
array(
'id' => '2',
'href' => '',
'name' => '夏天'
)
)
)
)
)
... ...