3

我正在使用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:panel）？使用基于与 PrimeFaces（商业友好）相同许可证的扩展作为解决方案是可以接受的。

4

5 回答 5

5

toggleableHeader自 PrimeFaces 6.2 起，通过新的-attribute支持此行为：

<p:panel header="This is my header text"
         toggleable="true"
         toggleableHeader="true">
  The content of the panel.
</p:panel>
于 2018-08-14T13:04:58.833 回答
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 上测试了代码。

于 2013-09-19T12:18:38.613 回答
2

我希望有可以通过单击标题来选择切换的面板，并且还希望在面板的左侧有图标。我选择创建一个自定义标签来做到这一点。

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-29T10:45:07.763 回答
1

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

于 2013-02-16T10:29:40.513 回答
1

在 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-30T15:51:44.237 回答