Osc*_*oAA 1 html javascript css jquery jquery-mobile
我是这个jQM的新手,还有AJAX.
我有一个保持静态页眉和页脚的站点,并用外部.html/.php页面替换#mainContent div.
我发现当我单击其中一个导航栏选项卡(包含在标题中),并且#mainContent被另一个页面替换时,jQuery Mobile样式(按钮,下拉菜单等)会不立即加载.
最初出现默认样式的按钮,然后(如果AJAX加载)一秒钟之后页面执行'刷新类型闪烁',并且按钮被替换为jQM样式版本.
偶尔我会遇到AJAX'加载圈',按钮保持原始样式,直到再次按下"导航栏链接".
我知道这是一个很好的理由.
研究表明使用"$(document).ready(function(){....});" 对于jQM来说并不理想.我在导航脚本中将其替换为"$(document).bind('pageinit',function(){....});",这并没有什么区别(虽然导航按钮仍然有用).
这是我的index.php的基本脚本初始化
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
<div class="main">
<p/>
content here.\
</div>
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer" id="footer">
<?php
require_once('../account.php');
if ($account == "_")
{
echo "Not logged in";
} else {
echo "Logged in as " . $account;
}
?>
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
我的navScript.js:
$(document).bind('pageinit', function() {
$("#coursesButton").on("click", function(e) {
//e.preventDefault();
//alert('courses');
$("#mainContent").load("./pages/courses.html");
});
$("#searchButton").on("click", function(e) {
//e.preventDefault();
//alert('search');
$("#mainContent").load("./pages/search.html");
});
$("#submitButton").on("click", function(e) {
//e.preventDefault();
//alert('submit');
$("#mainContent").load("./pages/submit.html");
});
$("#accountButton").on("click", function(e) {
//e.preventDefault();
//alert('account');
$("#mainContent").load("./pages/accountPage.php");
});
});
然后这是我的一个外部页面加载.这是按钮样式无法正确加载的地方......(search.html):
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="content" class="ui-content" id="mainContent">
<div class="wrap">
<div class="main">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<form method="POST" action="./search_result.php">
<legend><h3>Course:</h3></legend>
<select name="course" id="customSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
</fieldset>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p/>
<input type="submit" value="Go">
</fieldset>
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
如果你能给我一个指针,说明为什么在jQuery-Mobile风格超过标准HTML5之前需要花费一秒时间来'刷新',我会非常感激.
我有一种感觉,这是由于脚本/样式被加载两次(即在index.php和search.html中),但如果我不在每个页面中加载它们,那么按钮不会被风格化......
虽然没有真正影响基本功能,但它确实给Web应用程序带来了真正滞后的外观.
干杯.
问题是您没有初始化通过Ajax加载的内容.当您动态加载外部数据时,您需要手动初始化任何jQuery Mobile的"小部件".
您只需.enhanceWithin()在$("#mainContent")成功加载数据后调用即可.因此,您需要使用.load()'s 回调函数来初始化这些元素.
$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
(1)单击"课程"或"搜索"按钮
| 归档时间： |
|
| 查看次数： |
456 次 |
| 最近记录： |