Вопросы Теги

Как я добавляю фоновые изображения в приложении JSF с помощью richfaces и CSS?

Я использую этого помощника: 

module ApplicationHelper
  def glyph(*names)
   content_tag :i, nil, class: names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end
end

Пример: 

glyph(:share_alt)
=> <i class="icon-share-alt"></i>

и 

glyph(:lock, :white)
=> <i class="icon-lock icon-white"></i>
10
задан user125157 18 June 2009 в 14:44
поделиться

4 ответа

Предполагая, что рассматриваемый элемент получает class = "rich- ddmenu-label ", проблема, скорее всего, заключается в пути к фоновому изображению.

Путь указывается относительно того, где расположен CSS. Если он находится во внешнем файле, он должен относиться к нему, например: 

/css/styles.css
/images/the_image.gif

CSS должен быть: 

background-image: url("../images/the_image.gif");

Если CSS встроен на страницу HTML, он будет относиться к текущему пути. Поэтому, если страница расположена по адресу http: // server / path / to / page , она будет искать изображение по адресу http: // server / path / to / page / images / the_image .gif , когда вы, вероятно, имели в виду http: //server/images/the_image.gif .

Если это не ответ, отправьте сгенерированный HTML-код.

5
ответ дан 3 December 2019 в 13:12
поделиться

Вы следуете примеру на демо-сайте Richfaces ? т.е. используйте фасет и поместите изображение и текст внутри охватывающего элемента (например, диапазона или div) 

<rich:dropDownMenu>
    <f:facet name="label"> 
        <h:panelGroup>
            <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
            <h:outputText value="File"/>
        </h:panelGroup>
    </f:facet>
    <rich:menuItem submitMode="ajax" value="New"
        action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif">
    </rich:menuItem>
    ...
</rich:dropDownMenu>
2
ответ дан 3 December 2019 в 13:12
поделиться

У меня была такая же проблема с JSF 2.0 . Мне пришлось использовать css, и решение с относительным путем для меня тоже не сработало (например, Чогхер опубликовал).

В своей книге я прочитал, что , когда вы используете Facelets как VDL (язык декларации представления), можно использовать выражения даже на простой HTML-странице . Так что у меня возникла идея поместить EL прямо в мой CSS. Примечание: мне не пришлось менять имя файла или что-то еще.

Вот что я сделал. но сначала моя файловая структура

  • /resources/common/overlay.xhtml -> это включает следующий css (это составной компонент)
  • /resources/common/overlay.css
  • /resources/images/logo.png

Теперь идет CSS 

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
}

, в данном случае ресурс неявный объект из JSF 2, изображений - это библиотека , в которой должен искать JSF (jsf ожидает, что все библиотеки / файлы в ресурсах, по крайней мере, ResourceHandler по умолчанию) и затем название ресурса.

Для более глубоких структур поможет 

#{resource['images/folder:logo.png']}

Надежда;)

66
ответ дан 3 December 2019 в 13:12
поделиться

Моя структура папок выглядит следующим образом:

веб-страницы-> ресурсы-> css // css страницы

веб-страницы-> ресурсы-> pics // изображения

веб-страницы // файлы xhtml

Попробуйте следующее: 

background-image :url("../pics/logo.gif");

.. перемещает вас на один уровень папки вверх / pics перемещает вас в каталог pics / logo.gif дает вам файл

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

2
ответ дан 3 December 2019 в 13:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: