none
collapsiblePanel horizontal RRS feed

  • Question

  • Bonjour tout le monde

    J'aimerais savoir s'il était possible de faire de telle sorte que mon collapsiblePanel se déroule de la gauche vers la droite plutot que du haut vers le bas.

    J'ai essayé de voir dans les propriétés mais je n'ai rien trouvé qui puisse 'm'aider. Il ya une propriété Expand direction qui ne donne pas l'effet attendu.... Quelqu'un pourrait il me donner un coup demain

    Merci d'avance.


    koko

    jeudi 19 juin 2014 15:58

Réponses

  • Bonsoir,

    Je penses que vous avez une erreur :

    - Ex : (En gras)

    <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" SuppressPostBack="true"
           
    ExpandedImage="~/images/minusicon.png" TargetControlID="Panel2" CollapseControlID="Panel1"
           
    ExpandControlID="Panel1" CollapsedImage="~/images/plusicon.png" Collapsed="true"
           
    ImageControlID="ImageButton1" ExpandDirection="Horizontal">
       
    </asp:CollapsiblePanelExtender>

    J'ai testé sur une solution vierge, un exemple d'utilisation de ce composant :

    http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/collapsiblepanel/collapsing-and-expanding-a-panel-from-javascript-vb

    En y ajoutant seulement le changement de direction, les annimations me semble aller dans le bon sens.

    Voici le code final :

    <%@ Page Language="VB" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!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 runat="server">
      <title>Control Toolkit</title>
      <style type="text/css">
        .panelClass {background-color: lime; width: 300px;}
      </style>
    
      <script type="text/javascript">
      function doOpen() {
        $find("cpe")._doOpen();
      }
      function doClose() {
        $find("cpe")._doClose();
      }
      function doToggle() {
        var cpe = $find("cpe");
        //cpe._toggle();
        if (cpe.get_Collapsed()) {
          cpe._doOpen();
        } else {
          cpe._doClose();
        }
      }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
        <div>
          <input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
          <input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
          <input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
          <asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
          </asp:Panel>
          <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="Panel1" ExpandDirection="Horizontal" />
        </div>
      </form>
    </body>
    </html>
    

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    jeudi 19 juin 2014 19:57

Toutes les réponses

  • Bonjour,

    Quelle(s) technologie utilisez-vous ?

    - ASPX

    - JqueryUI

    - AjaxControlToolkit ?

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    jeudi 19 juin 2014 16:21
  • j'utilise  AjaxControlToolkit....


    koko

    jeudi 19 juin 2014 16:30
  • Bonjour,

    C'est effectivement possible.

    Il faut utiliser la propriété ExpandDirection du collapsible panel.

    Plus d'infos sur : http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/CollapsiblePanel/CollapsiblePanel.aspx

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    jeudi 19 juin 2014 16:36
  • Kevin excuse moi j'ai mis la propriété "expandDirection" du collapsible panel  à Horizontal et la propriété Direction des panel  à left-to-right mais la direction est tjrs vertical.

    voici mon code:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="iGestoveIntegrate.WebForm2" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ajax Collapsible Panel Extender Example - Asp.net</title>
        <link href="/Styles/Style.css" rel="stylesheet" />
    </head>
    <body class="main">
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div style="width: 980px">
            <h2 class="h2">
                Ajax Collapsible Panel Extender Example - Asp.net
            </h2>
            <div class="cheader">
                <asp:Panel ID="pnl3" runat="server">
                    <asp:ImageButton ID="img2" CssClass="imgbtn" ImageUrl="~/images/plusicon.png" runat="server" /><h2>
                        First Collapsible Panel
                    </h2>
                </asp:Panel>
            </div>
            <div class="cdata">
                <asp:Panel ID="pnl4" runat="server" Direction="LeftToRight">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </asp:Panel>
            </div>
            <div class="cheader">
                <asp:Panel ID="Panel1" runat="server">
                    <asp:ImageButton ID="ImageButton1" CssClass="imgbtn" ImageUrl="~/images/plusicon.png"
                        runat="server" /><h2>
                            Second Collapsible Panel
                        </h2>
                </asp:Panel>
            </div>
            <div class="cdata">
                <asp:Panel ID="Panel2" runat="server" Direction="LeftToRight">
                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                </asp:Panel>
            </div>
            <hr />
        </div>
        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" SuppressPostBack="true"
            ExpandedImage="~/images/minusicon.png" TargetControlID="pnl4" CollapseControlID="pnl3"
            ExpandControlID="pnl3" CollapsedImage="~/images/plusicon.png" Collapsed="true"
            ImageControlID="img2" ExpandDirection="Horizontal">
        </asp:CollapsiblePanelExtender>
        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" SuppressPostBack="true"
            ExpandedImage="~/images/minusicon.png" TargetControlID="Panel2" CollapseControlID="Panel1"
            ExpandControlID="Panel1" CollapsedImage="~/images/plusicon.png" Collapsed="true"
            ImageControlID="ImageButton1" ExpandDirection="Horizontal">
        </asp:CollapsiblePanelExtender>
        </form>
    </body>
    </html>
    


    koko

    jeudi 19 juin 2014 17:21
  • Bonsoir,

    Je penses que vous avez une erreur :

    - Ex : (En gras)

    <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" SuppressPostBack="true"
           
    ExpandedImage="~/images/minusicon.png" TargetControlID="Panel2" CollapseControlID="Panel1"
           
    ExpandControlID="Panel1" CollapsedImage="~/images/plusicon.png" Collapsed="true"
           
    ImageControlID="ImageButton1" ExpandDirection="Horizontal">
       
    </asp:CollapsiblePanelExtender>

    J'ai testé sur une solution vierge, un exemple d'utilisation de ce composant :

    http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/collapsiblepanel/collapsing-and-expanding-a-panel-from-javascript-vb

    En y ajoutant seulement le changement de direction, les annimations me semble aller dans le bon sens.

    Voici le code final :

    <%@ Page Language="VB" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!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 runat="server">
      <title>Control Toolkit</title>
      <style type="text/css">
        .panelClass {background-color: lime; width: 300px;}
      </style>
    
      <script type="text/javascript">
      function doOpen() {
        $find("cpe")._doOpen();
      }
      function doClose() {
        $find("cpe")._doClose();
      }
      function doToggle() {
        var cpe = $find("cpe");
        //cpe._toggle();
        if (cpe.get_Collapsed()) {
          cpe._doOpen();
        } else {
          cpe._doClose();
        }
      }
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
        <div>
          <input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
          <input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
          <input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
          <asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
            ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
            more interactive and highly-personalized Web experiences that work across all the
            most popular browsers.<br />
          </asp:Panel>
          <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="Panel1" ExpandDirection="Horizontal" />
        </div>
      </form>
    </body>
    </html>
    

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    jeudi 19 juin 2014 19:57
  • Merci Kevin.... C'est bon maintenant

    koko

    vendredi 20 juin 2014 09:16