Sunday, March 11, 2012

How can I get Ajax control in javascript?

Hi Nevermet,

Here is a working sample which indicates how to get the Accordion object and add mouseover to the Header.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Accordion</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; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } .accordionLink { background-color: #D3DEEF; color: white: } </style></head><body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" /> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" SuppressHeaderPostbacks="false"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> <asp:HyperLink ID="HyperLink1" runat="server">Panel1</asp:HyperLink></Header> <Content> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> </ContentTemplate> </asp:UpdatePanel> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> Panel2</Header> <Content> <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> <script type="text/javascript" language="javascript"> function pageLoad(){ for(var i=0 ; i<$find('MyAccordion_AccordionExtender').get_Count(); i++){ $addHandler($find('MyAccordion_AccordionExtender').get_Pane(i).header,"mouseover",AccordionMouse); } } function AccordionMouse(sender,eventArgs){ $find('MyAccordion_AccordionExtender').set_SelectedIndex(sender.target._index); }form></body></html>

We suggest that you should wholly copy it to your project and have a test.

I hope this help.

Best regards,

Jonathan

No comments:

Post a Comment