Triển khai khung nhìn Jquery trên ipad

Question

Gần đây tôi đã triển khai một ứng dụng web giống như ứng dụng web chạy trên ipad. Một hàm là tạo khung nhìn để kéo sách. Tôi đã sử dụng plugin khung nhìn này (có bản trình diễn): http://borbit.github.com/jquery.viewport/

Vấn đề là nội dung không thể kéo. Thao tác này hoàn toàn trên máy tính để bàn nhưng không phải là ipad. Có hai cấp độ của sách điện tử, cấp độ thấp là một trang sách. khi người dùng nhấp vào cuốn sách, lớp phủ (cấp cao nhất) hiển thị và đó là div lớn hơn để kéo. Tôi nghi ngờ ipad không thể nhanh chóng tăng cấp div. Có cách nào để thực hiện các viewport (tham khảo ví dụ ở trên liên kết) trong ipad? Cảm ơn

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

Answer 1

Tôi nghĩ rằng điều này có thể dễ dàng được giải quyết bằng jQuery UI Touch Punch, plugin này thêm hỗ trợ sự kiện chạm cho jQuery UI.

http://touchpunch.furf.com/

Hãy thử thêm các kịch bản trước khi kịch bản viewport nhưng sau khi kịch bản giao diện người dùng, ví dụ:

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

và đó là tất cả!