Доступ к изображениям с помощью CSS url () в Primefaces - PullRequest
Новая
       4

Доступ к изображениям с помощью CSS url () в Primefaces

6 голосов
/ 24 июля 2010

Это из документов Primefaces:

Значки кнопок

Значок на кнопке отображается с использованием атрибута CSS и изображения. 

<p:commandButton value=”With Icon” image=”disk”/>

<p:commandButton image=”disk”/>

.disk - это простой класс css со свойством background:

.disk {background-image: url ('disk.png') ! Важный;}

Мой вопрос: на что указывает этот url ()?Другими словами, куда я должен поместить свои изображения, чтобы CSS мог получить к ним доступ?

Я пробовал / resources, / resources / img, не повезло.Да, он работал с абсолютным URL (тот, который включает путь контекста), но это делает приложение не переносимым.

Ответы [ 3 ]

11 голосов
/ 01 февраля 2011

Простое решение:

Если вы используете JavaServer Faces 2.0, у вас есть шанс поместить все ресурсы в специально разработанный каталог.Таким образом, вам нужно иметь следующую структуру папок в веб-приложении: 

-rootdir
--resources
---images
----disk.png

И чтобы получить изображение в фоновом режиме css, вы должны напечатать что-то вроде этого:

0 голосов
/ 14 июня 2011

Я на мгновение столкнулся с той же проблемой и считаю, что документация по ней неясна! Это работает для Primefaces commandButton и аналогичных (menuItem, подменю и т. Д.):

То, что я сделал, это:

  • Загрузите тему из библиотеки тем на веб-сайте PrimeFaces (пример: aristo или redmond).
  • Распакуйте архив в ваше веб-приложение resources folder, (в моем случае: root / resources / css / aristo
  • Обратите внимание, что в папке aristo у вас есть: theme.css и папка / images, где индексированное изображение png содержит все значки, используемые темой.
  • Если вы откроете theme.css, вы заметите, что для доступа к значку индексированного изображения вам нужно вызвать два класса: .ui-icon и .ui-icon-theiconyouwant (.ui-icon извлекает индекс png, используя #{resource['primefaces.......png']}, а .ui-icon-agivenicon разграничивает значок по его позиции X & Y (индекс) в изображении png).
  • Теперь выведите файл theme.css в ваше приложение, используя **<h:outputStyleSheet />**. Лучший способ сделать это между тегами вашего шаблона.
  • Так что в вашем xhtml или jsp, сделайте **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

  • Теперь, если вы хотите добавить свои личные изображения для использования с <p:commandButton, создайте классы в theme.css:

    .smiley { background-image: url ("# {resource ['images / smiley.png']}")! важный; / это будет игнорироваться Internet Explorer, если не совместимо / ширина: 16 пикселей; высота: 16 пикселей; }

    Обычно JSF обращается к первой папке изображений, доступной в вашей папке ресурсов.

  • Теперь сделайте: <p:commandButton image="smiley" value="Smile" />
0 голосов
/ 24 июля 2010

Похоже, ваш вопрос в большей степени касается клиентских аспектов, поэтому даже если я не знаю Primefaces, вот ответ на этот вопрос:

Пути CSS относятся к местоположениюгде правило CSS объявлено.

Если это в вашем HTML (в блоке

...