试图使平板电脑网站的导航栏 [英] trying to make navigation bar for tablet site

问题描述

我正在为平板电脑网站设计一个导航栏.导航栏包含水平显示的元素，我希望能够通过滑动(有点像覆盖流)来显示新元素，而无需移动窗口.这是我现在正在使用的代码(jQuery Mobile):

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

我认为我无需先禁用滚动即可触发swipe，但是我愿意接受所有建议.请帮忙.

解决方案

将要滚动的元素的父容器设置为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/

I'm designing a navigation bar for a tablet website. The navigation bar holds elements displayed horizontally, and I want to be able to display new elements with a swipe (kind of like a cover flow) without the window moving. This is the code I'm using now (jQuery Mobile):

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

I dont think I can trigger a swipe without first disabling scroll, but I'm open to all suggestions. Please help.

解决方案

Set the parent container of the element you are scrolling to overflow : hidden so no scroll-bars appear. Then swipe events should work fine since you won't be able to use native scrolling to scroll the content.

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]});
    });
});

Here is a demo: http://jsfiddle.net/B8PQn/1/

这篇关于试图使平板电脑网站的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！