我是Jquery mobile的新手。
当我导航到另一个页面时,我试图获得滑动效果,从代码下面说#display2。
但我无法获得幻灯片效果。
如果我删除了rel =“external”我可以滑动但是在#display2(我将导航到的页面),查询字符串值将返回为null。
所以如果我把rel =“external”,参数传递给#display2但幻灯片转换不起作用。 如果我删除re =“外部”幻灯片工作,但查询字符串参数返回null。
你可以告诉我有没有一种方法可以让他们一起工作。('#display').on('pagebeforeshow', function () {
// $(this).find('[data-role=header] .ui-title').text(json.getLOBXMLResult[currentItem].FolderName);
$.ajax("AppstoreWS.svc/getLOBXML", {
beforeSend: function (xhr) {
$.mobile.showPageLoadingMsg();
},
complete: function () {
$.mobile.hidePageLoadingMsg();
},
contentType: 'application/json',
dataType: 'json',
type: 'GET',
error: function () {
//alert('Something awful happened');
},
success: function (data) {
result1 = data.getLOBXMLResult;
$('#categoryList').children().remove('li');
$.each(result1, function (index, output) {
$('#categoryList').append('<li><a href="?platform=' + output.FolderName + '&sid=test#display2" data-transition="slide" rel="external">' + output.FolderName + '</a></li>');
});
$('#categoryList').listview('refresh');
}
});
});
答案 0 :(得分:0)
rel=external
无法转换的原因是因为这需要浏览器打开外部页面,因此禁用ajax
。为了抵消这一点,你有很多选择:
您可以将两个页面放到一个页面中。这称为单页模板,第二页的引用将为#page2
(或您提供的任何名称作为ID)。这就是它的样子:
<div data-role="page" id="page1">
<!--Stuff in page 1-->
</div>
<div data-role="page" id="page2">
<!--page 2 stuff-->
</div>
优点
data
的{{1}}属性中存储您需要的数据,并在#page2
或pageinit
中检索它(或第二页的任何事件。缺点
正如您可能已经看到的那样,pageshow
只能在绝对需要页面刷新时使用。它取决于用户的选择。如果rel=external
标记标有a
,则表示浏览器会将其视为外部链接,并忽略jQuery Mobile的rel=external
导航系统。
通常,为了能够使用页面转换,您必须在jQM中使用ajax
导航系统。所以ajax的一般行为如下:
ajax
会在page2.html中请求page1
。 page2
取自page2.html。 <body>
部分(可能包含您的脚本,可能包含您的查询字符串逻辑)将被忽略。所以要更改它,你可以参考page1.html头文件中的page2脚本,这样当jQM的<head>
系统拉出page2.html的ajax
时,这些脚本就会被加载并准备好。
body
优点
缺点
<script src="jqm.js"></script>
<script src="page1.js"></script>
<!--page 2 scripts-->
<script src="page2.js"></script>
中的所有10个页面的脚本吗?我不这么认为。 当ajax将脚本带入页面时,这将带来脚本。这也适用于查询字符串。这看起来像这样:
page1
优点
我之所以这么说是因为查询字符串是过时的技术,因为当时没有办法存储数据。它们也不安全,因为用户可以看到您通过URL发送的数据。您必须考虑使用 <div data-role="page" id="page2">
<script src="page2.js"></script>
<!--- your html-->
</div>
之类的内容。我不是说你不能使用查询字符串。只是有更好的选择可用于移动数据存储。 See this link for more info about how you can use this localStorage
. Also, see this for all the options you have.现在,查看您的查询字符串:
localStorage
这很容易成为一个对象。所以在platform=' + output.FolderName + '&sid=test
内的锚标签的点击功能中,
<li>
然后,在page2.html的$(document).on("click", "li a", function(e) {
//stop default action.
e.preventDefault();
//take the href; Im assuming its page2.html?platform=outputFolder&sid=test
var params = this.href.split("?");
//now params[0] = page2.html
//param[1] = platform=outputFolder&sid=test
//set this in localStorage
localStorage["page2params"] = param[1];
//change to page2.html
$.mobile.changePage("page2.html", { transition : slide });
})
方法中,您可以检索它以供您使用:
pageinit