0

我正在将 split-pane.js Jquery 插件用于具有可拖动宽度的网站中的垂直分屏视图。插件和演示

我唯一的问题是：它不适用于触摸设备。

有没有办法添加这个功能？我已经尝试过 Jquery UI 触摸打孔插件。

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

$(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');
});

});

4

1 回答 1

0

解决了！行：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");
    });         
});

}
于 2015-05-17T10:52:48.797 回答