2013-11-01 105 views
1

我做了一个多页面模板的android应用程序。当我按下主页上的Zoeken按钮时,我会转到第1页(id = Zoeken)。在该页面上,当我按下按钮(id = zoek)时,应用程序会转到以下url android_asset/www/Zoeken /#而不是去android_asset/www/index.html#win2(第2页)jquery手机页面ID变成文件夹名称

当我更改页面1的ID时,文件夹名称也发生变化

为什么ID Zoeken变成文件夹名称?

的Index.html

<!DOCTYPE HTML> 
<html> 
<head> 
<title>PhoneGap</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="cordova.js"></script> 
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
<script src="jquery-1.4.3.min.js"></script> 
<script src="jquery.mobile-1.0a1.min.js"></script> 
<script type="text/javascript" src="SQLitePlugin.js"></script> 
</head> 
<body> 

<!-- home --> 
<div data-role="page" data-theme="e" id="home"> 

    <div data-role="content"> 
    <img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo"> 
    <ul data-role="listview" data-inset="true"> 
     <li><a href="#Zoeken" data-transition="slideup">Zoeken</a></li> 
     <li><a href="#AtotZ" data-transition="slideup">A tot Z</a></li> 
     <li><a href="#Info" data-transition="slideup">Info</a></li> 
    </ul> 
    </div> 

</div> 

<!-- Page 1 --> 

<div data-role="page" data-theme="e" id="Zoeken"> 

    <div data-role="header" data-position="inline"> 
    <h1>Zoeken </h1> 
    </div> 

    <div data-role="content"> <p>Welk woord wil je zoeken?</p> 
    <label for="search-basic">Vlaams woord</label> 
    <input type="search" name="search" id="search-basic" value="" /> 
    <a href="#" data-role="button" id="zoek"> Zoek </a> 
    </div>  


</div> 

<!-- Page 2 --> 

<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e"> 

    <div data-role="header"> 

    <h1>Zoekresultaten</h1> 

    </div> 


    <div data-role="content"> 

    </div> 

</div> 



</body> 
</html> 

<script> 

// Wait for Cordova to load 
document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady() { 

var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535); 



$("#zoek").bind ("click", function (event) 

{ 

    db.transaction (function (transaction) 

    { 

    var search = $("#search-basic").val(); 

    var sql = "SELECT * from wablief WHERE woord LIKE ?"; 

    transaction.executeSql (sql, ["%"+search+"%"], 

    function (transaction, result) 

    { 

     var html = "<ul>"; 

     if (result.rows.length) 

     { 

     for (var i = 0; i < result.rows.length; i++) 

     { 

      var row = result.rows.item (i); 

      var woord = row.woord; 

      var woord2 = row.woord2; 

      var vertaling = row.vertaling; 

      html += "<li>" + woord + "&nbsp;" + woord2 + "<br><br>" + vertaling + "</li>"; 

     } 

     } 

     else 

     { 

     html += "<li> Geen resultaten </li>"; 

     } 

     html += "</ul>"; 

     $("#win2").unbind().bind ("pagebeforeshow", function() 

     { 

     var $content = $("#win2 div:jqmData(role=content)"); 

     $content.html (html); 

     var $ul = $content.find ("ul"); 

     $ul.listview(); 

     }); 

     $.mobile.changePage ($("#win2")); 

    }, error); 

    }); 

}); 

function error (transaction, err) 

{ 

    alert ("DB error : " + err.message); 

    return false; 

} 

} 
</script> 

回答

0

我解决了问题BIJ加入不同的jQuery和jQuery Mobile文件。 我现在使用的文件,你可以在这里找到:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

我复制并粘贴它们,使用离线,现在它的工作就像一个魅力。