3

ヘルプ パネルを作成する必要があり、顧客は、実際の (機能のない) コンポーネントをヘルプ テキストに埋め込み/インライン化して説明する価値があると判断しました (そして、私はそれに同意します)。

これはp:commandButtonとp:calendarでは問題なく機能p:select*しますが、生成されたすべての div が原因で、すべてのコンポーネントが改行を引き起こしています。

以下はページの例です。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:outputStylesheet library="styles" name="project.css" />
        <h:outputStylesheet library="styles" name="primefaces-global.css" />

        <h:form>

            <h:panelGroup layout="block"
                          styleClass="help-panel">
                <p>
                    The refresh button
                    <p:commandButton icon="ui-icon ui-icon-refresh"
                                     value="(8)"
                                     global="false"
                                     process="@none"
                                     update="@none">
                    </p:commandButton>
                    shows a preview of the number of whatever.
                </p>
                <p>
                    The limit select box
                    <p:selectOneMenu value="#{debugManager.count}"
                                     global="false"
                                     process="@none"
                                     update="@none">
                        <f:selectItem itemValue="#{50}"  itemLabel="50" />
                        <f:selectItem itemValue="#{100}" itemLabel="100" />
                        <f:selectItem itemValue="#{200}" itemLabel="200" />
                        <f:selectItem itemValue="#{500}" itemLabel="500" />
                    </p:selectOneMenu>
                    allows you to limit the number of whatever on this page.
                </p>
            </h:panelGroup>
        </h:form>        

    </h:body>

</html>

これが非常に単純な Bean です。

@Named
@SessionScoped
public class DebugManager implements Serializable
{
    private static final long serialVersionUID = 1L;

    private Long count = Long.valueOf( 100 );

    public Long getCount()
    {
        return this.count;
    }

    public void setCount( Long count )
    {
        this.count = count;
    }
}

これにより、以下が生成されます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- local files saved from browser: -->
        <!--link type="text/css" rel="stylesheet" href="debug-Dateien/theme.css">
        <link type="text/css" rel="stylesheet" href="debug-Dateien/primefaces.css">
        <script type="text/javascript" src="debug-Dateien/jquery.xhtml"></script>
        <script type="text/javascript" src="debug-Dateien/primefaces.xhtml"></script-->
        <title>
            D E B U G
        </title>
    </head>
    <body>
        <form id="j_idt6" name="j_idt6" method="post" action="/cmc-compliance/debug.xhtml" enctype="application/x-www-form-urlencoded">
        <input type="hidden" name="j_idt6" value="j_idt6" />
        <div class="help-panel">
            <p>
                The refresh button
                <button id="j_idt6:j_idt9" name="j_idt6:j_idt9" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PrimeFaces.ab({source:'j_idt6:j_idt9',process:'@none',update:'@none',global:false});return false;" type="submit"><span class="ui-button-icon-left ui-icon ui-icon ui-icon-refresh"></span><span class="ui-button-text">(8)</span></button><script id="j_idt6:j_idt9_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_j_idt6_j_idt9',{id:'j_idt6:j_idt9'});</script>
                shows a preview of the number of whatever.
            </p>
            <p>
                The limit select box
                <div id="j_idt6:j_idt11" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix">
                    <div class="ui-helper-hidden-accessible">
                        <select id="j_idt6:j_idt11_input" name="j_idt6:j_idt11_input">
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                        </select>
                    </div>
                    <label id="j_idt6:j_idt11_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
                    <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
                        <span class="ui-icon ui-icon-triangle-1-s"></span>
                    </div>
                    <div id="j_idt6:j_idt11_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
                        <div class="ui-selectonemenu-items-wrapper" style="height:auto">
                            <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">50</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">100</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">200</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">500</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <script id="j_idt6:j_idt11_s" type="text/javascript">$(function(){PrimeFaces.cw('SelectOneMenu','widget_j_idt6_j_idt11',{id:'j_idt6:j_idt11',effect:'fade'});});</script>
                allows you to limit the number of whatever on this page.
            </p>
        </div>
        <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="601711705828338698:-3840718314813237618" autocomplete="off" />
        </form>
    </body>

</html>

結果は次のとおりです。

ここに画像の説明を入力

div をスパンで置き換えようとしましたが、選択が文字化けして機能しなくなります。

style="display: inline-block !important;"div への追加は、元の場合と同じです。

            <div id="j_idt6:j_idt11" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="display: inline-block !important;">
                <div class="ui-helper-hidden-accessible" style="display: inline-block !important;">
                    <select id="j_idt6:j_idt11_input" name="j_idt6:j_idt11_input">
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                    </select>
                </div>
                <label id="j_idt6:j_idt11_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
                <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right" style="display: inline-block !important;">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                </div>
                <div id="j_idt6:j_idt11_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow" style="display: inline-block !important;">
                    <div class="ui-selectonemenu-items-wrapper" style="height:auto" style="display: inline-block !important;">
                        <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style="display: inline-block !important;">
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">50</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">100</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">200</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">500</li>
                        </ul>
                    </div>
                </div>
            </div>

Q :

p:select*「改行」を実行しないようにする方法はありますか?

PS: Mojarra 2.1.14 の PrimeFaces バージョンは 3.4.2 です。

4

1 に答える 1

0

<p:selectOneMenu>不要な div が大量に生成されているようです。使用しないでください<h:selectOneMenu>。

.ui-selectonemenu-items-wrapper,.ui-selectonemenu-panel {display:inline}または、スタイルを追加できます。

于 2013-02-27T21:55:22.790 に答える