1

複数ページのテンプレートを使用して Android アプリを作成しました。ホームページの Zoeken ボタンを押すと、ページ 1 (id = Zoeken) に移動します。そのページで、ボタン (id = zoek) を押すと、アプリは android_asset/www/index.html#win2 (ページ 2) ではなく、次の URL android_asset/www/Zoeken/# に移動します。

ページ 1 の id を変更すると、フォルダ名も変更されます

ID Zoeken がフォルダ名になっているのはなぜですか?

索引.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>
4

1 に答える 1

0

異なるjQueryおよびjQueryモバイルファイルを追加するbijの問題を解決しました。ここにあるファイルを使用しています。

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

オフラインで使用するためにそれらをコピーして貼り付けましたが、今では魅力的に機能しています。

于 2013-11-08T09:47:22.653 に答える