phonegap 3.5.0 和 jquery mobile 1.4.3

【问题标题】：phonegap 3.5.0 and jquery mobile 1.4.3phonegap 3.5.0 和 jquery mobile 1.4.3
【发布时间】：2014-07-30 20:44:50
【问题描述】：

在过去的几天里，我总是遇到 phonegap 和 jquery 的一些问题。我需要使用列表和过滤器以及用户详细信息链接来构建电话簿应用程序。所以我有几个问题。

    1234563我也在本地设备数据库中存储数据）。这是正确的方法吗？

  1. 之后，我想为用户详细信息制作一个新的 html 页面。一切都很顺利，直到我在这个新的 html 页面中添加了新的 javascript 文件。 Javascript没有工作，我不知道是什么原因。我什至制作了基本的 hello 页面，并包含了 js 文件和像 alert(hello); 这样的一行代码。在里面，仍然一无所有。像所有的 js 文件一样，只在 index.html 中加载，而不是在任何其他页面中。我的代码是（userdetail.js）：

    document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
    console.log("opening database");
    db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    console.log("database");
    //db.transaction(getUser, errorCB);     
    alert("hello");
}

    对于html页面：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,width=device-width" />
    <title>Hello</title>
</head>
<body>
<div id="userPage" data-role="page">    
    <div data-role="content">hallo
                <div id="userDetail"></div> 
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetail.js"></script> 

<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

    但仍然没有得到它的工作。比我决定的，好吧，我将使用 javascript 在一个页面中制作所有内容。我在这里错过了什么吗？我什至没有得到 console.log 信息。我正在用这部分重定向用户（链接是用 javascript 制作的，并附加到这部分的 index.html 页面）：

        <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
    <title>Hello World</title>
    </head>
    <body>
    <div id="userListPage1" data-role="page">   

    <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <!--
        <div id="custom-border-radius">
            <a href="#mypanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all ui-btn-left">No text</a>
        </div>
        -->
        <div data-role="navbar" data-iconpos="bottom">
            <ul>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="home" data-theme="a"></a></li>
                <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content" >
        <ul id="userList1" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Private</h1>
    </div>  


    <!--
    <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-corners="false" data-theme="b" data-overlay-theme="a">
            <ul data-role="listview">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li> 
            </ul>
        </div>
     -->


    </div>


    <div id="userListPage2" data-role="page">   



     <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <div data-role="navbar" data-iconpos="bottom" >
            <ul>
                <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#userListPage3" class="ui-nodisc-icon ui-alt-icon" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content">
        <ul id="userList2" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Companies</h1>
    </div>  


    </div>

    <div id="userListPage3" data-role="page">   



        <div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">

        <h1> </h1>
        <a href="#"  class="ui-btn ui-icon-recycle ui-btn-icon-notext ui-corner-all ui-btn-right"></a>

        <div data-role="navbar" data-iconpos="bottom" >
            <ul>
                <li><a href="#userListPage1" class="ui-nodisc-icon ui-alt-icon" data-icon="home" data-theme="a"></a></li>
                <li><a href="#userListPage2" class="ui-nodisc-icon ui-alt-icon" data-icon="shop" data-theme="a"></a></li>
                <li><a href="#" class="ui-btn-active ui-nodisc-icon ui-state-persist" data-icon="user" data-theme="a"></a></li>
            </ul>
        </div>

    </div>


    <div data-role="content">
        <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">

        </ul>   
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">

        <h1>Organisations</h1>
    </div>  


</div>



<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userlist.js"></script>

<script type="text/javascript">
    app.initialize();
</script>

</body>
</html>

    这是从上面生成userList1的js

    function querySuccess(tx, results) {
var len = results.rows.length;
console.log("TELEFONBOOK table: " + len + " rows found.");
$('#userList1 li').remove();
$('#userList2 li').remove();
$('#userList3 li').remove();
for (var i=0; i<len; i++){
    //append the users to userlist, show the data
    if(results.rows.item(i).typ == "p"){
        $('#userList1').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }else if(results.rows.item(i).typ == "f"){
        $('#userList2').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }else if(results.rows.item(i).typ == "o"){
        $('#userList3').append('<li><a href="user_details.html?id=' + results.rows.item(i).id + '"> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></a></li>');
    }


    console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
}
$('#userList1:visible').listview('refresh');
$('#userList2:visible').listview('refresh');
$('#userList3:visible').listview('refresh');
}

    这里是 user_details.html：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Hello</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetails.js"></script>
<script type="text/javascript">
    app.initialize();

</script>
</head>
<body>
<div id="userPage" data-role="page">    

    <div data-role="content">hallo
                <div id="fullName"></div> 
    </div>

    <div data-role="footer" data-theme="b" data-position="fixed">
        <h1>Privat</h1>
    </div>

   </div>
   </body>
   </html>

    这里是 userdetails.js

    var id = getUrlVars()["id"];

// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
    console.log("opening database");
    db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
    console.log("database");
    db.transaction(getUser, errorCB);       
    alert("hello");
}


// Query the database
//
function getUser(tx) {
    var sql = "SELECT * FROM TELEFONBOOK WHERE id=:id";
    tx.executeSql(sql, [id], getUserSuccess);
}

// Query the success callback
//
function getUserSuccess(tx, results) {
    var user = results.rows.item(0);

    $('#fullName').text(user.nachname + ' ' + user.vorname);
    alert("hallo");
}


// Transaction error callback
//
function errorCB(err) {
    alert("Error processing SQL: "+err);
}


//function to get the id value
function getUrlVars() {
alert("test");
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
    return vars;
}

  2. 在那之后，我的最后一个问题。我在 index.html 页面 listview 中做了这样的：

    <div data-role="content">
    <ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    </ul>   
</div>

    现在每次单击过滤器字段时都会遇到问题。我得到一个顶部边框和底部边框白线。例如（当我单击过滤器字段时，请注意两条红线之间的白线）：

我不知道在使用 phonegap 和 jquery mobile 遇到这么多问题时这是否正常。但任何帮助或建议都会有帮助。谢谢。

更新

2.经过艰苦的搜索和测试，我在这里找到了解决方案Pageshow not triggered after changepage

3.我已经设法找到了问题所在。在jquery mobile css中改变 ui-footer-fixed.ui-fixed-hidden to

ui-footer-fixed.ui-fixed-hidden{bottom:-1px;padding-bottom:1px}

标题也一样：

ui-header-fixed.ui-fixed-hidden{top:-1px;padding-top:1px}

【问题讨论】：

  • 嗨 enigmaticus，您能否为第二点添加详细信息：您是从索引页面导航到新页面吗？如何？在这种情况下，您可以添加您的索引页吗？
  • 我已经添加了信息，如果您需要更多信息，请告诉我
  • 抱歉，我仍然不明白您在页面之间的导航方面尝试了什么，如果有的话
  • 我的错，现在更清楚了。您可以添加完整的 index.html 文件以查看添加的脚本和所有内容。上个月我用JQM 1.4.2（用的是Cordova 3.3还是3.4，不记得了）做单页应用的时候，子页面只包含一个body，所有的脚本都是由索引页加载的
  • 编辑了帖子。现在我添加了完整的 index.html 页面

标签： javascript jquery html css cordova


【解决方案1】：

感谢您的编辑。对于第二点，这里有一些建议：

userdetail.js 中的代码只会在真实终端上触发，而不是在台式计算机上的浏览器上调试时触发，因为桌面浏览器不会引发deviceready 事件。如果你想模拟这部分，你应该替换

document.addEventListener("deviceready", onDeviceReady, false);

通过

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
        document.addEventListener("deviceready", onDeviceReady, false);
} else {
    onDeviceReady();
}

在您的userdetail.js 文件中。 （并根据需要更改匹配测试以添加windws phone userAgent ;-)

清理混乱：将所有脚本放在索引中head 的末尾：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
        <title>Hello World</title>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/userdetail.js"></script> 
        <script type="text/javascript" src="js/userlist.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </head>
    <body>
        ...
    </body>
</html>

使用此命令，您将获得 console.log 事件。不要忘记 userdetails.js 中使用的 localStorage 也不能在桌面浏览器上运行。

最后（但并非最不重要），要填充您的列表视图，您必须从某个地方调用您的 querySuccess 方法，我现在没有看到它。

更新：您还发现，您还可以在第二页 页面 div 内中添加脚本（参见 SO Pageshow not triggered after changepage）

【讨论】：

  • 非常感谢，我明天试试这个并给你反馈:) 并且 querySuccess 工作正常，所以我没有包含这部分代码
  • 和 应该包含在另一个专门为用户制作的页面（user_details.html）中细节。还是我在这里错过了什么？我知道这在桌面浏览器中不起作用，我只适用于 iOS、Android 和 Windows 手机
  • 从我之前对该主题的测试中，使用 jquery mobile/phonegap，我使用了单页应用程序架构并将我的脚本包含在索引中。事实上，在这种架构下，JQM 正在操作 DOM（正文部分）并保留调用的脚本，因此无需在子页面中再次添加它们
  • 我已经尝试过了，但它不起作用。 :(您是否知道当用户单击链接时如何从列表视图中获取包含用户详细信息或类似内容的新页面？现在我想将它与新的 html 页面一起使用，但显然 javascript 不起作用
  • 什么不起作用（因为您有几点，我需要更多信息）？你是如何测试的？对于您的第一次测试，您应该尝试在不使用 localStorage/database 的情况下实现联系人详细信息列表，首先处理导航，然后逐步添加功能。
猜你喜欢
  • 2013-03-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-19
  • 2011-09-12
  • 1970-01-01
  • 1970-01-01
  • 2012-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode