2012-05-02 14 views
7

मैं एक वेबपैप बनाना चाहता हूं (आईफोन, एंड्रॉइड, बीबी, आदि के लिए व्यक्तिगत रूप से प्रोग्राम से बचने के लिए) और एक स्वाइप प्रभाव की तलाश में हूं। क्या कोई HTML5 या वेबकिट कोड बस "अगले/पिछले पृष्ठ पर स्वाइप" कह रहा है? (मुझे पता है कि यह उससे अधिक विस्तार कोड होगा, लेकिन यह मेरी इच्छा का सारांश है)वेबपैस के लिए वेबपृष्ठों के बीच स्वाइप करें

उत्तर

6

आप वेब ब्राउज़र में पूरे पृष्ठ पर स्वाइप करने के लिए div का उपयोग नहीं कर सकते हैं, लेकिन आप केवल पेजों को लोड कर सकते हैं स्वाइप के बाद div को प्रभावित करें और पूरे पृष्ठ को स्वयं नहीं ले जाएं।

केवल क्रोम, सफारी में काम करता है।

यदि आप 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

+1

धन्यवाद @ श्री, यह आशाजनक लग रहा है, लेकिन क्या एक अलग HTML पृष्ठ पर div लिंक बनाने का कोई तरीका है? मैं वास्तव में एक HTML पृष्ठ में सभी सामग्री नहीं चाहता हूं, और पृष्ठों से स्वाइप करना पसंद करता हूं। तो मूल रूप से

Page1.html
Page2.html
Page3.html
सहायता के लिए फिर से धन्यवाद !! – SnowboardBruin

+0

आप एक div के भीतर पृष्ठों को स्वाइप करने पर लोड कर सकते हैं, प्रभाव अभी भी स्वाइप फीचर की तरह ही होगा, चेतावनी के बजाय इस कोड को $ ('# परिणाम') लिखें। लोड ('page1.html'); – sree

+1

बिल्ली के बच्चे आपको प्यार करना चाहिए ... – DGund

3

@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 डाउनलोड किया है और रखा उसी फ़ाइल संरचना के साथ सीएसएस/जेएस फाइलें

0

मैंने इसके लिए https://github.com/caktux/swipy बनाया। मैं अन्य देवताओं से फीडबैक प्राप्त करना चाहता हूं और यदि रुचि है तो शायद इसे "वेबएप के रूप में उत्तरदायी वेबसाइटों" के लिए प्लग-इन करें।

संबंधित मुद्दे