价格过滤条

写了一个价格过滤条：

重点是按钮的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的价格过滤条实现的比较完美：

 

 

评论

4 楼 ice-cream 2009-08-13  

yjrl 写道

感觉还有点小bug，拖动的时候如果不在那个三角形上松开鼠标就会有点错误。。。

恩，是有这个bug，一直没解决，呵呵

3 楼 yjrl 2009-08-13  

感觉还有点小bug，拖动的时候如果不在那个三角形上松开鼠标就会有点错误。。。

2 楼 ming500 2009-06-13  

挺不错的.

1 楼 ayeah 2009-05-21  

jquery ui有个slider，恭喜你实现了它的功能