Jquery移动页面ID变为文件夹名称

时间:2013-11-01 16:44:54

标签: jquery-mobile

我制作了一个带有多页模板的Android应用程序。当我按下主页上的Zoeken按钮时,我转到第1页(id = Zoeken)。在那个页面上,当我按下按钮(id = zoek)时,应用程序转到以下url android_asset / www / Zoeken /#而不是去android_asset / www / index.html#win2(页面2)

当我更改第1页的ID时,foldername也会改变

为什么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>

1 个答案:

答案 0 :(得分:0)

我解决了bij添加不同的jQuery和jQuery移动文件的问题。 我现在正在使用您可以在此处找到的文件:

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

我复制并粘贴了它们,供离线使用,现在它就像魅力一样。