jQuery移动显示双按钮

jQuery Mobile showing doubled button

本文关键字：按钮 显示 移动 jQuery      更新时间：2023-09-26

我正在尝试使用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脚本的东西，但是，正如你在代码中看到的，它们不是双重引用!

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

从一个标签元素创建的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>

也给它一些文字。

和一样，Omar在评论中告诉你，你不需要:

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

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/

相关文章：