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>

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

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

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

Answer 1

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

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

Answer 2

唯一命名就是问题。

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

只需将第二页重命名为datebox2即可解决问题。作为搜索＆＃34; datebox＆＃34;的第一个唯一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 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 mobile Datebox CSS无法正确加载

3 个答案: