Как обернуть apex: столбцы в div для использования в slideToggle()
Я пытаюсь привязать функцию jQuery slideToggle() к строке данных в вершине: pageBlockTable.
Я отображаю некоторую информацию в таблице и хочу, чтобы, если кто-то нажимал на какую-либо строку, некоторая дополнительная информация, относящаяся к этому контакту, отображалась на слайдере, а остальные строки перемещались вниз. Когда он щелкает снова, ползунок перемещается вверх, и все возвращается к нормальной жизни.
Если я не ошибаюсь, я думаю, что мне нужно связать элементы строки (apex: columns) в одном 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, поэтому любая помощь будет оценена.
Бест, Анкит
2 ответа
<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>
Если я правильно понимаю ваш код, будет несколько <div id="rows"> и несколько дел <div id="rowInfo" >, Пожалуйста, дайте мне знать, если мое предположение неверно.
в идеале должен быть только один элемент с 1 идентификатором, а не несколько. это может быть причиной неожиданного поведения. Вы можете изменить это на <div class="rows"> а также <div id="rowInfo" > соответственно.
и попробовать
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j(".rows").click(function(){
$j(".rowInfo").slideToggle("slow");
});
});
</script>
если это также не сработает.. проверьте консоль javascript на наличие ошибок.. также позвольте мне знать, если она не работает в любом браузере perticular или все?