JQuery Mobile - 版本沖突，單選按鈕 JS 刷新
[英]JQuery Mobile - version conflicts, radiobutton JS refresh
問題描述
我正在重新使用 JQueryMobile 進行開發，這證明了對移動應用程序的原型設計非常棒，但是我遇到了一個潛在的版本問題：格式工作正常但 js 檢查的單選按鈕不刷新，或者格式需要 go的 window 然后同一個 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 的頁面，並且加載 function 工作正常。 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 等效項是什么？ 非常感謝。
1 個解決方案
解決方案1
1 2020-06-15 16:16:44
是時候切換到https 了：
<!-- JQM theme shall be loaded before structure -->
<link rel="stylesheet" href="css/my-custom-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/my-custom-styles.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).on("mobileinit", function () {
/* my custom settings */
});
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="js/my-custom-functions.js">
關於刷新，也請不要忘記 jQuery 需要 CSS 樣式的選擇器：
function heja() {
var id = 'WTEDY_0', el = document.getElementById(id);
el.checked = true;
$('#' + id).prop('checked', true); /* The jQuery way */
var isInstance = $.data(el, 'mobile-checkboxradio');
if(isInstance) {
$('#' + id).checkboxradio('refresh'); /* The JQM Widgets way */
}
}
這是 Plunker 上的一個工作示例： https://plnkr.co/edit/yLEB2XFlM8H4cqsZ?open=lib%2Fscript.js
AngularJS與jQuery Mobile沖突
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.