如何使用jQuery Mobile的增加捏/变焦行为？ [英] How to add pinch/zoom behavior using jQuery Mobile?
问题描述
我需要创建一个使用jQuery Mobile的移动应用程序。我不明白如何实现捏缩放为显示在应用程序的图像。
I need to create a Mobile Application using jquery Mobile. I don't understand how to implement pinch-zooming for an image that is displayed in the app.
推荐答案
有没有办法使用jQuery Mobile的这个特殊的原因？需要使用它来实现您的应用程序UI 的使用它来构建你的UI并不意味着这种行为的事实。
Is there a particular reason to use jQuery Mobile for this? The fact your application UI uses it to build your UI does not mean this behavior needs to be implemented using it.
的其他选项，如下面的jQuery插件。请注意，默认情况下，工作灯的应用程序使用jQuery反正。所以你中途在那里。
The are other options, like the below jQuery plug-in. Note that a Worklight application by default uses jQuery anyway. So you're "half-way" there.
我已经成功地使用的Panzoom的jQuery插件以放大，在使用缩放手势的iOS的图像。结果
该插件有许多选项，所以有一个学习曲线，但它工作得很好。
I've successfully used the Panzoom jQuery plug-in to zoom-in an image in iOS using a pinch gesture.
The plug-in has many options so there is a learning curve, but it works well.
从网站：
Panzoom包括触摸手势支持，甚至支持捏
手势缩放。它非常适合于移动和
桌面浏览器。你会如何好这个执行你感到惊讶
移动设备。
Panzoom includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You'll be amazed at how well this performs on your mobile device.
iOS和Android的支持。
iOS and Android are supported.
作为一个非常基本的测试（添加选项将被要求作为决策所需的捏缩放工作），我这样做：
As a very basic test (adding options will be required to making the pinch scaling work as desired), I did this:
在常见的\\ index.html的：
In common\index.html:
...
<head>
...
<script src="js/jquery.panzoom.min.js"></script>
</head>
<body>
<div class="panzoom-elements">
<img src="http://img2.wikia.nocookie.net/__cb20130627213136/halonocanon/es/images/2/2e/Halo_Wars_Spartan.png"/>
</div>
...
...
</body>
在共同\\ JS \\ main.js：
In common\js\main.js:
function wlCommonInit(){
$(".panzoom-elements").panzoom({ });
}
此外，你需要的选项打得到你要寻找的缩放体验。
Again, you'll need to play with the options to get the zooming experience you're looking for.
这篇关于如何使用jQuery Mobile的增加捏/变焦行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
