列表筛选

默认效果

<div class="ui-filter">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">分类:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">手机通讯</a><a href="#">手机配件</a><a href="#">摄影摄像</a><a href="#">数码配件</a><a href="#">智能设备</a><a href="#">时尚影音</a><a href="#">手机通讯</a><a href="#">手机配件</a><a href="#">摄影摄像</a><a href="#">数码配件</a><a href="#">智能设备</a><a href="#">时尚影音</a><a href="#">手机通讯</a><a href="#">手机配件</a><a href="#">摄影摄像</a><a href="#">数码配件</a><a href="#">智能设备</a><a href="#">时尚影音</a>
</div>
</div>
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">产地:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">上海</a><a href="#">北京</a><a href="#">天津</a><a href="#">深圳</a>
</div>
</div>
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">品牌:</div>
<div class="ui-col-11 ui-filter-right ui-filter-right-image">
<a href="#" class="active">全部</a><a href="#"><img src="/upfile/1.png" height="20"></a><a href="#"><img src="/upfile/2.png" height="20"></a><a href="#"><img src="/upfile/3.png" height="20"></a><a href="#"><img src="/upfile/4.png" height="20"></a><a href="#"><img src="/upfile/5.png" height="20"></a><a href="#"><img src="/upfile/6.png" height="20"></a><a href="#"><img src="/upfile/7.png" height="20"></a><a href="#"><img src="/upfile/8.png" height="20"></a>
</div>
</div>
</div>

颜色

<div class="ui-filter ui-filter-red">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>

<div class="ui-filter ui-filter-yellow">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>

<div class="ui-filter ui-filter-blue">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>

<div class="ui-filter ui-filter-green">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>

<div class="ui-filter ui-filter-info">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>

<div class="ui-filter ui-filter-black">
<div class="ui-row">
<div class="ui-col-1 ui-filter-left">材质:</div>
<div class="ui-col-11 ui-filter-right">
<a href="#" class="active">全部</a><a href="#">不锈钢</a><a href="#">塑料</a><a href="#">纳米</a><a href="#">其他</a>
</div>
</div>
</div>