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 = $("<div/>").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 = $("<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();});