经验分享程序开发文档资料数据资源其它资源

jQuery仿淘宝商品多条件筛选代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿淘宝商品多条件筛选代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery仿淘宝商品多条件筛选代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<script src="jquery-1.8.3.min.js"></script>
<link href="filter/Fliter.css" rel="stylesheet" />
<script src="filter/Filter.js"></script>
</head>
<body>
<h4>例子1</h4>
<h5>单选</h5>
<div id="demo1"></div>
<h5>多选</h5>
<div id="demo2"></div>

<h4>例子2</h4>
<div id="demo3"></div>
<div id="demo4"></div>
<h4>例子3</h4>
<div id="demo5"></div>
<div id="demo6"></div>

<h4>显示值</h4>
<input id="demo_value" type="text" value="">
<script type="text/javascript">
var data=[
    {
        "id": 1,
        "text": 1
    },
    {
        "id": 2,
        "text": 2
    },
    {
        "id": 3,
        "text": 3
    },
    {
        "id": 4,
        "text": 4
    }]
	//例子1
	//单选
    $('#demo1').comboboxfilter({
        url: '',
		scope: 'FilterQuery1',
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
  $('#demo2').comboboxfilter({
        url: '',
		scope: 'FilterQuery2',
		multiple: true,
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
	 $('#demo3').comboboxfilter({
        url: '',
		scope: 'FilterQuery3',
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
  $('#demo4').comboboxfilter({
        url: '',
		scope: 'FilterQuery3',
		multiple: true,
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
	 $('#demo5').comboboxfilter({
        url: '',
		scope: '',
		unlimitText:'全部',
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
  $('#demo6').comboboxfilter({
        url: '',
		scope: '',
		unlimitText:'全部',
		multiple: true,
		data:data,
		onChange:function(newValue){
		$('#demo_value').val(newValue);
		}
    });
</script>
</body>
</html>

JS代码(Filter.js):

/** * edatagrid - jQuery EasyUI * * Licensed under the GPL:* http://www.gnu.org/licenses/gpl.txt * * Copyright 2011-2015 www.jeasyui.com * * Dependencies:* datagrid * messager * */
(function ($){
	//初始化绑定事件 $(function (){
}
);
	$.fn.extend({
	comboboxfilter:function (ops){
	if (typeof (arguments[0]) != typeof ("string")){
	return $.fn.comboboxfilter.methods["init"](this,ops);
}
else{
	return $.fn.comboboxfilter.methods[arguments[0]](this,arguments);
}
}
}
);
	//方法 $.fn.comboboxfilter.methods ={
	options:function (target){
	var opts = $(target).data("comboboxfilter").options;
	return opts;
}
,init:function (target,ops){
	var $this = this;
	var options = $.extend({
}
,$.fn.comboboxfilter.defaults,ops);
	$(target).data("comboboxfilter",{
	options:options}
);
	$(target).removeClass('hotel-filter-list filter-list-has-more hotel-filter-list-min').addClass("hotel-filter-list filter-list-has-more hotel-filter-list-min");
	var listcontainer = $('<div class="con"></div>').addClass(!options.multiple ? "radio":"checkbox");
	if (options.unlimit){
	//如果开启不限 则添加 var anyNode = $('<ul class="any"><li><a class="filter-unlimit filter-tag selected" href="javascript:;
	" data-value="">' + options.unlimitText + '</a></li></ul>').bind('click',function(){
	$(anyNode).find('.filter-unlimit').removeClass('selected').addClass('selected');
	$this.clear(target);
}
);
	listcontainer.append(anyNode);
}
listcontainer.append('<ul class="list"></ul> <span class="J_FilterMore filter-more"><span class="open">更多</span><span class="close">收起</span><i></i></span>');
	listcontainer.find('.open').unbind('click').bind('click',function(){
	//绑定点击更多事件 $(target).removeClass('hotel-filter-list-min');
}
);
	listcontainer.find('.close').unbind('click').bind('click',function (){
	//绑定点击更多事件 $(target).addClass('hotel-filter-list-min');
}
);
	$(target).html($('<strong class="tit">' + options.text + '</strong>'));
	if (options.inputName){
	//添加隐藏的inputName $(target).append($('<input type="hidden" name="' + options.inputName + '" value="">'));
}
//具有分组 if (options.scope){
	$(target).attr('scope',options.scope);
	//添加自定义分组属性 if ($('#' + options.scope).length>0){
}
else{
	var node = $('<div id="' + options.scope + '" class="hotel-filter-list "><strong class="tit">已选</strong><div class="con selected-query"><ul class="list"><li class="filter-query-clear"><a class="J_FilterQueryClear" href="javascript:;
	">全部清除</a></li></ul></div></div>');
	node.find('.J_FilterQueryClear').unbind('click').bind('click',function(){
	//全部清除事件 $('div[scope="' + options.scope + '"]').comboboxfilter('clear');
}
);
	$('div[scope="' + options.scope + '"]:eq(0)').before(node);
}
}
$(target).append(listcontainer);
	this.load(target,{
}
);
}
,reload:function (target){
	this.load(target,{
}
);
}
,load:function (target,opts){
	var $this = this;
	var options = $.extend({
}
,$.fn.comboboxfilter.methods["options"](target),opts);
	if (opts.url){
	$.ajax({
	type:'post',data:options.param,url:options.url,success:function(data){
	if (typeof (data) == typeof ("string")){
	data = $.parseJSON(data);
}
var listTarget = $(target).find('.list').html('');
	$this.setData(listTarget,options,data,target);
}
,error:function(e){
	$this.onError(e);
}
}
);
}
else{
	var listTarget = $(target).find('.list').html('');
	$this.setData(listTarget,options,options.data,target);
}
}
,loadData:function (target,data){
	var $this = this;
	var options = $this.options(target);
	var listTarget = $(target).find('.list').html('');
	$this.setData(listTarget,options,data,target);
}
,setData:function (target,options,data,targetContain){
	var $this = this;
	$.each(data,function (i,item){
	var listnode = $(' <li></li>');
	var clicka = $('<a class="filter-tag" href="javascript:;
	" data-value="' + item[options.idField] + '" data-text="' + item[options.textField] + '">' + item[options.textField] + '<i></i></a>').data('data',item);
	clicka.unbind('click').bind('click',function (e){
	if (clicka.hasClass('selected')){
	//验证是否被选择，已经选择则取消选择，反之选择 clicka.removeClass('selected');
	//不可去掉（为了计算Value的正确性）}
else{
	if (!options.multiple){
	//单选执行 $(targetContain).find('.selected').trigger("click.selected-tag");
	//触发事件清除全部选项}
clicka.addClass('selected');
	$this.addSelected($('#' + options.scope),clicka,item,options,targetContain);
	//容器中添加选择项}
$this.reSetValue(targetContain);
	//重新计算Value options.onClick(item);
	//触发单机事件}
);
	listnode.append(clicka);
	target.append(listnode);
}
);
	options.onLoadSuccess(data);
	//触发加载完成事件}
,getValue:function(target){
	var selected = $(target).find('.list .selected');
	var array = new Array();
	$.each(selected,function(i,item){
	array.push($(item).attr('data-value'));
}
);
	return array.join(",");
}
,setValue:function (target,value){
	$(target).find('.selected').trigger("click.selected-tag");
	//触发事件清除全部选项用于重新赋值 var options = this.options(target);
	var clicka = $(target).find('.filter-tag[data-value="' + value[1] + '"]');
	if (clicka.length > 0){
	clicka.addClass('selected');
	var item = $(clicka).data('data');
	//取值 this.addSelected($('#' + options.scope),clicka,item,options,target);
	//容器中添加选择项}
this.reSetValue(target);
	//重新计算Value}
,setValues:function (target,valueArray){
	var $this = this;
	var options = this.options(target);
	if (options.multiple){
	//开启多选可用 $(target).find('.selected').trigger("click.selected-tag");
	//触发事件清除全部选项用于重新赋值 $.each(valueArray[1],function (i,itemData){
	var clicka = $(target).find('.filter-tag[data-value="' + itemData + '"]');
	if (clicka.length > 0){
	clicka.addClass('selected');
	var item = $(clicka).data('data');
	//取值 $this.addSelected($('#' + options.scope),clicka,item,options,target);
	//容器中添加选择项}
}
);
	$this.reSetValue(target);
	//重新计算Value}
}
,//添加已经选择项 //pointTarget：选择项容器 //target 被点击的项 //itemData 被选择数据 addSelected:function (pointTarget,target,itemData,options,targetContain){
	var $this = this;
	var anode = $('<a href="javascript:;
	">' + itemData[options.textField] + '</a>');
	//创建X,点击则移除选择项 var inode = $('<i class="J_FilterQueryDel" data-type="ParentCatelog" data-value="' + itemData[options.idField] + '"></i>').unbind('click').bind('click',function (e){
	$(target).trigger("click.selected-tag");
	//触发事件 // $(e.target).closest('.selected-tag').remove();
	$this.reSetValue(targetContain);
	//重新计算Value}
);
	//绑定指定命名空间的单击事件 $(target).unbind('click.selected-tag').bind('click.selected-tag',function (e){
	$(target).removeClass('selected');
	$(anode).closest('.selected-tag').remove();
	$(target).unbind('click.selected-tag');
}
);
	anode.append(inode);
	pointTarget.find('.list').append($('<li data-type="ParentCatelog" class="selected-tag"></li>').append(anode));
}
,//重新计算Value reSetValue:function (target){
	var value = this.getValue(target);
	$(target).find('input[name="' + this.options(target).inputName + '"]').val(value);
	//有值 if (value){
	$(target).find('.filter-unlimit').removeClass('selected');
}
//无值 else{
	$(target).find('.filter-unlimit').addClass('selected');
}
this.options(target).onChange(value);
}
,clear:function (target){
	$(target).find('.selected').trigger("click.selected-tag");
	//触发事件 this.reSetValue(target);
	//重新计算Value}
}
$.fn.comboboxfilter.parseOptions = function (target){
	return $.extend({
}
,$.fn.datagrid.parseOptions(target),{
}
);
}
;
	$.fn.comboboxfilter.defaults ={
	url:'',idField:'id',textField:'text',scope:'FilterQuery',text:'',multiple:false,data:[],inputName:'',unlimit:true,//是否显示不限，默认显示 unlimitText:'不限',param:{
}
,onClick:function (itemData){
}
,onChange:function (newValue){
}
,onLoadSuccess:function (data){
}
,onError:function (e){
}
}
;
}
)(jQuery);

CSS代码(Fliter.css):

#hotel-filter{padding:10px 0;}
/* 最小高度 */
.hotel-filter-list-min{height:36px;}
/* 筛选外容器 */
.hotel-filter-list{position:relative;font-size:12px;border-bottom:1px solid #eff2f5;overflow:hidden;zoom:1;background-color:#fff;}
/* 筛选icons */
.hotel-filter-list i{position:absolute;overflow:hidden;cursor:pointer;background:transparent url("./images/list_i.gif") 0 0 no-repeat;}
/* reset */
.hotel-filter-list ul,.hotel-filter-list li{margin:0;padding:0;list-style:none;overflow:hidden;zoom:1;}
.hotel-filter-list ul{*width:700px;/*IE7专用*/
}
.hotel-filter-list li{*white-space:nowrap;/*IE7专用*/
}
.hotel-filter-list strong{font-weight:400;}
.hotel-filter-list-hidden{display:none;}
/* 筛选分类标题 */
.hotel-filter-list .tit{float:left;width:40px;height:24px;color:#8fa0ac;margin-top:6px;line-height:24px;padding-left:3px;}
/* 筛选分类列表容器 */
.hotel-filter-list .con{overflow:hidden;zoom:1;padding:0 40px 6px 0;}
/* 筛选全局 */
.hotel-filter-list .con li{float:left;height:24px;display:inline;margin-top:6px;line-height:24px;}
.hotel-filter-list .con a{position:relative;float:left;color:#43647f;padding:0 16px;text-decoration:none;}
/* 筛选不限 */
.hotel-filter-list .con .any{float:left;width:54px;height:24px;margin-top:6px;line-height:24px;}
.hotel-filter-list .con .any li{margin-top:0;}
.hotel-filter-list .con .any a{padding-left:10px;}
.hotel-filter-list .con .any a:hover{background-color:#eff2f5;}
.hotel-filter-list .con .any a.selected,.hotel-filter-list .con .any a.selected:hover{color:#fff;cursor:text;background-color:#96a9b5;}
/* 单选类型 */
.hotel-filter-list .radio{}
.hotel-filter-list .radio a:hover{background-color:#eff2f5;}
.hotel-filter-list .radio a.selected,.hotel-filter-list .radio a.selected:hover{color:#fff;cursor:text;background-color:#96a9b5;}
/* 多选类型 */
.hotel-filter-list .checkbox{}
.hotel-filter-list .checkbox a{padding-left:28px;background-color:transparent;}
.hotel-filter-list .checkbox a i{top:50%;left:10px;width:13px;height:13px;margin-top:-7px;background:transparent url("./images/checkbox.png") 0 -50px no-repeat;}
.hotel-filter-list .checkbox a.selected i{background-position:0 0;}
.hotel-filter-list .checkbox a.disabled{color:#999;cursor:not-allowed;}
.hotel-filter-list .checkbox a.disabled i{opacity:0.5;filter:alpha(opacity=50);cursor:not-allowed;}
/* 更多按钮 */
.hotel-filter-list .more{position:absolute;top:6px;right:0;height:24px;line-height:24px;color:#43647f;cursor:pointer;padding-right:15px;}
.hotel-filter-list .more i{top:50%;right:0;width:7px;height:4px;margin-top:-2px;background-position:0 0;}
/* 已选筛选条件 */
.hotel-filter-list .selected-query{padding-right:0;}
.hotel-filter-list .selected-query li{width:auto;margin-right:3px;height:26px;margin-top:6px;}
.hotel-filter-list .selected-query a{color:#000;cursor:text;white-space:nowrap;padding-right:23px;border:1px solid #ddd;}
.hotel-filter-list .selected-query a:hover{color:#000;cursor:text;white-space:nowrap;padding-right:23px;border:1px solid red;}
.hotel-filter-list .selected-query a i{top:50%;right:5px;width:14px;height:13px;cursor:pointer;margin-top:-7px;background-position:2px -86px;}
.hotel-filter-list .selected-query .filter-query-clear{}
.hotel-filter-list .selected-query .filter-query-clear a,.hotel-filter-list .selected-query .filter-query-clear a:hover{color:#43647f;padding:0 10px;cursor:pointer;background-color:transparent;}
.hotel-filter-list .selected-query .filter-query-clear a:hover{background-color:#eff2f5;}
/* 位置筛选 */
.hotel-filter-list .location{padding-right:0;}
.hotel-filter-list .location .nav a{padding-right:20px;}
.hotel-filter-list .location .nav a.selected{color:#fff;cursor:pointer;background-color:#96a9b5;}
.hotel-filter-list .location .nav a.selected i{background-position:-9px 0;}
.hotel-filter-list .location .nav a i{top:50%;right:6px;width:7px;height:4px;margin-top:-2px;background-position:0 0;}
.hotel-filter-list .location .nav .location-selected,.hotel-filter-list .location .nav .location-selected:hover{color:#43647f;background-color:#eff2f5;}
.hotel-filter-list .location .nav .location-selected i{background-position:0 -44px;}
.hotel-filter-list .location .any .location-selected,.hotel-filter-list .location .any .location-selected:hover{color:#fff;background-color:#96a9b5;}
.hotel-filter-list .location-content{}
.hotel-filter-list .location-content .location-pannel{padding:4px 10px 10px;background-color:#eff2f5;}
.hotel-filter-list .location-content .location-pannel-empty{height:0;padding:0;margin:0;font-size:0;overflow:hidden;}
.hotel-filter-list .location-content li{width:130px;}
/* 地钱 */
.hotel-filter-list .subway{}
.hotel-filter-list .subway li{width:84px;}
.hotel-filter-list .subway-nav{border-bottom:1px solid #dfe4e9;}
.hotel-filter-list .subway-nav a{height:22px;line-height:22px;border-bottom:2px solid #eff2f5;}
.hotel-filter-list .subway-nav .subway-selected{border-bottom-color:#43647f;}
/* 机场火车站 */
.hotel-filter-list .transport{position:relative;}
.hotel-filter-list .transport i{top:10px;left:10px;width:16px;}
.hotel-filter-list .transport .airport{height:13px;background-position:0 -137px;}
.hotel-filter-list .transport .train{height:16px;background-position:0 -190px;}
.hotel-filter-list .transport .bus{height:15px;background-position:0 -246px;}
.hotel-filter-list .transport ul{position:relative;padding-left:29px;}
/* 自定义价格 */
.hotel-filter-list .con .filter-custom{width:auto;}
.hotel-filter-list .con .filter-custom input{width:38px;height:17px;line-height:17px;}
.hotel-filter-list .con .filter-custom .filter-custom-range{display:none;}
.hotel-filter-list .con .filter-custom-active .filter-custom-range{display:block;}
.hotel-filter-list .con .filter-custom .filter-custom-text{display:block;}
.hotel-filter-list .con .filter-custom-active .filter-custom-text{display:none;}
.hotel-filter-list .con .filter-custom .filter-custom-range strong{padding:0 5px;}
.hotel-filter-list .con .filter-custom-active a:hover{background-color:transparent;}
.hotel-filter-list .con .filter-custom .filter-custom-range *{float:left;line-height:24px;}
.hotel-filter-list .con .filter-custom .filter-custom-range .filter-custom-confirm{width:45px;height:23px;line-height:23px;color:#fff;cursor:pointer;margin-left:5px;text-align:center;background-color:#7bc2f1;}
/* 品牌 */
.hotel-filter-list .brand .brand-type{position:relative;width:100%;height:auto;margin-top:-1px;border-top:1px solid #dfe4e9;}
.hotel-filter-list .brand .brand-type strong{display:none;}
.hotel-filter-list-brand .con{padding-right:0;}
.hotel-filter-list-brand .brand{position:relative;margin-top:6px;padding:0 20px;background-color:#f0f2f5;}
.hotel-filter-list-brand .brand .brand-type{position:relative;width:100%;height:auto;margin-top:-1px;padding:6px 0;border-top:1px solid #dfe4e9;}
.hotel-filter-list-brand .brand .brand-type ul{padding-left:80px;}
.hotel-filter-list-brand .brand .brand-type strong{position:absolute;top:50%;left:20px;width:auto;height:24px;color:#8fa0ac;line-height:24px;margin-top:-12px;display:block;}
/* 更多 */
.hotel-filter-list .filter-more{position:absolute;top:6px;right:5px;width:auto;height:24px;line-height:24px;padding-right:15px;color:#43647f;cursor:pointer;display:none;}
.filter-list-has-more .filter-more{display:block;}
.hotel-filter-list .filter-more i{top:50%;right:0;width:7px;height:4px;cursor:pointer;margin-top:-2px;background-position:0 -44px;}
.hotel-filter-list-min .filter-more i{background-position:0 0;}
.hotel-filter-list .filter-more .close{display:block;}
.hotel-filter-list .filter-more .open{display:none;}
.hotel-filter-list-min .filter-more .close{display:none;}
.hotel-filter-list-min .filter-more .open{display:block;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
39.79 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
39.79 KB
立即下载
巫兰
了解
打赏作者 鼓励作者
jquery特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章