Горизонтальная прокрутка сенсорного меню? - PullRequest
Новая
       21

Горизонтальная прокрутка сенсорного меню?

0 голосов
/ 03 августа 2011

Я создаю мобильный веб-сайт, и клиенту нужна строка меню вверху. Меню очень широкое, поэтому он хочет, чтобы его горизонтально прокручивали, перетаскивая его влево и вправо. app.ft.com имеет аналогичную функциональность (хотя вы должны просмотреть это на iPhone, чтобы увидеть, как он работает)

Кто-нибудь знает сценарий jQuery / jqTouch, который может этого добиться? Я пробовал scrollTouch, но он прокручивает только всю страницу, а не только меню.

Ответы [ 4 ]

2 голосов
/ 08 июня 2013

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

JSFiddle для игры с http://jsfiddle.net/KaGrc/1

CSS: 

#outer {
    width: 100%;
    overflow: auto;
}

#inner {
    width: 800px;
}

HTML: 

<div id="outer">
    <div id="inner">
        content1 content2 content3 content4 content5 content6 content7 content8 content9 content10 content11 content12
    </div>
</div>
2 голосов
/ 27 апреля 2012

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

CSS: 

<style type="text/css">
#navBar
{
    white-space: nowrap;
    height: 55px;
    width: 100%;
    position: relative;
}
</style>

HTML-разметка: 

<div id="navBar">
    <div style="left: 0%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav1" />
        <br />
        <span style="font-size: 80%">Nav1</span>
    </div>
    <div style="left: 40%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav2" />
        <br />
        <span style="font-size: 80%">Nav2</span>
    </div>
    <div style="left: 80%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav3" />
        <br />
        <span style="font-size: 80%">Nav3</span>
    </div>
    <div style="left: 120%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav4" />
        <br />
        <span style="font-size: 80%">Nav4</span>
    </div>
    <div style="left: 160%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav5" />
        <br />
        <span style="font-size: 80%">Nav5</span>
    </div>
    <div style="left: 200%; width: 40%; float: left; display: inline-block; position: absolute; text-align: center;">
        <img src="image.png" alt="Nav6" />
        <br />
        <span style="font-size: 80%">Nav6</span>
    </div>
</div>

JavaScript: 

<script type="text/javascript" language="javascript">
    var bMouseDown = false;
    var bMouseUp = true;
    var iStartPixelsX = 0;
    var iCurrentNavbarPixelsX = 0;
    var changePixels = 0;
    var leftMostOffsetPixels = 0;

    function funcMoveNavBar(pixels) {
        $("#navBar").attr("style", "left: " + pixels + "px;");
    }

    var onOrientationChange = function () {
        setTimeout(function () {
            funcMoveNavBar(0);
            iStartPixelsX = 0;
            iCurrentNavbarPixelsX = 0;
            changePixels = 0;
            leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width();
        }, 500);
    }

    $(document).ready(function () {
        leftMostOffsetPixels = $("#navBar div").last().offset().left + $("#navBar div").last().width();

        if (window.addEventListener) {
            window.addEventListener("orientationchange", onOrientationChange, false);
        } else if (window.attachEvent) {
            window.attachEvent("onorientationchange", onOrientationChange);
        }

        $("#navBar").bind("vmousedown", function (e) {
            bMouseDown = true;
            bMouseUp = false;

            iStartPixelsX = e.pageX;
        });

        $("#navBar").bind("vmousemove", function (e) {
            if (bMouseDown && !bMouseUp) {
                e.preventDefault();
                changePixels = (e.pageX - iStartPixelsX) + iCurrentNavbarPixelsX;

                funcMoveNavBar(changePixels);
            }
        });

        $("#navBar").bind("vmouseup", function (e) {
            bMouseUp = true;
            bMouseDown = false;

            if (changePixels > 0) {
                funcMoveNavBar(0);
                changePixels = 0;
                iCurrentNavbarPixelsX = 0;
            } else if (($("#navBar div").last().offset().left + $("#navBar div").last().width()) < $("#navBar").width()) {
                funcMoveNavBar($("#navBar").width() - leftMostOffsetPixels);
                iCurrentNavbarPixelsX = $("#navBar").width() - leftMostOffsetPixels;
                changePixels = $("#navBar").width() - leftMostOffsetPixels;
            } else {
                iCurrentNavbarPixelsX = changePixels;
            }
        });
    });
</script>

Имейте в виду, что $(document) .ready () не рекомендуется, если в jQuery Mobile включена навигация AJAX, поэтому вам может потребоваться адаптировать это решение в соответствии со своими потребностями.

1 голос
/ 19 декабря 2012

Попробуйте iScroll 4 от cubiq.org .Он может быть применен к любому элементу div на странице, горизонтальной, вертикальной или обеим прокрутке, имеет хорошую анимацию (как на смартфонах), очень быстро работает в webkit и Firefox (другие хуже) и, что самое главное, довольно настраиваемый.Я провожу 12 часов в поисках такого скроллера, и это покрывает практически все мои потребности.

0 голосов
/ 03 августа 2011
...