Question

我正在使用split-pane.js Jquery插件在具有可拖动宽度的网站中进行垂直分屏视图。 Plugin and Demo

我唯一的问题是：它没有使用触控设备。

有没有办法添加这个功能？我已经尝试过Jquery UI touch punch插件。

这里是触发分屏功能的代码：

$(function() {
var min = 300;
var max = 1200;
var mainmin = 490;

$('#split-bar').mousedown(function (e) {
    e.preventDefault();
    $(document).mousemove(function (e) {
        e.preventDefault();
        var x = e.pageX - $('#sidebar').offset().left;
        if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
          $('#sidebar').css("width", x);
          $('#main').css("margin-left", x);
        }
    })
});
$(document).mouseup(function (e) {
    $(document).unbind('mousemove');
});

}）;

Answer 1

解决！这一行：var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];有所不同。

但现在我必须使用Modernizer检测设备并为桌面和触摸设备运行两个不同的脚本。

我认为这不是最好的做法。我怎么能减少这个解决方案？

现在代码如下：

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) { /*Splitscreen for Touchdevices*/
    $(function() {
        var min = 300;
        var max = 1200;
        var mainmin = 300;

        $('#split-bar').on( "touchstart", function(e){
            e.preventDefault();
            $(document).on( "touchmove", function(e){
                e.preventDefault();
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                var x = touch.pageX - $('#sidebar').offset().left;
                if (x > min && x < max && touch.pageX < ($(window).width() - mainmin)) {  
                  $('#sidebar').css("width", x);
                  $('#main').css("margin-left", x);
                }
            })
        });
        $(document).on( "touchend", function(e){
            $(document).unbind("touchmove");
        });         
    });
} else {
    $(function() { /*Splitscreen for Desktop*/
    var min = 300;
    var max = 1200;
    var mainmin = 490;

    $('#split-bar').on( "mousedown touchstart", function(e){
        e.preventDefault();
        $(document).on( "mousemove touchmove", function(e){
            e.preventDefault();
            var x = e.pageX - $('#sidebar').offset().left;
            if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
              $('#sidebar').css("width", x);
              $('#main').css("margin-left", x);
            }
        })
    });
    $(document).on( "mouseup touchend", function(e){
        $(document).unbind("mousemove touchmove");
    });         
});

}

用于触摸设备的拆分窗格jquery插件

1 个答案: