2012-05-02 42 views
7

Tôi muốn tạo webapp (để tránh phải lập trình riêng cho iPhone, Android, BB, v.v.) và đang tìm kiếm hiệu ứng vuốt. Có mã HTML5 hoặc webkit đơn giản chỉ cần nói "vuốt đến trang tiếp theo/trang trước" không? (Tôi biết nó sẽ là mã chi tiết hơn thế, nhưng đó là ý chính của những gì tôi muốn)Trượt giữa các trang web cho webapp

Trả lời

6

bạn có thể sử dụng div để vuốt xung quanh nhưng không phải toàn bộ trang trong trình duyệt web.i, e bạn chỉ có thể tải các trang trong một div sau khi vuốt ảnh hưởng và không di chuyển toàn bộ trang.

chỉ hoạt động bằng chrome, safari.

đây là mã nếu bạn sử dụng điện thoại di động 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(); 
}); 

tham khảo thêm ở đây swipe detection

+1

Cảm ơn @sree, điều này có vẻ đầy hứa hẹn, nhưng có cách nào để tạo liên kết div đến một trang HTML khác không? Tôi không thực sự muốn có tất cả nội dung trong một trang HTML và thích vuốt từ các trang. Vì vậy, về cơ bản

Page1.html
Page2.html
Page3.html
Cảm ơn bạn đã giúp đỡ !! – SnowboardBruin

+0

bạn có thể tải trên swipe các trang trong một div, hiệu ứng sẽ vẫn giống như tính năng vuốt, thay vì cảnh báo viết mã này $ ('# result'). Load ('page1.html'); – sree

+1

Mèo con phải yêu bạn ... – DGund

3

@sree đã cho tôi hầu hết con đường đó, nhưng đây là đoạn code tôi đã kết thúc bằng

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

... và tôi đã tải về jquery mobile kit và giữ các tệp CSS/JS có cùng cấu trúc tệp

0

Tôi đã thực hiện https://github.com/caktux/swipy chỉ dành cho việc này. Tôi muốn nhận phản hồi từ các nhà phát triển khác và có thể biến nó thành plugin đi cho "trang web đáp ứng dưới dạng ứng dụng web" nếu có sự quan tâm.

Các vấn đề liên quan