Question

我正在使用 PrimeFaces 3.4 可折叠面板。实际解决方案的问题是通过点击右侧的小按钮来切换面板。它不是非常符合人体工程学，用户可以通过单击标题上的任何位置来进行切换。

这是我想要实现的：通过单击标题触发切换并删除切换按钮。这就是我写的：

$('.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小部件Id，其次，我正在从DOM树中删除渲染的切换按钮，我宁愿它根本不渲染。 / p>

有没有办法以更优雅的方式实现相同的效果而无需编写太多代码（因此，不重写p:panel）？使用与PrimeFaces相同的许可证（商业友好型）作为解决方案。

Answer 1

从PrimeFaces 6.2开始，通过新的toggleableHeader属性支持此行为：

schStartTime = DayAdjust(CDbl(schStart))

Answer 2

我遇到了同样的问题，遗憾的是无法找到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上的代码。

Answer 3

我希望通过单击标题可以选择可切换的面板，并且还可以在面板左侧显示图标。我选择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进行测试。

Answer 4

p:accordionPanel是一个可折叠的面板，可以通过点击标题上的任意位置来切换。

Answer 5

在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();
    }
});

如何通过单击标题使p：panel可折叠？

5 个答案: