2012-12-19 16 views
10

पर Jquery व्यूपोर्ट लागू करें हाल ही में मैंने आईपैड पर फ़ंक्शन वेब ऐप चलाने जैसी ईबुक लागू की है। एक समारोह पुस्तक को खींचने के लिए व्यूपोर्ट बनाना है। मैंने इस व्यूपोर्ट प्लगइन का उपयोग किया (डेमो के साथ): http://borbit.github.com/jquery.viewport/आईपैड

समस्या यह है कि सामग्री खींच नहीं सकती है। यह पूरी तरह डेस्कटॉप पर काम करता है लेकिन आईपैड नहीं। ईबुक के दो स्तर हैं, निम्न स्तर एक पुस्तक पृष्ठ है। जब उपयोगकर्ता पुस्तक पर क्लिक करता है, तो ओवरले (शीर्ष स्तर) प्रदर्शित होता है और यह खींचने के लिए एक बड़ा div है। मुझे संदेह है कि आईपैड उच्च स्तरीय div को तेज़ नहीं कर सकता है। आईपैड में व्यूपोर्ट को लागू करने का कोई तरीका है (ऊपर दिए गए लिंक में उदाहरण देखें)? धन्यवाद

<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;"> 
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;"> 
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;"> 
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg"> 
</div> 
</div> 
</div> 
</div> 

उत्तर

3

मुझे लगता है कि यह आसानी से किया जा सकता है jQuery यूआई टच पंच का उपयोग कर हल किया, इस प्लगइन jQuery यूआई के लिए स्पर्श घटना समर्थन जोड़ता है।

http://touchpunch.furf.com/

उदाहरण के लिए, व्यूपोर्ट स्क्रिप्ट से पहले न तो UI लिपि के बाद स्क्रिप्ट जोड़ने का प्रयास करें:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script> 
<script type="text/javascript" src="jquery.viewport.js"></script> 
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script> 

और बस!