jquery - 我的实现中缺少日期选择器图像？使用 jquery 移动

Question

我正在实现一个日期选择器。但是左侧缺少默认图像。我不知道为什么它没有显示在浏览器中。当我看到演示时，它显示得很好。 我用过这个:

<script type="text/javascript" src="lib/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="lib/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="lib/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="lib/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="lib/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="lib/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="lib/jQuery.mousewheel.min.js"></script>
<script type="text/javascript" src="lib/jQuery.mobile.datebox.i18n.en_US.utf8.js"></script>

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true,"zindex":1200}'/>

但是图片不显示。

这是我的代码:https://www.dropbox.com/s/l2dtrxmnsurccxt/www.zip

我这是一个 CSS 问题。 (CSS 冲突？)

Answer 1

日期选择器图像由类 ui-icon-datebox 给出.这个在您的 HTML 中。

ui-icon-datebox CSS 类定义于:

<link type="text/css" href="css/jqm-datebox.min.css" rel="stylesheet">

这个文件也存在于<zip>/css/jqm-datebox.min.css中.这也行。

这个类说 .ui-icon-datebox :

background-image: url('image/datebox.png')!important;
background-repeat: no-repeat!important;
background-position: 99% 8px!important;

但是如果你现在去:`<zip>/css/image您找不到名为:datebox.png 的文件.所以这就是问题所在。

注意:作为一般建议，在使用外部 CSS/JS 库时不要移动文件。保留 css , js , img为您自己的代码。只需将外部库转储到名为 external 的目录中(或类似的东西)并在您下载它们时保留它们的结构。这可以帮助您避免此类问题，因为许多库都定义了自己的目录结构，而您不想“打扰”内部图像/CSS 文件引用。