3
我們需要編寫幫助面板，並且客戶決定將實際（無功能）組件嵌入/內嵌到幫助文本中是值得的，因爲我們將其解釋爲（和I同意）。PrimeFaces selectOneMenu不可轉換爲純文本（導致換行符）
這對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"> </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>
它導致：
我試圖用span代替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"> </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：PrimeFaces版本是Mojarra 2.1.14上的3.4.2。
這個BTW對於其他用例也是可取的，因爲這迫使我們多次在h：panelGroup上使用panelGrid。 – Kawu 2013-02-26 14:49:17