如何通過點擊標題使p：面板可摺疊？

我正在使用PrimeFaces 3.4可摺疊面板。實際解決方案的問題在於通過點擊右側的小按鈕來切換面板。它不是非常符合人體工程學，用戶希望通過點擊標頭上的任何位置來切換。如何通過點擊標題使p：面板可摺疊？

這就是我想要實現的：通過點擊標題觸發切換並移除切換按鈕。這是我寫的東西：

$('.ui-panel-titlebar').each(function(){ 
    var header = $(this); 
    var widgetId = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, ''); 
    header.css('cursor', 'pointer'); 
    var toggler = header.find('a[id$=_toggler]'); 
    toggler.remove(); 
    header.click(function(){ 
     window[widgetId].toggle(); 
    }); 
});

但我不喜歡這樣的解決方案，因爲首先我猜的JavaScript小部件編號，和第二，我去除DOM樹渲染的切換按鈕和我寧願它不會被渲染。

有沒有辦法以更優雅的方式達到相同的效果，而無需編寫太多的代碼（因此，無需重寫p:panel）？作爲解決方案，使用基於與PrimeFaces相同的許可證的擴展（商業友好）是可以接受的。

來源

2013-02-15 Danubian Sailor

p:accordionPanel是一個可摺疊面板，可通過點擊標題上的任意位置進行切換。

來源

2013-02-16 10:29:40

AccordionPanel是內容切換器，所以它與我的完全不同。 – 2013-03-06 14:48:40

我有同樣的問題，很不幸找不到PrimeFaces解決方案。我寫了一個自定義的JQuery腳本，模擬點擊標題欄上的切換按鈕。

$(document).on("click", ".ui-panel:has(.ui-panel-titlebar-icon) .ui-panel-titlebar", function(e) { 
    console.log("click:"); 
    if (e.srcElement != null) { // avoid infinite loop 
     $(this).find("a.ui-panel-titlebar-icon").click(); 
    } 
});

感謝on，這也適用於任何Ajax更新後。我認爲應該很容易將此行爲設置爲給定類別的面板（例如panel-header-click）。

我只測試了Chrome上的代碼。

來源

2013-09-19 12:18:38 LaurentG

在primefaces 5.2是

$(document).on("click", ".ui-panel:has(.ui-panel-titlebar-icon) .ui-panel-titlebar", function (e) { 
    console.log(e.target.className); 
    if (e.target.className === "ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all" 
      || e.target.className === "ui-panel-title"){ 
     $(this).find("a.ui-panel-titlebar-icon").click(); 
    } 
});

來源

2015-12-30 15:51:44 GenomaTeam

我想有面板任選是通過點擊標頭togglable，並且還具有在面板的左側的圖標。我選擇create a custom tag這樣做。

my.taglib.xml：

<?xml version="1.0" encoding="UTF-8"?> 
<facelet-taglib xmlns="http://java.sun.com/xml/ns/javaee" 
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd" 
       version="2.0"> 
    <namespace>http://my.com/jsf/facelets</namespace> 
    <tag> 
    <tag-name>togglePanel</tag-name> 
    <source>tags/togglePanel.xhtml</source> 
    <attribute> 
     <name>header</name> 
     <required>true</required> 
     <type>java.lang.String</type> 
    </attribute> 
    <attribute> 
     <name>collapsed</name> 
     <required>false</required> 
     <type>boolean</type> 
    </attribute> 
    </tag> 
</facelet-taglib>

togglePanel.xhtml：

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
       xmlns:c="http://java.sun.com/jsp/jstl/core" 
       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"> 

    <c:set var="collapsed" value="#{not empty collapsed and collapsed}" /> 

    <p:panel toggleable="true" collapsed="#{collapsed}" class="myToggleable"> 
    <f:facet name="header"> 
     <a href="#" onclick="document.getElementById(this.parentNode.parentNode.id.replace('_header', '_toggler')).click()"><h:outputText 
      value="#{header}"/></a> 
    </f:facet> 
    <ui:insert /> 
    </p:panel> 

</ui:composition>

樣式表：

.ui-panel.myToggleable .ui-panel-titlebar { 
    position: relative; padding: .5em 1em .3em 2.5em; 
} 
.ui-panel.myToggleable .ui-panel-title, 
.ui-panel.myToggleable .ui-panel-title a { 
    display: block; text-decoration: none; 
} 
.ui-panel.myToggleable .ui-panel-titlebar-icon, 
.ui-panel.myToggleable .ui-panel-titlebar-icon:hover { 
    position: absolute; left: 10px; top: 10px; margin: 0; 
}

現在你可以在你的XHTML文件，使用這樣的：

<my:togglePanel header="Header" collapsed="false"> 
    ... 
</my:togglePanel>

您應該添加以下命名空間：xmlns:my="http://my.com/jsf/facelets"。

這已經使用PrimeFaces 6.0進行了測試。

來源

2017-03-29 10:45:07

如何通過點擊標題使p：面板可摺疊？

回答

相關問題