jQuery 1.7.1和jQuery Mobile 1.1.0RC1
您好，我的网站上有一个JQM单选按钮，并且我根据我在页面显示时检查的条件以编程方式更改其值。一切都运行良好，但它并非发生得非常“平滑”，我的意思是当用户改变时它是非常明显的，即它处于原始状态半秒左右然后切换。也许我有点挑剔，但我希望切换对用户透明。我仍然试图理解各种JQM“page *”事件，并且如果我在pagebeforeshow或pagebeforecreate上做了它会使这种情况发生，但事实并非如此。
我试图为它做一个jsFiddle（我的第一次），它在那里发生了很快（可能与我在选项中选择onDomReady有关吗？）但是应该让你知道我是什么谈论...在我的网站上，当页面加载然后切换到开启时，选择显然处于关闭状态。这不是什么大不了的事，我要求更多帮助我理解各种页面*事件。
更多信息：
Web应用程序基本上是一个文档浏览器，构造如下：index.html文件包含文档列表，或者更确切地说是指向可用文档的TOC的链接列表。每个TOC都包含指向实际文档各部分的链接。
代码如下......因为我是初学者，所以很可能充满了糟糕的风格。我的单选按钮问题的代码在custom2.js的第30-39行和ch2-sec1.html的23-28中。另请注意，当样式表以styleDay.css结尾时，custom2.js中的console.log($("link[href$='styleDay.css']").length);代码行打印出“2”，我不知道为什么（我希望它为“1”）。但是，我的主要问题是浏览内容文件时存在明显的延迟（例如ch2-sec1.html，如下所示），当条件为真时，代码将单选按钮翻转为“日间模式”...不能对它进行编码，以便在页面可见时已经翻转了吗？
root / index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
<a href="doc1-toc.html">Document 1</a>
<a href="doc2-toc.html">Document 2</a>
<a href="doc3-toc.html">Document 3</a>
<a href="doc4-toc.html">Document 4</a>
<a href="doc5-toc.html">Document 5</a>
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root / doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left"><a href="index.html" data-role="button" data-icon="home">Home</a></div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li><a href="HTML/ch1-sec1.html">Chapter 1 Section 1</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li><a href="HTML/ch2-sec1.html">Chapter 2 Section 1</a></li>
<li><a href="HTML/ch2-sec2.html">Chapter 2 Section 2</a></li>
<li><a href="HTML/ch2-sec3.html">Chapter 2 Section 3</a></li>
<li><a href="HTML/ch2-sec4.html">Chapter 2 Section 4</a></li>
</div>
</div>
</div>
</div>
</body>
</html>
root / HTML / ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
<a href="../index.html" data-role="button" data-icon="home" data-theme="b">Home</a>
<a href="ch2-sec1.html" id="previous" data-role="button" data-icon="arrow-l" data-theme="b">Previous</a>
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
<a href="../doc1-toc.html" data-role="button" data-icon="arrow-u" data-theme="b">TOC</a>
<a href="ch2-sec3.html" id="next" data-role="button" data-icon="arrow-r">Next</a>
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root / JS / custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});