Question

我在Worklight上使用jQueryMobile 1.4.4。

编辑：我有一个主html index.html，其中包含div #pageContent。我想要做的是在这个块中包含外部页面，以便维护index页面的页眉/页脚和框架，这应该是所有应用程序的通用页面。

我遇到的一个问题是，当在主页面中将外部HTML页面加载到div中时，不应用Jquery样式，因为尚未解释样式/ JS。使用这个：

function wlCommonInit () {
    $("#pageContent").load ("pages/login-view.html");
)};

然后关注jquery移动文档，为了确保在呈现外部HTML页面之前加载主页面上的所有内容我已将其更改为：

function wlCommonInit () {

    $(document).on ("pageinit", function () {

        alert ("Hello there");

        $.mobile.loadPage (
            "pages/login-view.html"
            ,{ 
                "pageContainer": $("#pageContent")
            }
        )}
    );
}

但是这个代码没有被触发，警报也没有出现。

我的代码有问题吗？

Answer 1

使用jQuery Mobile，您需要替换整个<div data-role="page" ...>。我不认为你只能替换部分内容（即保留页眉和页脚，并只替换它们之间的内容）。

例如，在下面的代码段中，mainpage.html的内容在应用程序启动时加载/替换index.html的内容：

<强>的index.html

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>index</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
            <link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
        </head>
        <body style="display: none;">
            <div data-role="page" id="mainpage" style="padding-top: 42px !important">
                <div data-role="content">
                </div>
            </div>

            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

<强> main.js

function wlCommonInit(){
    $(':mobile-pagecontainer').pagecontainer('change','pages/mainpage.html');
}

<强> mainpage.html

<div data-role="page" id="mainpage" style="padding-top: 42px !important">
    <div data-role="header" id="header" data-position="fixed">
        <h3>jQuery Mobile Page Navigation</h3>
    </div>

    <div data-role="content" id="content" style="padding: 15px">
        In mainpage.html
    </div>
</div>

Answer 2

要将内容加载到当前页面，请使用.load()。但是，加载的内容需要增强来加载jQM UI（样式）.enhanceWithin()。此方法将jQM样式应用于所有元素，尽管它们的类型（小部件）。

$(document).on("pagecreate", "#pageID", function () {
    $(".selector").on("click", function () {
        $("#targetDIV")
            .load("page.html #specificDIV", function () {
            $(this).enhanceWithin(); /* apply styles */
        });
    });
});

<强> Demo

jQuery mobile：'pageinit'没有解雇

2 个答案: