我有一个使用 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 被加载并且日期框图标按预期工作:
但是如果我使用页脚导航栏开/关选项卡导航到第二页，我会得到这个奇怪的图标位置:
请帮我弄清楚这里出了什么问题。
最佳答案
嗯，我不确定这是为什么，但是使用本地文件而不是头部的 CDN 链接使我能够跨页面使用 datebox 插件。这些文件是使用此处的下载生成器生成的:
关于javascript - jQuery Mobile Datebox CSS 无法正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43307725/