2012-12-19 7 views
10

Niedawno zaimplementowałem aplikację internetową typu ebook, która działa na ipad. Jedną z funkcji jest utworzenie rzutni do przeciągnięcia książki. Użyłem tej wtyczki przeglądarki (z wersją demonstracyjną): http://borbit.github.com/jquery.viewport/Implementacja widoku Jquery na iPadzie

Problem polega na tym, że zawartość nie może się przeciągnąć. Działa idealnie na komputerach stacjonarnych, ale nie na iPadzie. Istnieją dwa poziomy ebooka, niski poziom to strona książki. gdy użytkownik kliknie książkę, wyświetlana jest nakładka (najwyższy poziom) i jest to większy div dla przeciągania. Podejrzewam, że ipad nie może przełączyć poziomu wyższego poziomu. Czy istnieje sposób implementacji rzutni (zobacz przykład w powyższym linku) w ipad? Dzięki

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

Odpowiedz

3

myślę, że można to łatwo rozwiązać za pomocą jQuery UI dotykowego punch, ten plugin dodaje wsparcie dotykowego zdarzeń dla jQuery UI.

http://touchpunch.furf.com/

spróbuj dodać skrypt przed skryptem rzutni ale po skrypcie UI, na przykład:

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

i to wszystko!