[英]How to add animation to this javascript show/hide function?
我正在使用 Javascript 显示/隐藏主 gridview 内的嵌套 gridview (显示一些细节),如下所示:
Gridview:
<asp:GridView ID="GridView1" runat="server" DataKeyNames="ResID"
onrowdatabound="GridView1_RowDataBound" DataSourceID="SqlDataSource1" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Details</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Contact" />
<asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response"/>
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan="100%" style="padding-left: 25px;padding-top: 5px" >
<div id="div<%# Eval("ResID") %>" style="display:none; left: 30px;" >
<!--nested Grid:-->
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="ResID" >
<Columns>
<asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false"/>
<asp:BoundField DataField="iContact" HeaderText="Contact" HeaderStyle-Font-Bold="false" />
<asp:BoundField DataField="iComments" HeaderText="Comments" HeaderStyle-Font-Bold="false" />
</Columns>
</asp:GridView>
<p></p>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
和 Javascript:
<script type="text/javascript">
function switchViews(obj, row) {
var div = document.getElementById(obj);
if (div.style.display == "none")
{
div.style.display = "inline";
}
else
{
div.style.display = "none";
}
}
</script>
所以,这很好用,但是需要什么代码才能将 animation 添加到显示/隐藏中以获得更平滑的效果? 谢谢你!
jQuery 是你的朋友: http://api.jquery.com/animate/
基本上(安装了 jQuery)你会做类似的事情:
function switchViews(obj, row) {
var div = $('#'+obj),
targetOpacity = div.css('opacity') === '1' ? 0 : 1,
startOpacity = +!targetOpacity;
div
.stop()
.css('opacity', startOpacity)
.animate({opacity: targetOpacity}, 1000);
}
我在您的表中添加了 2 个类,因为基于 class 名称一次将客户端代码应用于所有元素更容易。
这是 JavaScript / jQuery 代码,用于隐藏/显示 Div 并将文本从“显示详细信息”更改为“隐藏详细信息”。
<script type="text/javascript">
$(document).ready(function () {
$('.showDetails').click(function () {
// Show Details DIV
$(this).closest('tr').find('.details').toggle('fast');
// Return false to disable default postback on click of a <a> element
return false;
}).toggle(
function () {
// Trigger text/html to toggle to when hiding.
$(this).html('Hide Details').stop();
},
function () {
// Trigger text/html to toggle to when showing.
$(this).html('Show Details').stop();
}
);
});
</script>
这是添加了类的修改后的 GridView。 似乎没有对 / 上的 ID 进行任何操作,因此如果其他内容不需要它们,您可以删除它们。
<asp:GridView ID="GridView1" runat="server" DataKeyNames="ResID" OnRowDataBound="GridView1_RowDataBound" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a class="showDetails" href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Show Details</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Contact" />
<asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response" />
<asp:TemplateField>
<ItemTemplate>
</td></tr>
<tr>
<td colspan="100%" style="padding-left: 25px; padding-top: 5px">
<div class="details" id="div<%# Eval("ResID") %>" style="display: none; left: 30px;">
<!--nested Grid:-->
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="ResID">
<Columns>
<asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false" />
<asp:BoundField DataField="iContact" HeaderText="Contact" HeaderStyle-Font-Bold="false" />
<asp:BoundField DataField="iComments" HeaderText="Comments" HeaderStyle-Font-Bold="false" />
</Columns>
</asp:GridView>
<p>
</p>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.