0
我有一個多頁面模板設置。第一頁有一組到內部頁面的鏈接 - 但是隻有一個鏈接到同一個動態加載數據的＃模板頁面。另一個鏈接是我在頁面中創建的一個表單。jquerymobile - 多頁面模板導航
我遇到的問題是當您導航到其中一個鏈接時，繼續瀏覽頁面，然後使用後退按鈕返回到第一頁，如果您然後單擊指向它的表單的鏈接導航到＃頁面，它會轉到您在其他鏈接上的最後一頁。
希望是有道理的 - 可能是圖將使其更清晰
首頁>產品列表>產品詳細
產品詳細>產品列表>家（後退按鈕）
首頁>聯繫表
這最後一步再次顯示產品詳細信息頁面，而不是聯繫表單。這是因爲如果它不清除頁面出來：
<body>
<div data-role="page" id="home">
<div data-role="content">
<a href="#pageList?type=products" data-transition="slide"><img src="images/Icon-Courses.png" alt="courses" /></a><br />
<a href="#contactForm" data-transition="slide"><img src="images/Icon-Contact.png" alt="contact" /></a>
</div>
</div>
<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Contact Us</h1>
</div>
<div data-role="content" class="detail">
<div id="contentdiv" style="margin:10px auto;width:90%;">
<label for="name">Your Name</label>
<input type="text" id="name" style="width:90%;" data-mini="true" />
<label for="email">Email Address</label>
<input type="text" id="email" style="width:90%;" data-mini="true" />
<label for="phone">Phone Number</label>
<input type="text" id="phone" style="width:90%;" data-mini="true" />
<label for="comments">Enquiry/Comments</label>
<textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
<br />
<input type="submit" id="submit" value="Send Enquiry Now" />
</div>
</div>
</div>
</body>
</html>
我使用jqm.page.params.js
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
$(document).delegate("#pageDetail", "pagecreate", function() {
$(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});
$(document).bind("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if (typeof data.toPage === "string") {
$.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var page;
var type;
var cat;
if ($.mobile.pageData && $.mobile.pageData.type) {
type = $.mobile.pageData.type;
}
if ($.mobile.pageData && $.mobile.pageData.cat) {
cat = $.mobile.pageData.cat;
}
if ($.mobile.pageData && $.mobile.pageData.page) {
page = $.mobile.pageData.page;
}
var url = $.url(data.toPage); // page url
var hash = url.fsegment(1).replace(/&.*/, ""); // nav hash for page holder
switch (hash) {
case "pageList":
$.ajax({
url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
datatype: "html",
success: function (data) {
$('.submenu').html(data);
$('.title').html(type);
$('.submenu').trigger('create');
}
});
break;
case "pageDetail":
$('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function() {
$(this).trigger('create');
});
break;
default:
break;
}
}
});
</script>
</head>
HTML位：
我的代碼（截斷清晰度）用於處理查詢字符串參數。
那裏有什麼明顯的嗎？ #pageList中顯示的內容將返回#pageDetail頁面的鏈接。
不明白爲什麼我似乎無法清除緩存，並且它無法正確導航到聯繫表單，前提是您已經到過其他任何地方。如果你直接去那裏，它可以正常工作。
任何人流光了？順便說一句，這需要使用的PhoneGap作爲一個獨立的
感謝
我應該添加我已經放棄在JavaScript中的警報，以趕上哈希，它絕對捕捉正確事情，只是不去正確的地方！ – Dave