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

时间：2013-06-04 06:35:52

标签： jquery css jquery-mobile

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

我尝试使用以下代码：

.load（）：

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

.get（）＆amp; .append（） 

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

我使用相同的代码：

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

我的css来自 Inspect Element ：

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

Loaded

未加载（我的情况，基本上它没有加载JQM按钮的CSS）

Not loaded

更新

这是我的完整代码：

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>

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

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

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

2 个答案:

答案 0 :(得分：5)

说明：

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

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

您只需要 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>

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>

答案 1 :(得分：-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);
});

这将用新数据替换旧数据

相关问题
最新问题