Question

我用来输入地址字段。默认设置为active-index =＆＃34; -1＆＃34;因此当页面加载时面板将被关闭。用户输入详细信息后，我想要面板区域，这意味着我希望手风琴面板在按钮上关闭（保存）click.but我尝试了很多使用java脚本但我无法实现，这里是页面

<h:body>
    <ui:composition template="/WEB-INF/templates/layout.xhtml">
        <ui:define name="content">
        <h:form id="quotesForm">
                <div class="headerbg">
                    <div id="innerheaderbg">
                        <div id="iconarea">
                            <img src="#{request.contextPath}/images/headerimages/productlist.png" />
                        </div>
                        <div id="headertextarea">
                            <p class="headingtext">New Quote</p>
                            <p id="breadCrumbtext">Order &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;Quote List &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;New Quote
                            </p>
                        </div>

                    </div>
                </div>
            <p:growl id="msgs" />


             <div class="widget widget-table action-table">
                <div class="widget-header" style="text-align:center;padding-top: 52px">
                    <h3>Create New Quote</h3>
                </div>  

                <div class="widget-content" style="background-color: #DAEDF4;height: 600px;"  >
                    <div id="calender" style="margin-left: 52px;margin-top: -26px">
                        <table>
                            <tr>
                            <td>
                            <p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
                            </td>
                            <td>
                            <p:calendar id="popup" showOn="button" display="inline" >
                                <p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
                            </p:calendar>
                            </td>
                            </tr>
                        </table>
                        <p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
                    </div>

                <div id="company">
                    <table align="right" style="margin-right: 52px">
                        <thead>
                            <tr>
                            <th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
                            </tr>                   
                        </thead>
                        <tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
                    </table>
                </div>
                <h:form id="addForm">
                 <p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
                    <p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4"  >
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Name" />  
                            <h:inputText value="#{quotesBean.name}"/>

                            <h:outputLabel value="Street" />  
                            <h:inputText value="#{quotesBean.street}"/>  

                            <h:outputLabel value="City" />  
                            <h:inputText value="#{quotesBean.city}"/>  

                            <h:outputLabel value="ZIP" />  
                            <h:inputText value="#{quotesBean.zip}"/>  
                        </h:panelGrid>
                        <p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
                    </p:tab>
                </p:accordionPanel>
                </h:form>
                </div>  
            </div>
            <script type="text/javascript">
            var link = document.getElementById('quotesForm:popup_input');
            link.style.display = 'none'; 

            function closeAccordianPanel()
            {
                var panel = document.getElementById('quotesForm:addForm:accordion');
                link.style.activeIndex = '-1'; 
                /* PF('widget_accordion').unselect(0); */
            }

            </script>
            </h:form>
            <br></br>
        </ui:define>
    </ui:composition>
</h:body>
</html>

注意：我在这里尝试的Java脚本对我来说没什么用，我想在点击按钮时关闭手风琴面板。

Answer 1

我打赌你在控制台中有javascript错误...（PF('quotesForm:addForm:accordion').hide();错了，它应该是PF('acc').hide();如果它完全有效（在PrimeFaces文档中没有任何关系）。为什么关闭如果您执行＆＃39; ajax =＆＃34; false＆＃34;＆＃39;并通过javascript发送ui组件，并将单击事件发送到要切换的选项卡，但更好的方法是使用官方客户端api：PF('acc').unselect(...);

啊......你在命令按钮下面还有其他代码...但是有一个错误的widgetVar值......它被注释掉了......而另一部分什么也没做......

Answer 2

取消选择（标签索引）方法只隐藏p：标签。

如果你想隐藏你的accordionPanel，你可以使用渲染属性。

Answer 3

以下是小组：

<p:panel id="toggleable" header="Toggleable" toggleable="true" toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500" widgetVar="panel" class="left-menu-panel" > </p:panel>在此输入代码

和折叠面板的按钮或commandLink

<p:commandLink styleClass="open-left-menu-button" onclick="PF('panel').toggle()"> </p:commandLink>

您可以使用toggleOrientation =“horizontal / vertical”设置它。

normal panel - not collapsed

collapsed

如何在按钮点击时关闭p：accordionPanel

3 个答案: