在網頁之間滑動瀏覽webapp

我想創建一個web應用程序（避免單獨爲iPhone，Android，BB等進行編程）並尋找滑動效果。是否有HTML5或Webkit代碼簡單地說「刷到下一頁/上一頁」？（我知道這將是更多的細節代碼比，但這是我想要的東西的要點）在網頁之間滑動瀏覽webapp

來源

2012-05-02 SnowboardBruin

你可以使用div來瀏覽網頁，但不是整個網頁在瀏覽器。我只能加載頁面刷卡後的div影響，而不是整個頁面本身。

只適用於鉻，safari。

這裏是一個代碼，如果你使用jQuery的手機。

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

多參考這裏 swipe detection

來源

2012-05-02 14:10:35 sree

謝謝@sree，這看起來很有希望，但有沒有辦法讓一個div鏈接到不同的HTML頁面？我並不想在一個HTML頁面中擁有所有的內容，而更喜歡從頁面上滑動。所以基本上

Page1.html

Page2.html

Page3.html

再次感謝您的幫助！ – SnowboardBruin

你可以加載一個div內的頁面，但效果仍然和swipe功能一樣，而不是alert這個代碼$（'＃result'）。load（'page1.html'）; – sree

小貓一定愛你... – DGund

@sree了我大部分的方式存在，但這裏的使用

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

我最終的代碼...我下載了jquery mobile kit並保持具有相同文件結構的CSS/JS文件

來源

2012-05-07 01:04:24 SnowboardBruin

我只爲此製作了https://github.com/caktux/swipy。我希望從其他開發者處獲得反饋，並且如果有興趣，可以將它作爲「響應式網站作爲web應用」的首選插件。

來源

2013-10-13 02:54:50 caktux

在網頁之間滑動瀏覽webapp

回答

相關問題