Every time we use the AccordionExtender of AjaxControlToolkit, we may would like to enable the Header's control to cause post back. To achieve this, simply set the property SuppressHeaderPostbacks with false. (Notice that we need use the latest version.) But if the service event of the control is fired, the whole page would be refreshed with all the controls be rendered again. Thus the client animations of the Accordion would not be produced, the behavior is indeed an update of the page with the new style of the AccordionPane. That's not what we want, we need to stay the animation. Now, let's do it. First, we need to disable the ServiceEvent by adding 'return false' inside the OnClientClick function.
< asp:LinkButton ID ="LinkButton1" OnClientClick ="linkClientClick(0,this);return false;" runat ="server" > LinkButton1 </ asp:LinkButton >Then, in the ClientClick function, we add an event handler to the Fade Animation's ended event. The AjaxControlToolkit animation provides an function named 'add_ended(handler)' to help us do it.
function linkClientClick(id, link) { // To handle the animation ended event accordion._getAnimation(accordion._panes[id])._animations[ 0 ].add_ended(animationEndedHandler); // get the Link's uniqueID from the href a = link.href.replace( " javascript:__doPostBack(' " , "" ); currentLink = a.substring( 0 , a.indexOf( " ' " , 0 )); }In the handler, call the _doPostBack function whose eventTarget is set as the clicked LinkButton.
function animationEndedHandler() { if (currentLink) { //do post back __doPostBack(currentLink, ''); }}
Here is the whole code: .aspx file
<% @ Page Language="vb" AutoEventWireup="false" CodeBehind="Test1.aspx.vb" Inherits="SoluTest_Accordion.Test1" EnableEventValidation="false" %> <% @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head runat ="server" > < title ></ title > < style type ="text/css" > .accordionHeader {}{ border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; height: 10px; } .accordionHeaderSelect {}{ border: 1px solid #2F4F4F; color: red; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; height: 10px; } .accordionContent {}{ background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } </ style > < script type ="text/javascript" > var accordion; var currentLink; function linkClientClick(id, link) { //To handle the animation ended event accordion._getAnimation(accordion._panes[id])._animations[0].add_ended(animationEndedHandler); //get the Link's uniqueID from the href a = link.href.replace("javascript:__doPostBack('", ""); currentLink = a.substring(0, a.indexOf("'", 0)); } function pageLoad() { accordion = $find("Accordion2_AccordionExtender"); currentLink = null; } function animationEndedHandler() { if (currentLink) { //do post back __doPostBack(currentLink, ''); } } </ script > </ head > < body > < form id ="form1" runat ="server" > < div > < asp:ScriptManager ID ="ScriptManager1" runat ="server" /> < asp:UpdatePanel ID ="UpdatePanel1" runat ="server" > < ContentTemplate > < cc1:Accordion ID ="Accordion2" runat ="server" SelectedIndex ="0" HeaderCssClass ="accordionHeader" HeaderSelectedCssClass ="accordionHeaderSelect" ContentCssClass ="accordionContent" FadeTransitions ="True" FramesPerSecond ="40" TransitionDuration ="1250" AutoSize ="None" RequireOpenedPane ="false" SuppressHeaderPostbacks ="false" > < Panes > < cc1:AccordionPane ID ="AccordionPane1" runat ="server" > < Header > < p > Run fade animation before Link's service event is fired. </ p > < asp:LinkButton ID ="LinkButton1" OnClientClick ="linkClientClick(0,this);return false;" runat ="server" > LinkButton1 </ asp:LinkButton > <% -- return false to disable the server event-- %> </ Header > < Content > < p > This is the content area! </ p > </ Content > </ cc1:AccordionPane > < cc1:AccordionPane ID ="AccordionPane2" runat ="server" > < Header > < p > Click the LinkButton with no animation </ p > < asp:LinkButton ID ="LinkButton2" runat ="server" > LinkButton2 </ asp:LinkButton > </ Header > < Content > < p > This is the content area! </ p > </ Content > </ cc1:AccordionPane > </ Panes > </ cc1:Accordion > </ ContentTemplate > </ asp:UpdatePanel > </ div > </ form > </ body > </ html >.aspx.vb file
Public Partial Class Test1 Class Test1 Inherits System.Web.UI.Page Protected Sub LinkButton1_Click()Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton1.Click LinkButton1.Text = "Link1 is clicked!" End Sub Protected Sub LinkButton2_Click()Sub LinkButton2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton2.Click LinkButton2.Text = "Link2 is clicked!" End SubEnd Class
Thread url:http://forums.asp.net/p/1367664/2855920.aspx#2855920
转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/01/13/1374708.html
