jquery - best - Menú táctil de desplazamiento horizontal?

best jquery plugins

Question

Estoy construyendo un sitio web móvil, y el cliente quiere una barra de menú en la parte superior. El menú es muy ancho, por lo que quiere que se desplace horizontalmente arrastrándolo a la izquierda y a la derecha. app.ft.com tiene una funcionalidad similar (aunque debe ver esto en un iPhone para que funcione)

¿Alguien sabe de una secuencia de comandos jQuery / jqTouch que puede lograr esto? He probado scrollTouch, pero eso solo desplaza toda la página, no solo un menú.

Answer 1

Mira esto

http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

Answer 2

Escribí una barra de navegación horizontal simple con imágenes para jQuery Mobile que puede desplazar arrastrándola hacia la izquierda o hacia la derecha en dispositivos móviles. Este ejemplo es muy crudo, pero te dará una idea general. El marcado está a continuación:

CSS:

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

Marcado 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>

Tenga en cuenta que $ (document) .ready () no se recomienda cuando la navegación AJAX está habilitada en jQuery Mobile, por lo que es posible que necesite adaptar esta solución para que se ajuste a sus necesidades.

Answer 3

Pruebe iScroll 4 por cubiq.org . Se puede aplicar a cualquier div en la página, horizontal, vertical o ambos desplazamientos, tener una animación agradable (como en los teléfonos inteligentes), es muy rápido en webkit y Firefox (otros son peores) y, sobre todo, es bastante personalizable. Paso unas 12 horas buscando ese desplazamiento y esto cubre básicamente todas mis necesidades.

Answer 4

Una solución de solo CSS, que utiliza el hecho de que los navegadores móviles no crean ninguna barra de desplazamiento. Algún tipo de guía visual y ancho automático para el interior sería bueno, pero no siempre es necesario.

JSFiddle para jugar con 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>