jQuery Mobile CSS 问题答案

【问题标题】：jQuery Mobile CSS issuesjQuery Mobile CSS 问题
【发布时间】：2013-03-31 18:30:49
【问题描述】：

我在 jQuery mobile 中有一个页面，我在页面本身中有一些自定义的 css，但是当我通过 ajax 调用此页面时，它不会加载自定义 css。但是，如果我刷新页面，页面将使用自定义 css 加载。我怎样才能阻止这种情况发生，因为我只希望自定义 css 在页面被调用时显示。我的代码如下：

<!doctype html>
<html lang="en">
<head>
    <title>Player</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <style>     
        #navgroup {text-align:center;}
        #navgroup div {display:inline-block;}

            .containing-element .ui-slider-switch
        {
            width: 100%;
        }

        input.ui-slider-input {display: none;}

        .slider-shit .ui-btn
        {
            margin-left: -15px;
            margin-top: -15px;
        }

        .slider-shit .ui-slider
        {
            width: 100%;
            top: 3px;
            margin: 0;
            opacity: 1;
        }

        .slider-shit
        {
            padding: 0 20px 0 0;
        }

        .ui-slider div {
            margin:  0 15px 0 38px !important;
        }

        .ui-slider div div {
            margin:  0 !important;
        }

        #posSlider {
             display: none;           
        }

        #nextSong {
            border-right-width: 1px !important;   
            border-bottom-right-radius: inherit;
            border-top-right-radius: inherit;    
        }

        #songOptionsButton {
            position: absolute;
            bottom: 10px;
            right: 10px;
            border-left-width: 1px !important;
            border-bottom-left-radius: inherit;
            border-top-left-radius: inherit;      
        }

        .ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner {
            padding: 37px 20px 0.5em;
        }
    </style>
</head>
<body>
    <!--Player for indivdual and playlist songs-->
    <div data-role="page" data-add-back-btn="true" id="player">
        <div data-role="header" data-position="fixed">
            <h1 id="songName">Nothing Playing...</h1>
            <a href="#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a>
        </div>
        <div data-role="content" style="height: 100%;" id="songPicture">
        </div>
        <div data-role="footer" data-position="fixed">
            <table style="margin-left: 5px; margin-right: 5px;">
                <tr>
                    <td><p id="songCurrentpos">0:00</p></td>
                    <td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td>
                    <td><p id="songDuration">0:00</p></td>
                </tr>
            </table>
            <div id="navgroup">
                <div data-role="controlgroup" data-type="horizontal">
                    <a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a>
                    <a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a>
                    <a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a>
                    <a href="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

如果我理解正确，您是在使用 ajax 将此页面加载到 DOM 中吗？如果这是真的，那么我理解你的问题。你看，当 ajax 用于页面加载时，只有 BODY 内容被加载到 DOM 中。

如果您将 css 加载到第一个 HTML 文件中或将 STYLE 块移动到 BODY 内容中，则可以解决您的问题。

这是一个如何将样式包含在 BODY 块中的示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <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.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <style>
        #content-test {
            background: red !important;
        }
    </style>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="index3.html#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content" id="content-test">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

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

另外，我在其他答案中描述了这个问题，并提供了更多细节和几个例子： https://stackoverflow.com/a/15431229/1848600

【讨论】：

是的，你描述得很好，但是我怎样才能将它移动到内容的正文中？
我会给你举个例子，同时看看我描述这个问题的其他答案+例子：stackoverflow.com/a/15431229/1848600
我在回答中添加了新内容，看看吧。
将样式放在第一页有效。我从来不知道 ajax 是如何工作的非常有趣，所以我猜测我在其他 html 文件中的附加标头只是浪费代码然后如果它通过 ajax 加载