我在asp.net mvc 3 Razor 中有一个网站,并且有一些范围滑块。此范围滑块工作正常,但不适用于触摸屏。
我的HTML代码:
<div id="slider-container-zucker" class="slider_style"></div>
和js:
$(function () {
var str = document.URL.split("/");
var url = str[0] + "//" + str[2];
$('#slider-container-zucker').slider({
range: true,
min: 0,
max: 9,
values: [$("#zuckerMin").val(), $("#zuckerMax").val()],
change: function (event, ui) {
$.ajax({
type: "GET",
url: url + "/Slider/Zucker?max=" + ui.values[1] + "&min=" + ui.values[0],
success: function (result) {
$("#wineResult").html(result);
}
});
$('#sliderImage').load(url + "/Slider/ChangeSlider?max=" + ui.values[1] + "&min=" + ui.values[0] + "&sliderName=zucker");
}
});
});
最佳答案
您需要添加更多这个jQuery库
您必须在这里看到它:
https://github.com/ghusse/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.min.js
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);