如何让我的范围滑块在 asp.net mvc 3 上的触摸屏上工作

Question

我在 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");
    }
  });
 });

Answer 1

你需要添加更多这个 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);