我正在尝试使用 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 并发现了您的问题。
从 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>
还给它一些文字。
就像 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" />
关于javascript - jQuery Mobile 显示双按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16635869/