prev / next图标未显示在自定义的jquery datepicker主题中

Question

我在我的VS2010项目中实现了jQuery DatePicker，它可以解决一个小问题。当我实现一个自定义主题时，我丢失了我的上一个和下一个图标（为了完成这几个月）。

这是图像：

以下是jquery库引用：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />

以下是jquery-ui-1.8.9-custom.css

中的图像引用

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }

我修改了路径以确保它指向文件。不确定我错过了什么。

非常感谢任何帮助。

感谢。

Answer 1

您确定您的路径指向正确吗（AKA，您是否在网站的其他位置看到了jQuery UI图标）？这是我要检查的第一件事......特别是因为你修改了路径。你可能无意中搞砸了什么。

<强>更新

我认为你需要修复你的路径 - 我认为它们没有正确指向。从我看来，它们必须与.custom.css文件相关。因此，例如，我的内容文件夹中存在我的jquery-ui-1.8.9.custom.css文件。我的状态和图像引用如下：

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

因此，我必须将图像文件夹放在与jquery-ui-1.8.9.custom.css相同的级别，并将所有图像放在该文件夹中。试试看，看看它是否能解决你的问题。

Answer 2

对我来说，问题是Themeroller在图像路径周围添加了双引号。我刚从我的自定义CSS文件中删除了那些，一切正常。

即。我改变了：

url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")

为：

url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)

整个CSS文件。

Answer 3

我也遇到了这个问题。我把头发拉了出来。但是，是的，JasCav是正确的，您必须将“images”文件夹放在与查询-ui-1.8.9.custom.css（或在我的案例中为jquery-ui-1.8.16.custom.css）文件相同的级别。在此文件夹中，从您的jquery ui下载中复制您的* .png文件。

Answer 4

我有完全相同的问题，最后解决了。

问题来自'images'目录上的权利。我必须使用chmod：

使“其他人”可以浏览目录

chmod o+rx images

我希望这会有所帮助

Answer 5

我遇到了同样的问题。在我的主题名称下创建了一个images目录，并将主题中的所有gif文件和png文件拖到新的images目录中。工作就像一个魅力，没有弄乱路径。

我认为JQuery_ui上的themeroller应用程序没有将图像打包到图像目录中，它应该。

无论如何，将你的路径恢复到现在的状态，然后尝试一下。祝你好运。

顺便说一句，看起来你把你的custom.css放到你的脚本文件夹中，这变得很乱，我只是指向了主题文件夹副本。即。

link href =“../../ Content / themes / humanity / jquery-ui-1.8.13.custom.css”rel =“stylesheet”type =“text / css”

Answer 6

我也犯了这个错误。我已经阅读了上面给出的答案，并且根据我在2012年7月的经验，它们并不完全符合我的经验。我不知道UI自定义ThemeRoller是否已经被更改，因为这个问题是第一次提出的，这可能解释了以前的评论/答案。然而对我来说，这些答案使得需要做的事情变得复杂，因此对我来说是一种困惑。

对我有用的是什么： -

1. 使用ThemeRoller创建自定义主题。
2. 下载主题 - 例如，在项目之外的目录my_Work_Area。
3. 将下载解压缩到my_Work_Area
4. 解压后查看index.html - 检查datepicker样式是否反映了ThemeRoller中测试的样式。如果没有回到ThemeRoller并重复1-3。
5. 将my_Work_Area / js / jquery-ui-1.8.21.custom.min.js复制到项目中的jquery文件夹，例如_public / _jquery / jquery-ui-1.8.21.custom.min.js
6. 如果需要，同样复制jquery-1.7.2.min.js
7. 将my_Work_Area / css / custom-theme / jquery-ui-1.8.21.custom.css复制到项目中的css文件夹，例如_public / _css / jquery-ui-1.8.21.custom.css
8. 将文件夹my_Work_Area / css / custom-theme / images复制到项目中的css文件夹，例如_public / _css / images

9. 根据文档，确保html中包含以下内容

   <link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" />
   <script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
   <script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script>
   

这就是你需要做的一切。

是否适合在css文件夹中包含名为images的文件夹可能需要考虑。更改此文件夹的位置将涉及考虑所使用的路径。

但是如果你只是想让ui“开箱即用”工作，那么上面的工作并不需要做任何复杂的工作。

我希望这会有所帮助。

Answer 7

将带有图标文件的图像文件夹放在.css文件所在的位置。

Answer 8

读这个问题的人， 如果你使用这个日期时间选择器 http://www.malot.fr/bootstrap-datetimepicker/

您添加此选项：bootcssVer：3

 $( ".date" ).datepicker( "option", "changeMonth", true, **"bootcssVer" : 3** );

图标将显示!!!

Answer 9

让我分享一下我案子的解决方案。我的ASP.NET MVC项目具有以下目录结构：

• 内容
  • 的主题
    • 的碱
      • 图片
        • icon1.png
        • icon2.png
      • 的jquery-ui.css
• 其他目录

当我通过Visual Studio在本地运行应用程序时，在jquery-ui.css中我可以使用以下URL引用图标： url（＆＃34; images / icon1.png＆＃34;）。但是当我在Azure服务器上运行应用程序时，我必须使用以下图标引用此图标： url（＆＃34; themes / base / images / icon1.png＆＃34;）。事实证明，真正的＆＃34;工作＆＃34; /＆＃34;当前＆＃34; jquery-ui.css的目录是内容目录。那是因为在cshtml中我使用bundle加载jquery-ui.css，我用以下方式创建：

bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));

似乎VS是超级聪明的＆＃34;并在子目录中查找引用的图像。

解决方案可以在jquery-ui.css文件中使用图像的绝对URL： url（＆＃34; /Content/themes/base/images/icon1.png"）（或者在我的情况下相对于Content目录的正确路径，即url（＆＃34; themes / base / images / icon1.png＆＃34;），如上所述）或创建具有更多嵌套路径的bundle：

bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));

另一个（我的opinoin中更糟糕的）解决方案是使用<link>元素将css文件加载到cshtml中： <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />