2

我正在使用 jQM+PhoneGap 尝试我的第一个应用程序。

这是代码:

<!DOCTYPE html>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=yes" />
    <meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.1.min.css" />
    <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="cordova-2.7.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      app.initialize();
    </script>
    <title>Hello World</title>
  </head>
  <body>
    <div class="app" data-role="page">

      <div data-role="content">
        <a onClick="$(this).toggleClass('toggleOffButton');" data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"/>
      </div>
      <!-- /content -->

      <div data-role="footer">
        Footer
      </div>

    </div>
    <!-- /page -->
  </body>
</html>

如您所见,这是一个非常简单的页面。

问题是它输出一个双按钮而不是一个按钮,这让我发疯。

更换

<a onClick="$(this).toggleClass('toggleOffButton');" data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"/>

使用字符串使其按预期仅打印一次字符串,但按钮重复两次。

关于可能是什么问题的任何想法?

我正在阅读有关包含两次 jQM 脚本的内容,但是正如您在代码中看到的那样,它们没有被双重引用!

4

2 回答 2

2

我已经测试了您的 HTML 并发现了您的问题。

从 a 标签元素创建的 jQuery Mobile 按钮必须关闭。基本上改变这个:

<a onClick="$(this).toggleClass('toggleOffButton');" data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"/>

对此:

<a onClick="$(this).toggleClass('toggleOffButton');" data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"/></a>       

也给它一些文字。

就像奥马尔在你不需要的评论中告诉你的那样:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />

如果你有这些文件:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.1.min.css" />
于 2013-05-20T08:25:20.987 回答
1

Jquery mobile 提供了自己的具有漂亮外观的切换按钮。

<label for="flip-mini">Flip switch:</label>
<select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>

我们也可以在这里探索以供进一步参考。 http://jquerymobile.com/demos/1.2.0/docs/forms/switch/

于 2013-05-20T07:21:22.657 回答