日期选择器导航图标问题答案

【问题标题】：Datepicker navigation icons issues日期选择器导航图标问题
【发布时间】：2014-05-20 10:25:00
【问题描述】：

在我在这里发布之前，我搜索了其他答案并确保图像文件夹位于 cc 文件夹等中。我仍然有一个问题，在我的日期选择器上，左右箭头不显示，而是两个箭头都显示！

当我在 firefox 上的 web developer 中查看我的页面时，在检查器选项卡中，当我查看左箭头时，我看到选择了正确的图标文件，如下所示 -

element {
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.ui-widget-header .ui-icon {
    background-image: url('images/ui-icons_222222_256x240.png');
}

我的 CSS 声明是 -

 <link rel="stylesheet" href="css/jquery-ui-1.10.3.css" />
 <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.css" />
 <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />

我还能错过什么？

谢谢。

附言

阅读完 Kamlesh 的回答后，我意识到我没有提供所有信息。因此，我捕获了显示日期选择器的 Inspector 的屏幕截图。

这就是日期选择器的样子——

当点击它时 -

再次感谢。

【问题讨论】：

标签： jquery css datepicker

【解决方案1】：

试试这个.ui-widget-header .ui-icon { background-image: url('../images/ui-icons_222222_256x240.png'); }

还要确保图像文件夹中的图标可用。

【讨论】：

【解决方案2】：

您必须为各个图标指定background-position。如果没有背景位置，它将始终显示相同的默认图标。这是一个包含所有图标的图像精灵。因此，为了使用它，您应该提供该图标的背景位置

参考此链接：http://www.petefreitag.com/cheatsheets/jqueryui-icons/

注意他们如何将background-position 用于不同的图标。

【讨论】：

【解决方案3】：

对我来说是严重的 DUH。

在让网站运行的疯狂过程中，我完全搞砸了，忘记了箭头是按钮图标这一事实！因此，弄乱的图标是箭头-l 和箭头-r，因为它找不到 jquery.mobile-1.3.2.css。

该死！

谢谢大家，对不起，我浪费了你们的时间......

【讨论】：