Fatal编程技术网
  • android/
  • 在phonegap android中缩放内容（angularjs注入）

在phonegap android中缩放内容（angularjs注入）

android css angularjs cordova

在phonegap android中缩放内容（angularjs注入）,android,css,angularjs,cordova,phonegap-plugins,Android,Css,Angularjs,Cordova,Phonegap Plugins,我对Phonegap很陌生。我正在开发一个应用程序，用于显示来自web的一些文本内容和图片。我想为apponly内容添加一个缩放选项。启用收缩缩放时，它会缩放整个WebView，包括操作/标题栏。我只想缩放内容部分。我用了IScroll，但不能工作。请帮帮我 我在下面给出我的代码。如果有任何问题，请告诉我 <!DOCTYPE html> <html ng-app="nakApp"> <head> <meta charset

我对Phonegap很陌生。我正在开发一个应用程序，用于显示来自web的一些文本内容和图片。我想为apponly内容添加一个缩放选项。启用收缩缩放时，它会缩放整个WebView，包括操作/标题栏。我只想缩放内容部分。我用了IScroll，但不能工作。请帮帮我

我在下面给出我的代码。如果有任何问题，请告诉我

    <!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>
www/app/templates上还有另一个文件。data-content.htmlAssuming表示它是数据显示的模板。我给出下面的代码

<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>
如果我没弄错的话，你想要的是有一个div，它的大小在缩放时不会改变，对吗

主旨

您只需制作一个固定大小的div容器，其中包含另一个div内容，该内容也包含实际内容。容器的大小始终相同，只有content div根据其内容更改大小。容器可以处理它想要的任何溢出，例如当内容太宽或太长或太隐藏时自动显示滚动条

范例

我让你玩的。请注意，悬停效果仅用于更紧凑的示例。另外，我不是一个CSS大师，所以可能还有一些小问题。此外，对于实际使用该代码，考虑添加-WebKIT变换、-MOZ变换、-O变换和-MS转换，使其在所有可能的浏览器上工作。 如何缩放

至于“如何缩放”按钮或“谷歌地图”风格的缩放按钮，主要取决于你想用它做什么。例如，如果您更喜欢捏手手势，请查看。在我的例子中，它最容易用hover显示。我认为您无论如何都需要使用JavaScript来进行缩放，因为您无法在CSS上设置缩放级别的多个值

应用于您的实际代码

如果您添加到原始问题中的代码是您的模板，并且如果div with list data language类就是您希望缩放的类，那么您的代码应该如下所示

<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>
如您所见，我添加了一个id为的div容器，并使用类列表数据语言将id内容添加到for div中

感谢您的快速回复。事实上，我是第一次做PhoneGap。实际上，我正在编辑我以前的员工编写的代码。我明白你的意思。但我有两个问题。1.它通过注入Java脚本来显示内容，就像我给出的代码一样。我不知道在哪里可以为内容添加div实际上我不知道哪个JS提供了内容。有这么多的JS文件。2.我现在正在为Android编写这段代码，稍后它也需要用于iPhone。@dev.adarsh：第二点是什么，在这种情况下，无论您是为Android还是iOS甚至是Windows Phone 8编写代码，都无关紧要。您必须了解所使用的代码完全相同，并且适用于Cordova PhoneGap支持的所有设备。我可以稍后再回答第一个问题，我现在很忙，解释这些问题需要时间，对不起，伙计谢谢你。我可以等。@dev.adarsh：抱歉让你等这么久。在仔细考虑之后，我无法用这些知识回答问题1。我需要查看您所有文件的确切内容等。如果您能提供这些，我可能能够为您指出正确的方向。即使我可以，你也可能需要熟悉AngularJS。如前所述，不要担心Cordova部分，因为它就像一个浏览器，具有一些额外的、很酷的功能，如摄像头等。这对sanfor来说没问题。www/app/templates上还有另一个文件。data-content.html。我正在用这个文件更新我的问题。 
#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%); 
}

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