헤더를 클릭하여 p : 접을 수있는 패널을 만드는 방법은 무엇입니까?

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

하지만, 그 솔루션을 좋아하지 않아 처음에는 자바 스크립트 위젯 이드 같은데요, 둘째, 나는이 DOM 트리에서 토글 버튼을 렌더링 제거하고 있어요 때문에 나는 그것을 전혀 렌더링하지 않는 것이 좋습니다.

너무 많은 코드를 작성하지 않고도 더 좋은 방법으로 동일한 효과를 얻을 수있는 방법이 있습니까 (p:panel을 다시 작성하지 않고)? PrimeFaces (상업용)와 동일한 라이센스를 기반으로하는 확장을 사용하는 것이 해결책으로 받아 들여질 수 있습니다.

Answer 1

p:accordionPanel은 접을 수있는 패널로 헤더의 아무 곳이나 클릭하여 전환 할 수 있습니다.

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)의 패널에만이 동작을 설정하는 것이 쉬워야한다고 생각합니다.

크롬에서만 코드를 테스트했습니다. primefaces 5.2에서

Answer 3

내가 선택적 헤더를 클릭하여 togglable있는 패널을 가지고, 또한 패널의 왼쪽에있는 아이콘이하고 싶어

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

Answer 4

입니다. 나는 이렇게하기 위해 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을 사용하여 테스트되었습니다.