缩放内容（由angularjs注入）在phonegap android [英] Zooming content(injected by angularjs) in phonegap android
问题描述
我是Phonegap的新手。我正在开发一个应用程序来显示一些文本内容（有时是图像）从网站。我想为应用程序添加缩放选项（仅适用于内容）。当我启用双指缩放时，它会缩放整个网页视图（包括操作/标题栏）。我只想放大内容部分。我使用IScroll，但不能工作。请帮助我。
我在下面提供我的代码。
<！DOCTYPE html>
< html ng-app =nakApp>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< title> Daivadasakam< / title>
< meta name =descriptioncontent =>
< link rel =stylesheethref =assets / app.css/>
< script src =cordova.js>< / script>
< script src =cordova_plugins.js>< / script>
< meta name =viewportcontent =width = device-width，initial-scale = 1 user-scalable = yes>
< / head>
< body>
< div ui-view>< / div>
<！ - injector：js - >
< script src =vendor / jquery.js>< / script>
< script src =vendor / angular.js>< / script>
< script src =vendor / angular-ui-router.js>< / script>
< script src =app / app.js>< / script>
< script src =app / controllers / home.js>< / script>
< script src =app / services / servive.js>< / script>
< script src =app / router.js>< / script>
< script src =app / filters / interpolate.js>< / script>
< script src =app / directives / directives.js>< / script>
< script src =app / controllers / language-selector.js>< / script>
< script src =app / config-generated.js>< / script>
< script src =app / controllers / data-content.js>< / script>
<！ - endinjector - >
< / body>
< / html>
www / app / templates上还有另一个文件。 data-content.html（假设它是数据显示的模板）。我给下面的代码
< div class =continter>
< div ng-include =src ='app / templates / header.html'>< / div>
< div class =list-data-language>
< div class =title> {{vModel.title}}< / div>
< div class =contentng-bind-html =vModel.content>< / div>
< div ng-show =vModel.isAudioclass =list-itemng-click =vEvents.playAudio（vModel.audio_url）>
< label>播放音频< / label>
< / div>
< div ng-show =vModel.isVideoclass =list-itemng-click =vEvents.playAudio（vModel.video_url）>
< label>播放视频< / label>
< / div>
< / div>
< / div>
< div class =loaderng-show ='vModel.isLoaderOn'>< / div>
如果我正确理解你，有一个 div 的大小不会改变，当应用缩放时，对不对？
主要想法
/ em>（ #contain ），其中包含另一个包含实际内容的 （ #content 容器总是相同的大小，只有内容div基于其内容更改大小。容器可以处理想要的溢出，例如 auto （当过宽或过长的内容时显示滚动条）或隐藏。 < div id =container>
< div id =content>
<！ - 内容在这里 - >
< / div>
< / div>
然后在放大时对内容应用CSS3 transform 。例如，当鼠标悬停内容时，应用变换，但是对于您的情况，请在代码下面看到我的注释。在此示例中，当悬停时基本上做的是缩放部分（缩放变换），其中因子为2，然后将其移动（平移变换）角。
#container {
width：600px;
height：600px;
top：100px;
left：100px;
position：absolute;
overflow：auto; //或隐藏或滚动或您喜欢的内容
}
#content {
width：100％;
height：100％;
padding：0;
margin：0;
background-color：gray;
}
#content：hover {
transform：scale（2）translate（25％，25％）;
}
示例
我为 JSFiddle 玩了。请注意，悬停效果仅用于示例更紧凑。另外，我不是一个CSS大师，所以可能还有一些小问题。此外，对于实际使用该代码，请考虑添加 -webkit-transform ， -moz-transform ， -o-transform 和
b $ b
关于缩放（夹点或
应用于你的实际代码
如果您添加到原始问题的代码是您的模板，并如果div与 list-data-language 类是你想要的缩放类，你的代码应该看起来像这样
< div class =continter>
< div ng-include =src ='app / templates / header.html'>< / div>
< div id =container>
< div id =contentclass =list-data-language>
< div class =title> {{vModel.title}}< / div>
< div class =contentng-bind-html =vModel.content>< / div>
< div ng-show =vModel.isAudioclass =list-itemng-click =vEvents.playAudio（vModel.audio_url）>
< label>播放音频< / label>
< / div>
< div ng-show =vModel.isVideoclass =list-itemng-click =vEvents.playAudio（vModel.video_url）>
< label>播放视频< / label>
< / div>
< / div>
< / div>
< / div>
< div class =loaderng-show ='vModel.isLoaderOn'>< / div>
正如你看到的，我添加了一个 div 的 标签
I am very new to Phonegap. I am developing an app for display some text contents(some times images) from web. I want to add a zooming option to the app(only for content). When I am enabling pinch zoom, it zooms the entire webview(including the action/title bar). I want to zoom only the content part. I used IScroll, but couldn't work. Please help me.
I am giving my code below. If any problem, please let me know.
<!DOCTYPE html>
<html ng-app="nakApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Daivadasakam</title>
<meta name="description" content="">
<link rel="stylesheet" href="assets/app.css"/>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">
</head>
<body>
<div ui-view></div>
<!-- injector:js -->
<script src="vendor/jquery.js"></script>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home.js"></script>
<script src="app/services/servive.js"></script>
<script src="app/router.js"></script>
<script src="app/filters/interpolate.js"></script>
<script src="app/directives/directives.js"></script>
<script src="app/controllers/language-selector.js"></script>
<script src="app/config-generated.js"></script>
<script src="app/controllers/data-content.js"></script>
<!-- endinjector -->
</body>
</html>
There is another file on www/app/templates. data-content.html(Assuming that it is the template for data display). I am giving the code below
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
If I understood you correctly, what you want is to have a div that's size doesn't change when the zoom is applied on it, right?
Main idea
You simply make fixed-size div (#container) that contains another div (#content) which again contains the actual content. The container is always the same size, only the content div changes size based on it's content. The container can handle the overflow anyway it wants such as auto (show scroll bar when too wide or long content) or hidden.
<div id="container">
<div id="content">
<!-- Content here -->
</div>
</div>
Then apply CSS3 transform on the content when zoomed. For example's sake the transforms are applied on when hovering the content but for your case see my comments below the code. What is basically done when hovering is the zooming part (scale transformation) with factor of 2 in this example and then it is moved (translate transformation) to start from top-left corner.
#container {
width: 600px;
height: 600px;
top: 100px;
left: 100px;
position: absolute;
overflow: auto; // Or hide or scroll or what you prefer
}
#content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: gray;
}
#content:hover {
transform: scale(2) translate(25%, 25%);
}
Example
I made JSFiddle for you to play with it. Please note that the hover effect is used only for the example to be more compact. Also I am not much of a CSS guru so there probably is still some minor problems. Also for actually using that code, consider adding the -webkit-transform, -moz-transform, -o-transform and -ms-transform to make it work on all possible browsers.
How to zoom
What comes to the how to zoom (pinch or Google Maps style zoom buttons), it mostly just depends what you want to do with this. For example if you prefer the pinch hand gesture, look into this. On my example it was most easily showed with hover. I think you need to anyway use JavaScript to make the zooming since you cannot set the multiple values for zoom level on CSS.
Apply on your actual code
In case that the code added by you to your original question is your template, and if the div with list-data-language class is for example the one that you want to be zoomable, your code should look something like this
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div id="container">
<div id="content" class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
As you can see I added one div with id container and added id content to for div with class list-data-language.
这篇关于缩放内容（由angularjs注入）在phonegap android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
