为什么我的代码可以在chrome上工作,而不是一次使用cordova编译

why my code does work on chrome and not once compile using cordova

本文关键字:一次 编译 cordova 代码 我的 chrome 工作 为什么      更新时间:2023-09-26

我正在使用cordova/eclipse/kendo-ui进行一个项目,我正在经历一个奇怪的行为。。。

我开发了一个测试样本给你看。。

当我尝试在googlechrome上运行这个示例时,它确实有效,但一旦在我的手机上编译并运行(顺便说一句,这是一个nexus4,即使我认为这并不重要…),它就不起作用了。。。

在这个例子中,我们有一些简单的东西,一个有三个项目的菜单和一个视图,根据你点击的按钮不同。

在谷歌chrome上,它是有效的,我的意思是,当我点击第一个按钮时,它会显示"第一个",第二个也一样,以此类推。。

当我用eclipse编译项目并在手机上运行时,无论我点击了什么按钮,消息都是一样的。。

这是我的代码示例:

html:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<!-- Librairies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/kendo.all.min.js"></script>
<!-- Fonction d'init -->
<script src="init/cordovaInit.js"></script>
<!-- Controleurs -->
<script src="controlers/panelControler.js"></script>
<!-- EndScript -->
</head>
<body onload="onBodyLoad()">
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
<div id="search">
     <div id="first">
      <p>first</p>
    </div>
    <div id="second">
      <p>second</p>
    </div>
    <div id="third">
      <p>third</p>
    </div>
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
<ul data-role="listview" data-type="group">
<li>Menu
  <ul>
    <li><a href="#drawer-home" onClick="panelControler('first')">First</a></li>
    <li><a href="#drawer-home" onClick="panelControler('second')">Second</a></li>
    <li><a href="#drawer-home" onClick="panelControler('third')">Third</a></li>
  </li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
<header data-role="header">
  <div data-role="navbar">
    <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
    <span>Test</span>
  </div>
 </header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
panelControler('first');
</script>
</body>
</html>

下面是我用来测试的非常简单的javascript:

function panelControler(action){
alert("panelControler");
if (action === 'first'){
    alert("first show");
    $("#first").show();
    $("#second").hide();
    $("#third").hide();
}
else if (action === 'second'){
    alert("second show");
    $("#second").show();
    $("#first").hide();
    $("#third").hide();
}
else if (action === 'third'){
    alert("third show");
    $("#third").show();
    $("#second").hide();
    $("#first").hide();
}
}

查看Kendo UI Mobile常见问题解答中的第二个问答对。