0

スタイリングに問題があり、h:selectOneListboxアドバイスをいただければ幸いです。

Bean には、値とラベルがファイルから読み込まれ、 を使用して表示されるループがありますh:selectOneListbox。ほとんどのエントリは正常に表示され、選択できますが、いくつかは表示されますが無効になっています。以下は、エントリが初期化され、特定のエントリを無効にするかどうかを指定するフラグが設定されている Bean のコードの一部です。

// private method for initialization

// Initialization code

SelectItem item = new SelectItem();
for (i=0; i<numEls[set]; i++) {
    item = null;
    if (itemLabels[set][i].contains(disabledLabel))
        item = new SelectItem(itemValues[set][i], itemLabels[set][i], "", true); // Disabled
    else
        item = new SelectItem(itemValues[set][i], itemLabels[set][i]);           // Enabled
    if (set == 0)
        items0[i] = item;
    else
        items1[i] = item;

    // Rest of the initialization code

}

public String getElement0() {
    return element[0];
}

public void setElement0(String element) {
    this.element[0] = element;
}

// Other getters and setters, including for element[1] etc.

これは正しく機能し、対応する xhtml コードの一部は次のとおりです。

<h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}"
                    enabledClass="itemEnabled" disabledClass="itemDisabled">
    <f:selectItems value="#{abundance.items0}"/>
</h:selectOneListbox>

また、CSS ファイルには次の 2 行があります。

.itemEnabled {font-family:monospace;}
.itemDisabled {font-family:monospace;}

Firefox を使用すると、アイテムは正しくフォーマットされ、無効なアイテムもフォーマットされますが、グレー表示されます。何らかの理由で、スタイル itemDisabled は itemEnabled とまったく同じですが、グレー表示されています。itemDisabled が省略された場合、グレー表示されますが、等幅ではありません。これは予期されることです。

ただし、Internet Explorer または Chrome を使用すると、テキストは等幅ではなく、有効または無効のテキストでもありません。どうすれば修正できますか？また、の属性にh:selectOneListboxも styleClass が含まれていることに気付きましたが、それは enabledClass および disabledClass とどのように適合しますか?

すべての主要なブラウザーを使用して出力が正しくスタイル設定されるように、誰かがこれについて親切に助けてくれますか?

OK、どうもありがとう。PrimeFaces を使い始めたばかりです。

ただし、これに関連して別の質問があります。有効な入力値の範囲で f:validateDoubleRange を使用し、入力が指定された範囲外の場合は h:message を使用してエラー メッセージを生成しようとしました。問題は、これを行うと、ボタンをクリックしてメニューの内容を更新したときにアクションが起動されないことです。それ以外の場合は機能します。

私のxhtmlコードのより完全なリストは次のとおりです。

<h:selectOneMenu id="abundanceSet0" value="#{abundance.abunSet0}" style="height:25px; width:180px;">
  <f:selectItems value="#{abundance.abunSetMap}"/>
</h:selectOneMenu>
<p:spacer width="37" height="0"/>
<p:commandButton value="Select Set" actionListener="#{abundance.selectSet0}" update="abundances0"/>
<br/><br/>
<h:outputText value="Specify the abundances of individual elements:"/>
<h:panelGrid columns="3" cellpadding="2">
  <h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}"
                          enabledClass="itemEnabled" disabledClass="itemDisabled">
    <f:selectItems value="#{abundance.items0}"/>
  </h:selectOneListbox>
  <h:panelGrid style="text-align:center;">
  <p:commandButton type="button" value="Readme" onclick="openPopup(600,500,'htmlPopup/expAbundances')" styleClass="longButton"/>
    <h:inputText id="update0" size="4" value="#{abundance.updateAbun0}"/>
    <p:commandButton value="Update Abundance" actionListener="#{abundance.update0}"
                     styleClass="longButton" update="abundances0">
      <f:validateDoubleRange minimum="-9.99" maximum="12.00"/>
  </h:panelGrid>

  <ui:include src="abunExplain.xhtml"/>

</h:panelGrid>

アクション豊富.selectSet0 と豊富.update0、および他のものは起動されません。ここにあるファイルは、ページ全体を表示するメイン ファイルに含まれており、そのファイル内のエントリを検証してもアクションが機能しません。ちなみに、ビューに静的テキストを追加するだけの "abunExplain.xhtml" は無視できます。

当分の間、Bean でいくつかのメソッドを使用して入力値をインターセプトし、それらが範囲内の有効な数値であることを確認します。

あなたまたは誰かがこれについていくつかのアイデアを持っているなら、私は最も感謝しています.

4

1 に答える 1

1

これは HTML 固有の問題であり、JSF 固有の問題ではありません。によって生成されるHTML<option>要素は、それ自体ですでに非常に制限された CSS スタイリング オプションを持っています。ブラウザ間で変更できるのはフォントの色だけで、それ以外はすべてブラウザに依存します。<f:selectItem(s)><h:selectOneListbox>

最善の策は、JavaScript を使用して を に<select><option>変換すること<ul><li>です。これは、ほとんどの JSF コンポーネント ライブラリが PrimeFaces を使用して行っていることとまったく同じ<p:selectOneListbox>です。では、<ul><li>CSS のスタイリングを完全に自由に行うことができます。これにはスタンドアロンの jQuery (UI) プラグインを使用することもできます。

于 2013-01-02T12:50:31.343 に答える