0

jquery slideToggle() 関数を apex:pageBlockTable のデータ行にバインドしようとしています。

テーブルに情報を表示していて、誰かが任意の行をクリックすると、その連絡先に関連する追加情報がスライダーに表示され、残りの行が下に移動するようにします。もう一度クリックすると、スライダーが上に移動し、すべてが正常に戻ります。

私が間違っていなければ、1 つの div に行要素 (apex:columns) をバインドし、もう 1 つの div にスライダーの情報をバインドする必要があると思います。しかし、どういうわけかこれは機能していません。

コードは次のとおりです。

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#rowInfo { 
    width:50px;
    display:none; 
}
 </style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$j = jQuery.noConflict();

   $j(document).ready(function(){
      $j("#rows").click(function(){
    $j("#rowInfo").slideToggle("slow");
  });
});

</script>

</head>
<body>

<apex:pageMessages />
    <div id='backtoDiv' style="height:20px;">
        <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink>
    </div>

<apex:pageBlock title="Suche Kontakte"> 
    <apex:pageBlockSection columns="1">
    <apex:form style="float:right" >
        <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" />
    </apex:form>
    </apex:pageBlockSection>
    <apex:pageBlockTable value="{!newList}" var="contacts" id="contactsTable">

       <div id="rows">
        <apex:column > 
            <apex:image url="{!contacts.photoURL__c}" /> 
        </apex:column>


        <apex:column headerValue="Name"> {!contacts.displayName__c}</apex:column>


        <apex:column headerValue="Firma"> {!contacts.firma__c}</apex:column>
        <apex:column headerValue="Title" > {!contacts.title__c}</apex:column>
      </div>



     <div id="rowInfo" >
         <p>
            This is the paragraph to end all paragraphs.  You
            should feel <em>lucky</em> to have seen such a paragraph in
            your life.  Congratulations!
         </p>
     </div>  
     </apex:pageBlockTable>
</apex:pageBlock>              
</body>



</apex:page>

私は Visualforce と JS を理解しようとしているので、助けていただければ幸いです。

最高、アンキット

4

2 に答える 2

0 
 <apex:page standardController="RequestActivity__c" recordSetvar="RequestActivity" extensions="MDFClaimForRequestActivity" id="thePage" showHeader="true">
    <apex:includeScript value="{!$Resource.min}"/>

            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-1.9.1.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.js')}"/>
            <apex:stylesheet value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.css')}"/>

    <style>
    .pgTdClass.active
    {
      background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/minus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    } 
    .pgTdClass
    {
    background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/plus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    }
    </style>

    <apex:form id="pgFrmId">
        <apex:pageBlock title="Activities" id="pgBlkId">
        <table width="100%" border="0" cellspacing="0" cellpadding="5" class="myAccordion" id="pgTbleId">
        <thead> 
            <tr>
            <td class="tableHeader"></td>
                <td class="tableHeader">Activity Name</td>      
                <td class="tableHeader">Activity Description</td>
                <td class="tableHeader">Status</td>
                <td class="tableHeader">Requested HP Investment</td>
                <td class="tableHeader">Claim Status</td>
            </tr>
        </thead>
         <tbody>
            <apex:repeat value="{!fWrapper}" var="activity">
                <tr class="pgTrId" style="border-left: 5px solid #000;" >
                    <td class="pgTdClass" onclick="getActivityDetails('{!activity.reqActivity}');">
                         <span class="pgImgClas"  id="{!activity.reqActivity}" ></span>
                    </td>

                    <td class="tableContent" id="aname">{!activity.reqActivity.Name}</td>
                    <td class="tableContent">{!activity.reqActivity.Activity_Descrpition__c}</td>
                    <td class="tableContent">{!activity.reqActivity.Status__c}</td>
                    <td class="tableContent">{!activity.reqActivity.RequestedHPInvestment__c}</td>
                    <td class="tableContent">{!activity.reqActivity.ClaimStatusTraffic__c}</td>
                </tr>
                <tr class="accordion" style="border-left: 5px solid #000; background-color:#fff;" >
                 <td colspan="6">
                 <apex:outputPanel id="actDetailPanel">
                    <h2 id="section1">Activity Details</h2>
                    <p>Hi youe data goes here...</p>
            </apex:outputPanel>
           </td>
           </tr>
            </apex:repeat>
        </tbody>
    </table>
    </apex:pageBlock>
    </apex:form>
    <script>
    jQuery(document).ready(function ($) 
    {
        var divs=$('.accordion').hide(); 
        var h2s=$('.pgTdClass').click(function () 
        {
           h2s.not(this).removeClass('active')
           $(this).toggleClass('active')
           var parentEle= $(this).parent();
           divs.not(parentEle.next()).slideUp()
           parentEle.next().slideToggle()
           return false; 
        });
    });    

    </script>
    </apex:page>
于 2013-09-23T07:20:13.497 に答える