jQuery 移动日期框 CSS 未正确加载答案

【问题标题】：jQuery mobile Datebox CSS not loading properlyjQuery 移动日期框 CSS 未正确加载
【发布时间】：2017-09-04 14:03:25
【问题描述】：

我有一个使用 jQuery 移动框架开发的简单的两页网站。我需要使用 Datebox 插件来选择时间。我网站的两个页面都在同一个 .php 文件中，由 div 分隔，data-role="page" 适当。

我唯一的问题是，如果日期框存在于网页的第一页，它可以正常加载，但在任何其他页面中，它的图标就会乱七八糟。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
    <script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>


</head> 
<body> 

    <div data-role="page" id="index">
        <header data-role="header" data-position="fixed">
            <h1>Home</h1>
        </header>

        <div data-role="main" class="ui-content">
            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li>
                    <li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer> 
    </div>

    <div data-role="page" id="onoff">
        <header data-role="header" data-position="fixed">
            <h1>ONOFF</h1>
        </header>

        <div data-role="main" class="ui-content">

            <div class="ui-field-contain">
                <label for="datebox">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

        <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
            <div data-role="navbar">
                <ul>
                    <li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li>
                    <li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li>
                    <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li>
                    <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li>
                </ul>
            </div>
        </footer>

    </div>

</body>
</html>

以下图片显示了该问题。在页面加载时，第一个带有 page-role="page" 和 id="index" 的 div 被加载，并且日期框图标按预期工作：

但是，如果我使用页脚导航栏 ON/OFF 选项卡导航到第二页，我会得到这个奇怪的图标位置：

请帮我弄清楚这里出了什么问题。

【问题讨论】：

标签： javascript jquery css jquery-mobile datebox

【解决方案1】：

user3889963 一针见血。

为 Datebox 下载 JQM 的源文件，然后在您的脑海中直接调用它们。

<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">

上一个问题表明通过CDN Jquery Mobile DateBox plugin only working when linked directly to page使用插件存在问题

这是直接安装的文件。

【讨论】：

添加此答案仅供参考。

【解决方案2】：

嗯，我不知道为什么会这样，但是使用本地文件而不是头部的 CDN 链接使我能够跨页面使用 datebox 插件。这些文件是使用此处的下载生成器生成的：

http://dev.jtsage.com/DateBox/builder/

【讨论】：

【解决方案3】：

唯一的命名是问题。

在两个页面中，您都使用相同的名称调用日期框项目，因此只有第一个页面的样式正确。

只需将第二页重命名为 datebox2 即可解决问题。作为标签，用于搜索“日期框”的第一个唯一 ID 并为其设置样式。

<div data-role="main" class="ui-content">
            <div class="ui-field-contain">
                <label for="datebox2">Time (seconds)</label>
                <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
            </div>
        </div>

【讨论】：

这似乎不是问题。更改标签 for=datebox2 后，我仍然得到相同的输出
@user3889963 这个答案是错误的，但我建议对 Datebox 字段进行唯一命名，因为在 JQM 中尝试使用 datebox 的值时很快就会遇到问题。