我有一个简单的 html 文件，如下所示：
<!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来显示页面，但它没有按我的意愿工作。在普通版本中，我可以将 url 与 #home 一起使用，它会显示出来，但是当我刷新页面时，它总是显示第一个。
所以我的问题是：
我可以在 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