it-swarm.com.ru

Предыдущие / следующие значки не отображаются в настраиваемой теме jquery datepicker

Я реализовал jQuery DatePicker в своем проекте VS2010, и он отлично работает с одной небольшой проблемой. Когда я реализовал собственную тему, я потерял предыдущую и следующую иконки (для перемещения по месяцам).

Вот изображение:

preview

Вот ссылки на библиотеку 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); }

Я изменил путь, чтобы он указывал на файлы. Не уверен, что мне не хватает.

Любая помощь будет принята с благодарностью.

Благодарю.

9
nycdan

Вы уверены, что ваши пути указаны правильно (AKA, вы видите значки jQuery UI в других местах на вашем сайте)? Это первое, что я бы проверил ... особенно потому, что вы изменили путь. Возможно, вы случайно что-то напортачили.

Обновление

Я думаю, вам нужно исправить ваши пути - я не думаю, что они указывают правильно. Из того, что я вижу, они должны быть связаны с вашим файлом .custom.css. Так, например, мой файл jquery-ui-1.8.9.custom.css находится в моей папке Content. На мои состояния и изображения ссылаются так:

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

Поэтому я должен разместить папку с изображениями на том же уровне, что и jquery-ui-1.8.9.custom.css, и поместить все изображения в эту папку. Попробуйте и посмотрите, решит ли это проблему для вас.

8
JasCav

Для меня проблема была в том, что Themeroller добавлял двойные кавычки вокруг путей к изображениям. Я просто удалил их из своего CSS-файла, и все заработало.

я изменил:

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

чтобы:

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

по всему файлу CSS.

4
BarthesSimpson

У меня тоже была эта проблема. Я вырывал свои волосы. Но да, JasCav верен, вы должны поместить папку "images" на том же уровне, что и файл query-ui-1.8.9.custom.css (или в моем случае jquery-ui-1.8.16.custom.css) , И внутри этой папки скопируйте ваши * .png файлы из вашей загрузки jquery ui.

3
Carlton Thorne

У меня была точно такая же проблема, и я наконец решил ее.

Проблема исходила из прав на каталог 'images'. Мне пришлось сделать каталог доступным для просмотра для других с помощью chmod:

chmod o+rx images

Надеюсь, это поможет

1
Jack Barr

Поместите папку изображений с файлами значков в то место, где существует файл .css.

0
GGSoft

У меня такая же проблема. Создал каталог изображений под моим именем темы и перетащил все gif-файлы и png-файлы из темы в новый каталог изображений. работал как шарм, без путаницы.

Я думаю, что приложение themeroller в JQuery_ui не упаковывает изображения в каталог изображений, и оно должно.

В любом случае, верните свой путь обратно в прежнее состояние и попробуйте. Удачи.

Между прочим, похоже, что вы помещаете свой custom.css в вашу папку скриптов, которая становится грязной, я только что указал на копию папки с темами. то есть.

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

0
Matthew_NorthernNv

Позвольте мне поделиться решением для моего случая. Мой проект ASP.NET MVC имеет следующую структуру каталогов:

  • содержание
    • темы
      • основание
        • изображения
          • icon1.png
          • icon2.png
        • jQuery-ui.css
  • Другие каталоги

Когда я запускаю приложение локально через Visual Studio, в jquery-ui.css я могу ссылаться на значки, используя следующий URL: rl ("images/icon1.png"). Но когда я запускаю приложение на сервере Azure, я должен ссылаться на этот значок с помощью: rl ("themes/base/images/icon1.png"). Оказалось, что настоящий "рабочий"/"текущий" каталог для jquery-ui.css - это Content каталог. Это потому, что в cshtml я загружаю jquery-ui.css, используя пакет, который я создаю следующим образом:

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

Похоже, что VS "суперинтеллектуальный" и ищет упомянутые изображения также внутри подкаталогов.

Решением может быть использование внутри файла jquery-ui.css абсолютного URL-адреса к изображениям: rl ("/ Content/themes/base/images/icon1.png") (или правильный путь относительно каталог содержимого в моем случае, то есть url ("themes/base/images/icon1.png"), как я уже упоминал выше) или для создания пакета с более вложенным путем:

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

Другое (хуже в моем opinoin) решение - загрузить файл css в cshtml, используя элемент <link>: <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />

0
Darko

Я тоже не справился с этим. Я прочитал ответы, приведенные выше, и они не соответствуют 100% моего опыта на июль 2012 года. Я не знаю, был ли вообще изменен пользовательский интерфейс ThemeRoller с тех пор, как этот вопрос был впервые задан, что может объяснить предыдущие комментарии/ответы , Однако для меня эти ответы слишком усложняют то, что должно быть сделано, и поэтому для меня это была путаница.

Что сработало для меня:

  1. Используйте ThemeRoller, чтобы создать собственную тему.
  2. Загрузите тему - например, в каталог my_Work_Area вне вашего проекта.
  3. Разархивируйте загрузку на my_Work_Area
  4. После распаковки просмотрите index.html - убедитесь, что стиль указателя даты соответствует стилю, протестированному в 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>
    

Это все, что вам нужно сделать.

Может быть, стоит подумать о том, уместно ли иметь папку с названием images внутри вашей папки css. Изменение местоположения этой папки потребует рассмотрения используемых путей.

Но если вы просто хотите, чтобы пользовательский интерфейс работал "из коробки", вышеприведенное работает без необходимости делать что-либо сложное.

Я надеюсь, что это помогает.

0
codepuppy

кто читает этот вопрос, если вы используете этот сборщик дат http://www.malot.fr/bootstrap-datetimepicker/

Вы добавляете эту опцию: bootcssVer: 3

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

Значок покажет !!!

0
Hoàng Vũ Tgtt