Swipe zwischen den Seiten für eine webapp

Ich möchte eine webapp (um zu vermeiden, dass das Programm individuell für iPhone, Android, BB, etc) und bin auf der Suche nach einer swipe-Effekt. Gibt es eine HTML5-oder webkit-code einfach zu sagen "swipe zum nächsten/vorherigen Seite"? (Ich weiß, es wäre mehr detail code als das, aber das ist das wesentliche, was ich will)

InformationsquelleAutor SnowboardBruin | 2012-05-02
  1. 6

    können Sie div-streichen herum, aber nicht die komplette Seite im web-browser.i,e Sie können nur laden von Seiten in einen div nach dem wischen beeinflussen und sich nicht bewegen, eine ganze Seite selbst.

    funktioniert nur in chrome,safari.

    hier ist ein code, wenn u r unter Verwendung von jquery mobile. 

    $('body').live('swipeleft swiperight',function(event){
    if (event.type == "swiperight") {
       alert("swipped right side");      
    }
    if (event.type == "swipeleft") {
        alert("swipped left side");
    }
    event.preventDefault();
});

    finden Sie hier mehr swipe detection

    • Danke @sree, das sieht vielversprechend aus, aber gibt es eine Möglichkeit einen div-link auf eine andere HTML-Seite? Ich weiß nicht wirklich wollen, um alle Inhalte in eine HTML-Seite, und lieber das wischen von den Seiten. Also im Grunde <div>Seite1.html</div><div>Page2.html</div><div>Page3.html</div> vielen Dank nochmal für die Hilfe!!!!
    • laden Sie auf und ziehen Sie die Seiten in einem div , wäre der Effekt immer noch derselbe sein wie der swipe-Funktion ,anstelle von alert-schreiben Sie diesen code $('#Ergebnis').load('page1.html');
    • Die Kätzchen müssen Liebe dich...
    • hahaha ja 🙂
    InformationsquelleAutor sree
  2. 3

    @sree hat mich auf dem besten Weg dorthin, aber hier ist der code landete ich mit

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
    <script src="js/jquery.js"></script>
    <script src="docs/_assets/js/jqm-docs.js"></script>
    <script src="js/jquery.mobile-1.1.0.js"></script>

</head>

<body>

<p>random page to test on</p>
<p>Swipe1 </p>
<script type="text/javascript">
$('body').live('swipeleft swiperight',function(event){
    if (event.type == "swiperight") {
       jQuery.mobile.changePage("page2.html",{transition:'slide'});      
    }
    if (event.type == "swipeleft") {
        jQuery.mobile.changePage("page1.html",{transition:'slide'});
    }
    event.preventDefault();
});
            </script>
</body>
</html>

    ...und ich habe die jquery mobile kit gehalten und die CSS/JS-Dateien mit dem gleichen Datei-Struktur

    InformationsquelleAutor SnowboardBruin
  3. 0

    Machte ich https://github.com/caktux/swipy nur für diese. Ich möchte erhalten Sie feedback von anderen devs und vielleicht machen es die go-to plugin für "responsive websites, webapps", wenn es das Interesse.

    InformationsquelleAutor caktux
Schreibe einen Kommentar