价格过滤条

最新推荐文章于 2024-07-09 16:59:07 发布

最新推荐文章于 2024-07-09 16:59:07 发布 · 159 阅读

文章标签：

#CSS #jQuery #IE #UI #ViewUI

jquery 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个简单的价格过滤条实现方案，使用JavaScript和jQuery操作DOM元素完成动态调整，并根据鼠标位置改变价格范围显示。该实现主要关注按钮的CSS定位，能够进行粗略的价格区间筛选。

写了一个价格过滤条：

重点是按钮的css定位要算好。

只能做粗略的过滤，分两种情况考虑，分别是左边按钮移动和右边按钮移动。

ie下貌似还有些问题，按钮释放有个bug。

function price_choose(){
	var left_d=0,left_x=0,right_d=0,right_x=0;
	var max = 10000;
	var min = 100;
	var s_b_left_width = $(".s_b_left").width();
	var slider_box_width = $(".slider_box").width();
	var scale = (max-min)/(slider_box_width - s_b_left_width);				
	$(".s_b_left").mousedown(function(event){
		left_d = event.screenX - $(this).css("left").replace(/px/,"");
	});
	$(".s_b_right").mousedown(function(event){
		right_d = event.screenX - $(this).css("left").replace(/px/,"");
	});
	$(".slider_box").mousemove(function(event) {
		if (left_d != "") {
			var left_x = event.screenX-left_d;
			$(".s_b_left").css("left",left_x + "px");
			if (left_x < 0) {
				left_x = 0;
				$(".s_b_left").css("left", "0px");							
			}
			var position_right = Number($(".s_b_right").css("left").replace(/px/, ""));
			if (left_x > position_right - s_b_left_width) {
				left_x = position_right - s_b_left_width;
				$(".s_b_left").css("left", left_x + "px");   
			}
			$(".min").text(min + Math.round(left_x * scale));
		}
		if (right_d != "") {
			var right_x = event.screenX-right_d;
			$(".s_b_right").css("left",right_x + "px");
			var position_left = Number($(".s_b_left").css("left").replace(/px/, ""));
			if (right_x < position_left + s_b_left_width) {
				$(".s_b_right").css("left", position_left + s_b_left_width + "px");
				
			}
			$(".max").text(Math.round($(".s_b_right").css("left").replace(/px/, "")*scale));
			if (right_x > slider_box_width - s_b_left_width) {
				$(".s_b_right").css("left", slider_box_width - s_b_left_width + "px");
				$(".max").text(max);
			}	
		}
		
	});
	$(".slider_box").mouseup(function(event) {
		left_d = "";
		right_d = "";
	});
}

jquery ui的价格过滤条实现的比较完美：