如何通过点击标题使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：面板可折叠？

回答

相关问题