JQuery datepicker prev и следующие кнопки не отображаются, как указывать на изображение папки темы в css

Я использовал jQuery ui datepicker для успешного добавления элемента управления календарем в свое текстовое поле, но предыдущие и следующие кнопки не видны, хотя содержащий тег работает функционально при нажатии

Как я могу изменить это, чтобы показать значки, показанные на http://jqueryui.com/datepicker/, когда эти изображения найдены в моем веб-пакете в. \Content\theme\base\images, а не местоположения, показанные ниже

.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

Мне нужно вызвать изображение внутри css аналогично тому, как образы вызывается из моего кода С#? Как в:

"@Url.Content("~/Content/theme/base/images/ui-icons_222222_256x240.png")"

Ответы

Ответ 1

Убедитесь, что ваш jquery-ui.min.css указывает на правильный файл для изображений. Консоль должна показывать ошибку при попытке загрузить значки.

Например, если это местоположение вашего файла CSS: http://example.com/css/jquery-ui.min.css, файл значка должен находиться в http://example.com/css/images/ui-icons_222222_256x240.png. Ссылка в файле CSS относится к файлу CSS, а не к файлу HTML, загружающему его.

Ответ 2

Ты почти там.

Просто убедитесь, что вы изменили свой URL и добавили "! important" в конце строки.

Это позволит вам добавить любое изображение, которое вы хотите.

    .ui-widget-content .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")      
    !important;}
    .ui-widget-header .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")   
    !important;}

Надеюсь, это сработает для вас.

Ответ 3

Я заметил из сообщения об ошибке, что сайт просматривал:

http://site/Content/images/image.png

Я не совсем уверен, почему, как от Mooseman, ответьте:

Ссылка в файле CSS относится к файлу CSS, а не к файлу HTML, загружающему его.

Кажется, что ссылка была относительной от site.css (которая содержится в Content), а не Jquery-ui.mincss, и поэтому она явно не могла найти png.

После изменения путей в JQuery-ui.min.css до

themes/base/images/image.png

Теперь он отлично работает.

Ответ 4

Это потому, что вы миссия изображения ui-icons_444444_256x240.png. Вы можете скачать это изображение отсюда по ссылке.

Теперь создайте папку с именем - images и добавьте images этой папки в эту папку.

пример

http://example.com/css/jquery-ui.min.css
http://example.com/css/images/ui-icons_444444_256x240.png

Ответ 5

Для тех, кто ищет самый простой ответ,

  1. Зайдите на сайт JQuery UI и скачайте файл с настройками по умолчанию.
  2. Распакуйте файл.
  3. Скопируйте папку "images" и поместите ее в свой проект в ту же папку, где находится jQuery ui css, и это решит проблему.

Кредиты Gullele Corner, я просто обновил процедуру после изменения структуры папок (май 2019).