小编Gaj*_*res的帖子

在我的phonegap/jquery移动应用程序中,使用了多页面模型.index.html拥有我的应用程序的所有页面,到目前为止6页.如果这个应用程序增长太多而且在单个html文件中变成了19页,那会不会很糟糕？我创建了其他应用程序来测试并使用一个html文件到每个页面.但看起来每次更改页面时,整个DOM都会再次加载,是吗？

请告诉我哪个结构更适合大型应用

我目前正在开发一个新的项目来实现移动应用程序.客户没有决定,我建议几个解决方案.需要与Android(版本2.2+)的兼容性,iOS和其他操作系统可能会很好.我们只能为Android开发,但我想使用Web移动框架.

由于我从未使用它们,我开始寻找现有的解决方案.我听说过PhoneGap,Titanium,Sencha Touch和jQuery Mobile.

以下是我发现的可能性:

• PhoneGap + Sencha Touch
• PhoneGap + jQuery Mobile(或同等产品)
• Sencha Touch(API + UI)
• 钛

应用程序中的关键点是允许用户拍摄照片并对其进行编辑:调整大小,添加一些文本......在Android上,技术上可行,但我不知道使用的是移动框架.

以PhoneGap和jQuery Mobile为例,它可以做到吗？我找到了每个功能的部分代码,但没有一个非常完整,并且不确定它是否会在很多手机上兼容.对于开发时间,或许更好的做2个本地应用程序而不是尝试使用移动框架(并在Javascript中开发图片版本)？

我发现每个框架都有很多意见,但其中有一些是在一年多的时间内发布的,而且他们很难对所有解决方案有清晰的认识.

所以我想知道我是否可以用这些解决方案之一实现这个图片版本,这可能是最好的.

谢谢您的帮助

我有一个PhoneGap应用程序,它使用JQuery mobile在页面之间导航.

当我从主页面导航到包含Google地图的页面时,地图左上角一次只显示一个图块,如下所示:

这可能是什么原因？

**

源代码: 以下脚本位于我的页面的头部

<script>
            $(document).on("pageinit", "#stores", function () {
                var centerLocation = new google.maps.LatLng('57.77828', '14.17200');

        var myOptions = {
            center: centerLocation,
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            callback: function () { alert('callback'); }
        };

        map_element = document.getElementById("map_canvas");




        map = new google.maps.Map(map_element, myOptions);

        var mapwidth = $(window).width();
        var mapheight = $(window).height();
        $("#map_canvas").height(mapheight);
        $("#map_canvas").width(mapwidth);
        google.maps.event.trigger(map, 'resize');

            });
        </script>

我的页面是这样的

<!-- Home -->
        <div data-role="page" id="home">
.
.
.
</div>

<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>

我从家里导航到地图页面,如下所示:

<a href="#stores">Stores</a>

应用Gajotres解决方案后 …

当我将所有Web文件(html,JS,CSS ...)复制到项目的www文件夹中时,我的Android PhoneGap应用程序可以正常工作,并使用这些文件编译应用程序.但是,当我不复制它们,并重定向到包含这些文件的Web服务器时(即在WWW文件夹中只有一个文件:index.html重定向到我的服务器)phonegap在应用程序中不再起作用.

当应用程序内容文件由远程服务器提供而不是使用应用程序编译时,有没有办法让phonegap工作？

我必须为应用程序快速构建原型,并且我想知道插入各种应用程序逻辑的确切位置.

您可以在使用PhoneGap和jQueryMobile时迭代它们触发的事件和顺序吗？

很清楚地了解事件/顺序:

• 答:第一次打开应用程序时.
• B:当你改变页面时(我想不再有一些事件).
• C:当您"最小化"应用程序时(例如:当您点击应用程序中的链接时,您将进入短信/呼叫,或者您只需按设备的主页按钮).
• D:当您恢复应用程序时(例如:点击"后退"按钮,或者只是
  以某种方式"最大化").

我正在使用HTML5,CSS3,jQuery Mobile,jQuery UI,ASP.NET,C#和一些jQuery插件为调查创建这个简单的移动网页.其中一个要求是显示弹出/对话框(javascript警报或jQuery移动对话框,如果是jQuery UI对话框,则更好),只要设备没有互联网连接(特别是Android),就会通知用户.目前我有这个代码:

