Swipe zwischen Webseiten für eine Webapp

Ich möchte eine Webapp erstellen (um nicht für iPhone, Android, BB, usw. individuell programmieren zu müssen) und bin auf der Suche nach einem Swipe-Effekt. Gibt es einen HTML5- oder Webkit-Code, der einfach sagt "wische zur nächsten/vorherigen Seite"? (Ich weiß, es wäre mehr Detail-Code als das, aber das ist der Kern dessen, was ich will)Swipe zwischen Webseiten für eine Webapp

Quelle

2012-05-02 SnowboardBruin

können Sie div verwenden, um aber nicht ganze Seite im Webbrowser swipe.i, e können Sie nur Seiten in einem laden div nach dem Swipe-Effekt und nicht die gesamte Seite selbst verschieben.

funktioniert nur in Chrom, Safari.

Hier ist ein Code, wenn Sie jquery mobile verwenden.

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

mehr finden hier swipe detection

Quelle

2012-05-02 14:10:35 sree

Dank @sree, das sieht vielversprechend aus, aber gibt es eine Möglichkeit, einen div Link zu einer anderen HTML-Seite zu machen? Ich möchte nicht wirklich den gesamten Inhalt auf einer HTML-Seite haben und ziehe es vor, von Seiten zu wischen. Also im Grunde

Page1.html

Page2.html

Page3.html

Danke nochmal für die Hilfe !! – SnowboardBruin

Sie können laden, die Seiten innerhalb eines div zu wischen, der Effekt wäre immer noch derselbe wie der der Swipe-Funktion, anstelle der Warnung schreibe diesen Code $ ('# result'). Load ('page1.html'); – sree

Die Kätzchen müssen dich lieben ... – DGund

@sree mich gerade noch die meisten der Art und Weise, aber hier ist der Code, den ich

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

mit endete

... und ich heruntergeladen die jquery mobile kit und gehalten die CSS/JS-Dateien mit der gleichen Dateistruktur

Quelle

2012-05-07 01:04:24 SnowboardBruin

Ich habe https://github.com/caktux/swipy nur dafür gemacht. Ich würde gerne Feedback von anderen Entwicklern bekommen und vielleicht das Go-to-Plugin für "responsive Websites als Webapps" machen, wenn Interesse besteht.

Quelle

2013-10-13 02:54:50 caktux

Swipe zwischen Webseiten für eine Webapp

Antwort

Verwandte Themen