试图为平板电脑网站制作导航栏

Question

我正在为平板电脑网站设计导航栏。导航栏包含水平显示的元素，我希望能够在不移动窗口的情况下通过滑动（有点像封面流）显示新元素。这是我现在使用的代码（jQuery Mobile）：

//Tablet Features
        $('#navHolder').bind('swipe', 
            function(e) {
              $('#navHolder').animate({left:thisLeft - 100});
            }
        );

如果不先禁用滚动，我认为我无法触发swipe，但我愿意接受所有建议。请帮忙。

Answer 1

将您正在滚动的元素的父容器设置为overflow : hidden，这样就不会出现滚动条。然后swipe 事件应该可以正常工作，因为您将无法使用本机滚动来滚动内容。

HTML --

    <div id="navHolder-container">
        <div id="navHolder">
            <p>content in here</p>
        </div>
    </div>

CSS --

#navHolder {
    position : absolute;
    width    : 1000px;
}
#navHolder-container {
    position : relative;
    overflow : hidden;
    height   : 100px;
    width    : 100%;
}

JS--

$(function () {
    var convert = {
            swipeleft  : '-=100',
            swiperight : '+=100'
        };
    $('#navHolder-container').bind('swipeleft swiperight', function(e) {
        $('#navHolder').animate({ left: convert[e.type]});
    });
});

这是一个演示：http://jsfiddle.net/B8PQn/1/