【发布时间】:2020-06-13 18:58:40
【问题描述】:
我正在重新开始使用 JQueryMobile 进行开发,这对于制作移动应用程序原型来说非常棒,但是我遇到了一个潜在的版本问题: 要么格式工作正常,但 js-checked 单选按钮不刷新,要么格式需要退出窗口,然后同一个 JS 确实设法产生刷新。我正在研究 dreamweaver CS6 并与 js-bin 进行交叉检查.
这是具有有效 JQM 格式的页面,但缺少单选按钮自我更新功能。 http://jsfiddle.net/tearex/bh9szuer/
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body ONLOAD="heja()">
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
<label for="WTEDY_0">Cat</label>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2" />
<label for="WTEDY_1">Dog</label>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
</body>
<script>
function heja()
{
document.getElementById("WTEDY_0").checked = true;
$("WTEDY_0").checkboxradio("refresh");
}
</script>
不确定检查的状态是否已更新但没有刷新。
这是一个带有最新 jqm 的页面 - 它根本没有显示 jqm 格式(顺便说一下,页面也被加载到 chrome 中 - 最新的,在 windows 7 64少量) http://jsfiddle.net/tearex/bh9szuer/2/
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body ONLOAD="heja()">
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
<label for="WTEDY_0">Cat</label>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2" />
<label for="WTEDY_1">Dog</label>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
</body>
<script>
function heja()
{
document.getElementById("WTEDY_0").checked = true;
$("WTEDY_0").checkboxradio("refresh");
}
</script>
这里是完全没有引用css的页面,并且onload函数可以正常工作。 http://jsfiddle.net/tearex/y4a369ps/1/
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ONLOAD="heja()">
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
<label for="WTEDY_0">Cat</label>
<input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2" />
<label for="WTEDY_1">Dog</label>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
</body>
<script>
function heja()
{
document.getElementById("WTEDY_0").checked = true;
$("WTEDY_0").checkboxradio("refresh");
}
</script>
我有一些问题。 1、JQM如何实现单选按钮状态变化和刷新保留? 2. 你认为哪个版本的 jqm 是最佳的,或者——理想情况下——你如何使最新的版本工作? 3. 附带问题推荐的最兼容的基于 Web 的 jsfiddle 等效项是什么? 非常感谢。
【问题讨论】:
-
我找到了 JQM 与 body onload 冲突的答案 - 这与 JQM 相对于 的执行顺序有关。一种解决方法是用“未包装”的 JS 指令 (jsfiddle.net/tearex/784u21do/2) 替换该函数,或者让该函数由某些用户活动触发。剩下的问题是哪个是最普遍兼容和工作的 jqm 版本。我期待着答案。谢谢。
标签: javascript jquery-mobile radio-button compatibility