пытаюсь сделать панель навигации для планшета сайта - PullRequest
Новая
       26

пытаюсь сделать панель навигации для планшета сайта

0 голосов
/ 27 января 2012

Я разрабатываю панель навигации для веб-сайта планшета. Панель навигации содержит элементы, отображаемые горизонтально, и я хочу иметь возможность отображать новые элементы с помощью пролистывания (что-то вроде потока обложек) без перемещения окна. Это код, который я сейчас использую (jQuery Mobile): 

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

Не думаю, что смогу вызвать swipe без предварительного отключения прокрутки, но я открыт для всех предложений. Пожалуйста, помогите.

1 Ответ

1 голос
/ 27 января 2012

Установите родительский контейнер прокручиваемого элемента на 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/

...