easyui-slider组件扩展

easyui的slidler组件当可选的范围很大时，不好进行精确控制

我作了一个扩展:

双击slider的handle bar时，切换到输入框输入模式

1.进入输入模式后，显示一个长度等于拉动条长度的输入框在拉动条上层，并将焦点放到输入框内

2.输入框值改变的时候同时修改 slider的值

3.输入完毕后，点击输入框以外让输入框失去焦点时,切换到slider的原始状态

如:

输入模式:

扩展代码:

function slider_handle_ext(){
	$(".slider-handle").on("dblclick", function() {
		var sliderElement = $(this).parent().parent().parent().children("input.easyui-slider");
		if(sliderElement.attr("id") == undefined || sliderElement.attr("id") == ""){
			sliderElement.attr("id","slider_" + new Date().getTime());
		}
		
		var sliderId = sliderElement.attr("id");
		var $slider = $("#"+sliderId);
		if($slider.slider('options').disabled){
			return;
		}
		
		var sliderInner =  $(this).parent();
		
		var contentDiv = $("
").appendTo("body");
		contentDiv.css({
			"position": "absolute",
			"left": sliderInner.offset().left +"px",
			"top" : sliderInner.offset().top -1 +"px",
			"width" : sliderInner.width()+100,
			"z-index" : 100000
		});
		
		var input = $("").appendTo(contentDiv);
		input.css({
			"width" : sliderInner.width()
		});
		input.focus();
		input.on("keyup",function() {
			$slider.slider('setValue', $( this ).val());
		});
		
		input.on("blur",function() {
			contentDiv.remove();
		});
	});	
}

在有使用slider的页面, 页面加载完后 调用些方法，如:

	$(function(){
		slider_handle_ext();
	});