定製動態圖像JSF按鈕

JSF-2.0，鑽嘴魚科2.1.19，PrimeFaces 3.4.1定製動態圖像JSF按鈕

我知道，我們可以通過定義自己的CSS類等的圖像添加到按鈕：

.imageButton { 
    background-image:url(#{resource['images/button.png']}); 
}

但問題是，圖片url來自於bean，它對每個用戶都有不同的值，所以給靜態圖片url不起作用。我需要某事。像這樣：

<p:button value="#{loginBean.loggeduser.name}" icon="#{loginBean.loggeduser.picurl}"/>

但正如預期的那樣，由於圖標屬性期望類名不工作。此外，我試圖在按鈕內定義一個p:graphicImage組件，但看起來並不像常規圖標。

應該看起來是這樣的：

profile picture

上圖可以用預先定義的圖標來完成下面的代碼：

<p:commandButton value="sth" icon="ui-icon-star"/>

但正如我所說，我不希望使用靜態圖標。

在此先感謝。

來源

2013-03-14 Ömer Faruk Almalı

你有幾個選擇。我將在下面列出其中兩個。

使用內嵌樣式的按鈕的屬性：內部按鈕

style='background: url(#{resource['images/button.png']}) no-repeat;'

巢圖像（請注意，它不會有一個命令按鈕工作）：
```
<h:button ...> 
    <h:graphicImage .../> 
</h:button> 
```

如果需要，可以使用其他CSS樣式進行文本輸出。

來源

2013-03-14 17:50:18 skuntsel

第一個解決方案甚至沒有用'後臺工作，甚至工作：網址（＃{R esource ['＃{loginBean.loggeduser.picurl}']}）no-repeat;'。第二個不提供的行爲。 – 2013-03-14 18:38:17

如果你有圖像url不使用'＃resources'，因爲你實際上沒有從你的資源中獲取圖像：'style ='background：url（＃{loginBean.loggeduser.picurl}）no-repeat！important;'' – partlov 2013-03-14 18:41:19

不要嵌套EL表達式，它會正常工作:) – skuntsel 2013-03-14 18:42:15

我剛查了primefaces 3.4手動和我確認<p:commanButton>有那麼我想你可以使用的styleClass屬性，

<p:button value="#{loginBean.loggeduser.name}" styleClass="#{loginBean.loggeduser.picStyle}"/>

，我想在我的支持bean定義：

public String picStyle() { 
    if (userA) { 
    //get userA's image 
    return "yourcss"; 
    } else { 
    return "default"; 
    } 
}

我不知道這是最好的方式，但我想這應該style屬性

來源

2013-03-14 17:54:16 berkay

OP不希望/不需要從CSS樣式加載圖像。相反，他希望/需要根據bean的某些屬性（如用戶名）來獲取映像。 – skuntsel 2013-03-14 18:01:34

這就是我想要做的。 – berkay 2013-03-14 18:03:24

定製動態圖像JSF按鈕

回答

相關問題