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>