<link rel="stylesheet" href="../Scripts/jqueryui/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="../Scripts/jquery.mobile-1.1.0.css" />
<script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
    var online = window.navigator.onLine;
    if (!online) {
        alert('Please check your internet connection and try again.');
    }
    function checkInternet() {
        var online = window.navigator.onLine;
        if (!online) {
            alert('Please check your internet connection and try again.');
        }
    }
</script>

然后我把JavaScript函数放在表单的onsubmit事件上:

<form id="frmSurvey" runat="server" class="validate" onsubmit="checkInternet()">

当我在台式机/ PC浏览器上查看但它根本无法在移动设备上运行时,它正在工作.jQuery Mobile错误加载页面.

因为,这不是我调整jQuery Mobile文件的要求,注释了错误加载页面消息部分,它不再出现了.我已经尝试过谷歌搜索任何相关主题,但没有找到任何相关主题.

我真的很难让这成为可能.请帮帮我们! …

我搜索了很多文章,Sencha Touch and Phonegap但which framework is the better to integrate在开发我的Android应用程序时我无法判断.甚至我有很多不同的东西,Sencha Touch and Phonegap但它还不足以认识到哪个是更好的框架使用.
所以任何一个人都知道哪个好用.Sencha Touch OR Phonegap

对这些方法的使用感到困惑.我知道在初始化期间会调用pageinit,但是在页面呈现期间每次都会调用pageshow.

我有一个主页,使用$ .ajax()为某些部分加载数据.我在pageinit中加载数据.我也只在pageinit中绑定点击和滑动事件.而且,我也注意到当你从另一个页面回来时没有调用pageinit.

还有一个问题,我们使用swipe.js使用轮播.使用pageinit方法时,它无法正确加载.但是,在pageshow方法中加载时工作正常.当我们使用浏览器后退按钮时,可能会调用pageinit的原因是什么.

此外,在确定加载数据,绑定事件等逻辑的位置时,缓存是否有任何作用.最好是有人可以解释说加载主页数据,然后导航并从另一个页面返回.

我的索引页面上有一个非常简单的用例.

        <script src="js/jquery-min.js"></script>
        <script src="js/jquery-mobile.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>

         <script>
                 $("body").on("swipeleft", function(event) {
                alert('hello');
                /*window.location.href = "html/first.html";*/             
            });
       </script> 

由于某种原因,这个事件发射了2次.现在我确定我没有在body标签上绑定另一个事件,因为这是第一页.我尝试过其他简单的事件,比如touchstart等.他们都开了两次.我究竟做错了什么 ？

更新: -

我已经按照以下方式修改了我标记为正确的答案,并且它有效.此页面上的事件未触发两次.

<head>
      <script type="text/javascript" src="js/jquery-min.js"></script>
            <script>
                 $(document).bind("mobileinit", function() {
                       $.mobile.autoInitializePage = false;
                       $.mobile.defaultPageTransition = 'none';
                       $.mobile.touchOverflowEnabled = false;
                       $.mobile.defaultDialogTransition = 'none';
                       $.mobile.loadingMessage = '' ;                 
                  });
            </script>
            <script type="text/javascript" src="js/jquery-mobile.js"></script>
            <script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>

我正在使用Jquery Mobile在dreamviewer中制作基本的"新闻"应用程序.

我做了所有的设计,但现在是时候把我的api服务器上的Json数据放到我的应用程序中了.

这是我的api服务器链接; fe"http:/ mywebapiurl"

我想我需要编写关于getJson的Jquery函数,但我不知道如何制作它？

我将如何通过小文章图片,发表文章和文章头条将其放入我的列表视图中？

这是我的列表视图的示例,我将展示来自Json的新闻.

<body> 
<div data-role="page" id="home">
<div data-role="header">
    <h1>Post Mobile</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" data-inset="true">
                     <li><a href="#headline">
         <img src=ArticlePicture" class="ui-li-has-thumb"/>
         <h3>ArticleTitle</h3>
         <p>ArticleHeadline</p>
                     </a></li>
                </ul>       
</div>
      <div data-role="footer"  data-position="fixed">
      <h4>&copy; funky app </h4>
</div>

这是我试过的代码示例;

    <script>
  $(document).ready(function() {
   $.getJSON("http://mywebapiurl", function(data) {
      var result= "";
      $.each(data.LatestNews, function(index, value) {
result+= "<ul><li><a href='#'><h3>"+value.TITLE+"</h3><p>"+value.SPOT+"</p></a></li></ul>"; 
});
    $("#articleContainer").html(result);
})
});
</script>

等你的回答.

非常感谢你.