如何在不丢失CSS样式的情况下将其他html的内容加载到div？

Question

如何在不丢失CSS样式的情况下将其他html的内容加载到div？

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

我尝试使用以下代码:

.load():

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

Run Code Online (Sandbox Code Playgroud)

.get()&.append() ;

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

Run Code Online (Sandbox Code Playgroud)

我使用相同的代码:

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

Run Code Online (Sandbox Code Playgroud)

来自Inspect Element的我的css :

加载(从其他html使用正常方式加载html)

没有加载(我的情况,基本上它没有加载JQM按钮的CSS)

更新:

这是我的完整代码:

home.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>

Run Code Online (Sandbox Code Playgroud)

my.js

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

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

Run Code Online (Sandbox Code Playgroud)

然后,当涉及到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>

Run Code Online (Sandbox Code Playgroud)

summary.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);
});

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Gaj*_*res 6

说明:

您首先需要加载它们然后手动触发页面增强.你没有失去风格,你首先没有它.jQuery Mobile在页面初始化期间增强了内容,每个动态添加的内容都必须手动增强,在这里阅读更多相关内容.

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

Run Code Online (Sandbox Code Playgroud)

您只需trigger("pagecreate");要将页面标记增强到正确的jQuery Mobile外观.如果您只是附加到内容DIV,那么trigger('create');这次使用内容DIV.

工作范例:

的index.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>

Run Code Online (Sandbox Code Playgroud)

load.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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，8 月前
查看次数：	12325 次
最近记录：	9 年，1 月前