2

我试图将其他 html 内容加载到我的 div 中，但我发现我丢失了加载内容的样式。

我尝试使用以下一些代码：

.load()：

$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");

.get() & .append() ;

$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
    $("#paymentsExecutiveExSum").append(data);
});

我使用相同的代码：

<a data-role="button" class="fullWidth">Test</a>

我来自检查元素的 css ：

已加载（从其他 html 使用正常方式加载 html）

已加载

未加载（我的情况，基本上它不会加载 JQM 按钮的 css）

未加载

更新：

这是我的完整代码：

主页.html

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="stylesheet" href="css/my.css"/>
    <link rel="stylesheet" href="css/theme-addon.css"/>
    <link rel="stylesheet" href="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.css"/>

    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var jq = jQuery.noConflict();
        var animation = "none";

        Number.prototype.formatMoney = function(c, d, t){
            var n = this, 
                c = isNaN(c = Math.abs(c)) ? 2 : c, 
                d = d == undefined ? "." : d, 
                t = t == undefined ? "," : t, 
                s = n < 0 ? "-" : "", 
                i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        };
    </script>
    <script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body onload="WL.Client.init({})" id="content" style='display: none' class="fullWidth">

    <div data-role="page" id="homePage">
        <div data-role="content">
            <a href="#" data-role="button" id="login" class="fullWidth">Log In</a>
        <script src="js/my.js" type="text/javascript" charset="utf-8"></script>
    </div>

    <script src="js/plugin/simplesplitview-1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/initOptions.js"></script>
    <script src="js/messages.js"></script>

</body>

我的.js

$('#login').click(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();

    jq.mobile.changePage("next.html", { transition: animation, changeHash: true });
});

然后，当涉及到summary.html时：

<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <button class="back" data-theme="a">Back</button>
    <div class="ui-title headerTitle">Summary</div>
</div>

<div data-role="content" id='splitviewcontainer' class='splitviewcontainer summary'>

    <div class='leftside'>
        <div id="executiveSummaryMenuGroupButton">
            <a id="paymentsExecutiveSummaryButton" data-role="button" class="executiveSummaryTitleMenuButton">Payments</a>
            <div class="horizontalDivider"></div>
        </div>
    </div>

    <div class='rightside' id='paymentsExSum'></div>    
</div>

<script src="js/summary.js"></script>

摘要.js

$(function(){
    $('#executiveSummaryMenuGroupButton').hide();
    $('#splitviewcontainer').simplesplitview();
});

$('#paymentsExecutiveSummaryButton').click(function(e){
    $("#paymentsExSum").load("summary/ExecutiveSummary/paymentsExecutiveSummary.html").trigger('create'); //It seems it doesn't work
    $('#splitviewcontainer').simplesplitview('showRight', 'paymentsExSum', true);
});

在不丢失css样式的情况下将其他html内容加载到div的正确方法是什么？

4

2 回答 2

6

解释：

您首先需要加载它们，然后手动触发页面增强。你并没有失去风格，你一开始就没有。jQuery Mobile 在页面初始化期间增强内容，每个动态添加的内容都必须手动增强，请在此处阅读更多信息。

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#index").load("load.html", function() {
        $(this).trigger("pagecreate");
    });
});

您所需要的只是trigger("pagecreate");将页面标记增强为正确的 jQuery Mobile 外观。如果您只是附加到内容 DIV，则使用trigger('create');但这次是在内容 DIV 上。

工作示例：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $("#index").load("load.html", function() {
                    $(this).trigger("pagecreate");
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="index">

        </div>    
    </body>
</html>

加载.html

<div data-theme="b" data-role="header">
    <h1>Index page</h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>

<div data-role="content">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>
于 2013-06-04T06:39:33.667 回答
-1

你可以同时使用它们，但是

$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");

将用新的html替换所有以前的html，并且

$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
    $("#paymentsExecutiveExSum").append(data);
});

会将新数据附加到以前的 html 中，但不会删除旧数据。您也可以使用 .html 之类的

$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
    $("#paymentsExecutiveExSum").html(data);
});

这将用新数据替换旧数据

于 2013-06-04T06:39:01.100 回答