Как обернуть вершину: столбцы в div для использования в slideToggle()

Я пытаюсь использовать функцию jquery slideToggle(), привязанную к строке данных в вершине: pageBlockTable.Как обернуть вершину: столбцы в div для использования в slideToggle()

Я показываю некоторую информацию в таблице и хочу, чтобы, если кто-то нажимает на какую-либо строку, в слайдере отображается дополнительная информация, связанная с этим контактом, а остальные строки перемещаются вниз. Когда он снова нажимает, слайдер движется вверх, и все возвращается к норме.

Если я не ошибаюсь, мне нужно связать элементы строки (вершина: столбцы) в одном 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, так что любая помощь будет оценена.

Бест, Анкит

источник

2013-05-14 user090

Вы можете показать jsfiddle.net или указать причину проблемы? –

Вот пример того, что я хочу сделать. Я хочу иметь такую же функциональность, связанную с рядом таблицы Salesforce Apex. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle – user090

ОК, так что проблема .. Я думаю, что демо работает правильно .. вы также можете показать демо на jsFiddle.net, если хотите :) –

Если я понимаю ваш код правильно будет несколько ДИВ из <div id="rows"> и несколько ДИВ из <div id="rowInfo" >. Пожалуйста, дайте мне знать, если мое предположение неверно.

В идеале должен быть только один элемент из 1 id не кратным. что может вызвать неожиданное поведение. вы можете изменить его на <div class="rows"> и <div id="rowInfo" > соответственно.

и попробовать

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

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

</script>

если это также оленья кожа работа вне .. проверить консоль яваскрипта за любые ошибки .. тоже дайте мне knwo, если его неудачу на любом perticular браузере или все?

источник

2013-05-15 05:22:00

<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-23 07:20:13

Привет, я сделал эту функциональность, используя тег. Попробуй это. надеюсь, это поможет вам .. :) –

Как обернуть вершину: столбцы в div для использования в slideToggle()

ответ

Смежные вопросы