Horizontales scrollen, Tippen Sie auf Menü?

Baue ich eine mobile website, und der Kunde will eine Menüleiste am oberen Bildschirmrand. Das Menü ist sehr breit, so dass er möchte, dass Sie horizontal, indem Sie Sie Links und rechts. app.ft.com hat eine ähnliche Funktionalität (obwohl Sie müssen dies auf einem iPhone zu sehen, das es funktioniert)

Kennt jemand ein jQuery /jqTouch-Skript, um dies zu erreichen? Ich habe versucht scrollTouch, aber das nur scrollt die ganze Seite, nicht nur ein Menü.

InformationsquelleAutor Typhoon101 | 2011-08-03

0

Werfen Sie einen Blick auf diese

http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture
- Danke für den link. Es sieht ein gutes script, aber nicht sicher, ich könnte es an die Arbeit mit einem Menü - gebaut als eine ungeordnete Liste. Ich kann nicht scheinen, um es zu Blättern, ohne das einrasten der nächste Punkt - ein Bild, das in diesem Fall. Ich könnte falsch sein, aber ich weiß nicht Deutsch sprechen, so kann nicht sehen, ob es irgendwelche markup-Anweisungen
- Ist jemand in der Lage zu helfen?
- Können Sie nach ein paar von markup und code, dass Sie versucht haben, kann ich Ihnen helfen.
- Ich habe diese plugin zu verwenden die gleiche Funktion auf meiner web-Seite, die unterstützt ipad und povides horizontal scrollen.
- Link ist jetzt tot
InformationsquelleAutor ShankarSangoli

Schrieb ich eine einfache horizontale Navigationsleiste mit Bildern für jQuery Mobile, die Sie Blättern können, indem Sie Sie nach Links oder rechts auf mobilen Geräten. Dieses Beispiel ist sehr grob, aber es wird Ihnen die Allgemeine Idee. Der markup-Code ist unten:

CSS:

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

HTML-Markup:

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

Beachten Sie, dass $(document).ready() wird nicht empfohlen, wenn die AJAX-navigation aktiviert ist, wird in jQuery Mobile, so dass Sie vielleicht brauchen, um maßgeschneiderte diese Lösung an die eigenen Bedürfnisse angepasst.

InformationsquelleAutor Christopher Cubells

2

Nur eine css-Lösung, unter Verwendung der Tatsache, dass mobile Browser does create any scrollbars. Eine Art visuelle Orientierung und auto-Breite für die innere wäre gut, aber ist nicht immer notwendig.

JSFiddle zu spielen mit 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>
```
InformationsquelleAutor Jonas Äppelgran
1

Versuchen iScroll 4 durch cubiq.org. Es kann angewendet werden, um jedes div auf der Seite, die horizontal, vertikal oder beide scrollen, haben eine nette animation (genau wie bei smartphones), ist sehr schnell in webkit und Firefox (andere sind noch schlimmer) und vor allem, ist ziemlich individuell. Ich verbringe 12 Stunden auf der Suche nach diesen scroller und diese deckt im Grunde alle meine Bedürfnisse.

InformationsquelleAutor koubic

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.