0
我有一個簡單的HTML文件，該文件是這樣的：jQuery Mobile的和動態頁面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inpress</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/src/css/themes/inpress.css" />
<link rel="stylesheet" href="/src/css/jquery.mobile.structure-1.3.2.min.css" />
<script src="/src/scripts/jquery-1.10.2.min.js"></script>
<script src="/src/scripts/jquery.mobile-1.3.2.min.js"></script>
<script src="/src/scripts/inpress/jquery.inpress.js"></script>
<style>
* {
-ms-touch-action: none;
}
.fullscreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
然後我創建動態使用jQuery和JSON的組合的所有頁面。 我的問題是，我可以輕鬆地添加類ui-page-active來顯示頁面，但它不工作，因爲我希望。 在正常版本中，我可以在#home中使用url，它會顯示出來，但是當我刷新頁面時，它總是顯示第一個。
所以我的問題是：
我可以加載的所有項目到頁面之前jQuery Mobile的嘗試做它的魔力？
更新1
好吧，這裏是我用來創建我的網頁的代碼。
function createPages(data) {
if (data.configuration.global.target) {
showDebug("Creating pages.");
$.each(data.pages, function (i, item) {
if (item.enabled) {
var loadTemplate = (i == 0) ? true : false;
createPage(item.template, loadTemplate);
} else {
showDebug("The page is disabled.");
}
});
//if (document.location.hash != "")
// startPage = document.location.hash;
//showDebug(startPage);
//$.mobile.changePage(startPage);
} else {
showDebug("The target file could not be found.");
}
};
function createPage(template, loadTemplate) {
$.ajax({
url: template,
dataType: 'json',
async: false,
success: function (data) {
showDebug("Creating page.");
var page = createElement(data);
var id = page.attr('id');
$('body').append(page);
$('#' + id).trigger('create');
showDebug("Page created: " + id);
}
});
};
function createElement(template) {
var o;
o = $('<' + template.element + '/>');
if (template.id) {
o.attr("id", template.id);
}
if (template.href) {
o.attr("href", template.href);
};
if (template.src) {
o.attr("src", template.src);
};
if (template.type) {
o.attr("type", template.type);
};
if (template.classes) {
$.each(template.classes, function (i, item) {
o.addClass(item);
});
}
if (template.data) {
$.each(template.data, function (key, value) {
$.each(value, function (key, value) {
o.attr("data-" + key, value);
});
});
}
if (template.content) {
$.each(template.content, function (i, item) {
if (item.element) {
o.append(createElement(item));
} else {
o.append(item);
}
});
}
return o;
};
，只是讓你得到它的解析JSON的想法：
{
"id":"introPage",
"element":"div",
"data":[
{
"role":"page"
}
],
"content":[
{
"element":"div",
"data":[
{
"role":"content"
}
],
"content":[
{
"id":"skip-intro",
"element":"a",
"href":"#homePage",
"content":[
{
"id":"introMovie",
"element":"video",
"classes":[
"fullscreen"
],
"content":[
{
"element":"source",
"type":"video/mp4",
"src":"/src/assets/test.mp4"
},
{
"element":"source",
"type":"video/webm",
"src":"/src/assets/test.webm"
},
{
"element":"source",
"type":"video/ogg",
"src":"/src/assets/test.ogv"
},
"Your browser does not support the video tag."
]
}
]
}
]
}
]
}
我希望幫助你幫助我:)
歡呼聲， /r3plica
爲什麼要在JQM增強它們之前注入元素？要創建一個頁面，只需爲活動頁面調用'pagecreate'而不是'create'。對於注入DOM的其他頁面，您不需要進一步增強。 – Omar
不確定你的意思。從文檔的外觀你只需要在頁面上運行插件時調用pagecreate – r3plica
'pagecreate'增強頁面和內部的元素。它通常用於添加或修改頁面的主要部分，即頁眉/頁腳/面板，僅用於活動頁面。演示：面板http://fiddle.jshell.net/Palestinian/kCtnG/網頁http://fiddle.jshell.net/Palestinian/YJuJ5/ – Omar