jQuery 移动 Datebox CSS 加载不正确

Question

我有一个使用 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>

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

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

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

Answer 1

唯一命名是问题所在。

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

只需将第二页重命名为 datebox2 即可解决问题。作为搜索 "datebox" 的第一个唯一 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>

Answer 2

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

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

Answer 3

user3889963一针见血

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

<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

这里是使用直接安装的文件。

jQuery 移动 Datebox CSS 加载不正确

jQuery mobile Datebox CSS not loading properly

javascript

jquery

css

jquery-mobile

datebox