none
Ajax – Ajouter un panneau Accordion coté client RRS feed

  • Discussion générale

  • Voici un exemple pour ajouter un panneau Accordion coté client :

    <%@ 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">
      [System.Web.Services.WebMethod]
      public static string getContent(int index)
      {    
        return "Content of pane " + index.ToString() + ".<br> Generated on " + DateTime.Now.ToString();
      }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>Untitled Page</title>
      <script type="text/javascript">
      var holder = null;
      function getContent(index)
      {
        var id = "result" + index;
        holder = $get(id);
        PageMethods.getContent(index, onComplete);
      }
     
      function onComplete(result)
      {
        holder.innerHTML = result;
      }
    
      </script>
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <ajaxtoolkit:accordion id="Accordion1" runat="server">
        <Panes>
          <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
              <a href="javascript:getContent(1);">Header1</a>
            </Header>
            <Content>  
              <div id="result1"></div>         
            </Content>
          </ajaxToolkit:AccordionPane>
          <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
              <a href="javascript:getContent(2);">Header2</a>
            </Header>
            <Content> 
              <div id="result2"></div>          
            </Content>
          </ajaxToolkit:AccordionPane>
          <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
            <Header>
              <a href="javascript:getContent(3);">Header3</a>
            </Header>
            <Content> 
              <div id="result3"></div>          
            </Content>
          </ajaxToolkit:AccordionPane>
        </Panes>
        </ajaxtoolkit:accordion>
        <div id="newHeader">
          New Header</div>
        <div id="newContent">
          New Content</div>
        <input id="Button1" type="button" value="add pane" onclick="addNewPane();" />
        <script type="text/javascript">
        function addNewPane()
        {
          var acc = $find("Accordion1_AccordionExtender");
          var h = $get("newHeader");
          var c = $get("newContent");
          acc.get_element().appendChild(h);
          acc.get_element().appendChild(c);
          acc.addPane(h,c);
        }
        </script>
      </div>
      </form>
    </body>
    </html>

     

     

    Pour plusieurs informations, visitez la page Foire aux Questions – ASP.NET

     

     

    lundi 31 mai 2010 13:36
    Modérateur