ASP.NET Zone

Die ASP.NET Community. Alle Antworten rund um Microsoft® Webtechnologien
Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe | Impressum | ASP.NET Zone Suchplugin

in
Home Blogs Foren FAQ Communities Fotos Downloads
ASP.NET Zone » ASP.NET (Entwicklung) » ASP.NET AJAX » AW: Fragen zu Accordion
Werbeanzeige

Fragen zu Accordion

Letzter Beitrag 03-06-2012, 12:38 von aspnose. 10 Antworten.
Beiträge sortieren: Zurück Weiter

  •  03-02-2012, 12:23 223984

    Fragen zu Accordion

    Antworten Zitieren
    Hallo,

    ich möchte eine Ajax-Accordion Control in meiner Website einbauen, das ich über ein ModalPopup aufrufe. Das ganze möchte ich als Hilfefunktion für die Website benutzen. Ich habe jetzt auch Beispielcode gefunden mit dem ich jetzt herum experimentiere.
    Aber ein paar Dinge bekomme ich einfach nicht hin (probiere da schon seit Stunden rum):

    • im Contenbereich des Accordion ist immer ein horizontaler Scrollbalken sichtbar, den ich weg haben möchte. Statt dessen würde ich gerne die Höhe des Content beschränken und einen vertikalen Scrollbalken anzeigen. Ich bekomme das aber nicht hin...
    • Der Contenbereich soll genauso lang sein wie der Headerbereich, aber der Contenbereich ist immer ein paar Pixel kleiner. Ich denke das  liegt an dem CSS, aber ich kann den Fehler nicht finden. 
    • Ich hätte gerne um das ganze Accordion einen Rahmen, damit auch der Close-Button mit eingeschlossen ist - dieser hängt einfach unten mit dran, so als würde der nicht (optisch) dazu gehören.
    • Kann ich das ModalPopup auch selber positionieren? Es erscheint immer mittig und ich würde das gerne an anderer Stelle positionieren.
    • Der erste Content ist default aufgeklappt, ich würde aber gerne alles am Anfang geschlossen habe, wie mache ich das?

    Am besten könnt ihr das Beispiel mal direkt bei auch aufrufen, dann sieht man besser was ich meine:

    <%@ Page Language="vb" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!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>
        <style type="text/css">
            .accordionContent
            {
                background-color: #D3DEEF;
                border-color: -moz-use-text-color #2F4F4F #2F4F4F;
                border-style: none;
                padding: 5px;
                width: 100%;
            }
            .accordionHeaderSelected
            {
                background-color: #5078B3;
                border: 1px solid #2F4F4F;
                color: white;
                cursor: pointer;
                font-family: Arial,Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                margin-top: 5px;
                padding: 5px;
                width: 100%;
            }
            .accordionHeader
            {
                background-color: #2E4D7B;
                border: 1px solid #2F4F4F;
                color: white;
                cursor: pointer;
                font-family: Arial,Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                margin-top: 5px;
                padding: 5px;
                width: 100%;
            }
            .href
            {
                color: White;
                font-weight: bold;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="asm" runat="server" />
        <div>
            <asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />
        </div>
        <asp:Panel ID="ModalPanel" runat="server">
            <asp:Accordion ID="UserAccordion" runat="server" HeaderCssClass="accordionHeader"
                HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250"
                FramesPerSecond="70" RequireOpenedPane="false">
                <Panes>
                    <asp:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <a href="#" class="href">New User</Header>
                        <Content>
                            <asp:Panel ID="UserReg" runat="server">
                                Dies ist Beispiel-text 1 Dies ist Beispiel-text 1<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>
                            <a href="#" class="href">User Detail</Header>
                        <Content>
                            <asp:Panel ID="Panel1" runat="server">
                                Dies ist Text Nummer 2<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane3" runat="server">
                        <Header>
                            <a href="#" class="href">Job Details</a>
                        </Header>
                        <Content>
                            <asp:Panel ID="Panel2" runat="server">
                                Die ist Text Nummer 4 Die ist Text Nummer 4<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
            <asp:Button ID="OKButton" runat="server" Text="Close" />
        </asp:Panel>
        <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ClientButton" PopupControlID="ModalPanel"
            OkControlID="OKButton" />
        </form>
    </body>
    </html>

  •  03-02-2012, 15:36 223988 Antwort zu 223984

    AW: Fragen zu Accordion

    Antworten Zitieren
    Ich versuche immer noch die Problem selbst zu lösen, aber leider gelingt mir das nicht. Weiß doch nicht jemand eine Lösung oder Rat dazu?
    Meine Website ist fertig und ich könnten sie schon abliefern,  aber es fehlt jetzt nur noch diese Hilfefunktion zum implementieren mit der ich aber jetzt nicht weiter komme, wegen den oben genannten Problem bzw. Fragen....

  •  03-03-2012, 10:59 223991 Antwort zu 223984

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hi,

    generell würde ich das ASP.NET Ajax Control Toolkit gar nicht erst verwenden. Mit jQueryUI hast Du erheblich effizientere Möglichkeiten, solche Sachen aufzubauen. Damit dürften deine Probleme ggfs. auch gleich mit erledigt sein.

      http://jqueryui.com/demos/accordion/#collapsible
      http://jqueryui.com/demos/dialog/#modal-message


    • Contenbereich des Accordion ist immer ein horizontaler Scrollbalken sichtbar, den ich weg haben möchte. Statt dessen würde ich gerne die Höhe des Content beschränken und einen vertikalen Scrollbalken anzeigen. Ich bekomme das aber nicht hin...
    • Der Contenbereich soll genauso lang sein wie der Headerbereich, aber der Contenbereich ist immer ein paar Pixel kleiner. Ich denke das  liegt an dem CSS, aber ich kann den Fehler nicht finden.
    • Ich hätte gerne um das ganze Accordion einen Rahmen, damit auch der Close-Button mit eingeschlossen ist - dieser hängt einfach unten mit dran, so als würde der nicht (optisch) dazu gehören.
    • Kann ich das ModalPopup auch selber positionieren? Es erscheint immer mittig und ich würde das gerne an anderer Stelle positionieren.
    • Der erste Content ist default aufgeklappt, ich würde aber gerne alles am Anfang geschlossen habe, wie mache ich das?

    Ich hab dir dein Beispiel mal umgeschrieben. Damit sollten die Punkte soweit erledigt sein.

    <%@ Page Language="vb" %>
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!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 id="Head1" runat="server">
        </title>
        <style type="text/css">
            .accordion
            {
                border      : 1px solid #FF0000;
            }
            .accordionContent
            {
                background-color: #D3DEEF;
                border-color: -moz-use-text-color #2F4F4F #2F4F4F;
                border-style: none;
                padding: 5px;
            }
            .accordionHeaderSelected
            {
                background-color: #5078B3;
                border: 1px solid #2F4F4F;
                color: white;
                cursor: pointer;
                font-family: Arial,Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                margin-top: 5px;
                padding: 5px;
            }
            .accordionHeader
            {
                background-color: #2E4D7B;
                border: 1px solid #2F4F4F;
                color: white;
                cursor: pointer;
                font-family: Arial,Sans-Serif;
                font-size: 12px;
                font-weight: bold;
                margin-top: 5px;
                padding: 5px;
            }
            .href
            {
                color: White;
                font-weight: bold;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="asm" runat="server" />
        <div>
            <asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />
        </div>
        <asp:Panel ID="ModalPanel" runat="server" CssClass="accordion">
            <asp:Accordion ID="UserAccordion" runat="server" HeaderCssClass="accordionHeader"
                HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250"
                FramesPerSecond="70" RequireOpenedPane="false" Width="600" Height="400"
                SelectedIndex="-1">
                <Panes>
                    <asp:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            <a href="#" class="href">New User</Header>
                        <Content>
                            <asp:Panel ID="UserReg" runat="server">
                                Dies ist Beispiel-text 1 Dies ist Beispiel-text 1<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>
                            <a href="#" class="href">User Detail</Header>
                        <Content>
                            <asp:Panel ID="Panel1" runat="server">
                                Dies ist Text Nummer 2<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                    <asp:AccordionPane ID="AccordionPane3" runat="server">
                        <Header>
                            <a href="#" class="href">Job Details</a>
                        </Header>
                        <Content>
                            <asp:Panel ID="Panel2" runat="server">
                                Die ist Text Nummer 4 Die ist Text Nummer 4<br />
                            </asp:Panel>
                        </Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
            <asp:Button ID="OKButton" runat="server" Text="Close" />
        </asp:Panel>
        <asp:ModalPopupExtender ID="mpe" X="100" Y="100" runat="server" TargetControlID="ClientButton" PopupControlID="ModalPanel" OkControlID="OKButton" />
        </form>
    </body>
    </html>
    Einfach mal mit deinem Beispiel vergleichen, die Unterschiede sind nicht gravierend.

    --
    Gruß, Stefan Falz
    Microsoft MVP - Visual Developer ASP/ASP.NET
    ASP.NET Consulting, Development, Coaching

    ASP.NET Zone - Leitfaden für gute Postings

    Xtopia 2008 - Gewinnspiel / Expression Studio und Xtopia Eintrittskarten zu gewinnen

  •  03-03-2012, 12:20 223992 Antwort zu 223991

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hallo Stefan,

    vielen Dank für deine umfangreiche Hilfe!

    Wenn ich den von dir modifizierten Code starte kommt jetzt aber eine JavaScript ErrorMessage:

    htmlfile: Invalid argument.

    ..und Stop an dieser Zeile:

    accordion.insertBefore(wrapper, content);

    Kannst du nochmal bitte schauen, wo da das Problem liegt?

    Oder könntest du mir das gleiche Beispiel in Jquery-UI zeigen?

    (ich bin aber nicht zu faul das selber zu machen, sondern nur unter Zeitdruck, weil ich die Doku jetzt fertig machen muss!) 

  •  03-03-2012, 13:07 223993 Antwort zu 223992

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hi,
    aspnose:

    Wenn ich den von dir modifizierten Code starte kommt jetzt aber eine JavaScript ErrorMessage:

    Bei mir funktioniert das einwandfrei. Welche Version des Control Toolkits setzt Du in welcher ASP.NET Version ein?

    aspnose:

    Oder könntest du mir das gleiche Beispiel in Jquery-UI zeigen?

    Dafür fehlt mir leider die Zeit.

    aspnose:

    (ich bin aber nicht zu faul das selber zu machen, sondern nur unter Zeitdruck, weil ich die Doku jetzt fertig machen muss!) 

    Das schaffst Du schon :)

    --
    Gruß, Stefan Falz
    Microsoft MVP - Visual Developer ASP/ASP.NET
    ASP.NET Consulting, Development, Coaching

    ASP.NET Zone - Leitfaden für gute Postings

    Xtopia 2008 - Gewinnspiel / Expression Studio und Xtopia Eintrittskarten zu gewinnen

  •  03-03-2012, 13:42 223994 Antwort zu 223993

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hier meine Versionen:

    AJAX Control Toolkit — April 2010 Release
    ASP.NET 4.0 SP1

  •  03-03-2012, 14:37 223995 Antwort zu 223994

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hi,
    aspnose:

    AJAX Control Toolkit — April 2010 Release

    Dann installier mal das neueste Release. 4.1.51116.0 hätte ich hier (nachdem ich es vorher mit 3.0.irgendwas probiert hatte). Das, was Du da hast, ist 2 Jahre alt und hat sicherlich noch einige Bugs.

    Bei mir funktioniert es in beiden Varianten ohne Probleme.

    Teste es bitte mal genau mit meiner Datei ohne andere Inhalte. Das sollte, wenn das Control Toolkit aktuell ist, funktionieren.

    --
    Gruß, Stefan Falz
    Microsoft MVP - Visual Developer ASP/ASP.NET
    ASP.NET Consulting, Development, Coaching

    ASP.NET Zone - Leitfaden für gute Postings

    Xtopia 2008 - Gewinnspiel / Expression Studio und Xtopia Eintrittskarten zu gewinnen

  •  03-03-2012, 15:38 223996 Antwort zu 223995

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hi,

    ich habe jetzt genau die Version und es ging dann immer noch nicht, bis ich dann mal den Browser gewechselt habe. In der Entwicklungsumgebung startet bei mir als Default-Browser der Internet-Explorer 8. Und nur dort komm dann die beschrieben Fehlermeldung in VisualStudio hoch.
    Wenn ich den Link http://localhost:58520/WebForm1.aspx dann im Firefox starte, funktioniert alles!

    Aber bei meinen Tests gestern mit dem Accordion  hatte der InternetExplorer auch damit funktioniert. Ich habe auch andere AJAX-Controll mal getestet, die funktionieren auch, aber nur das Accordion verursacht im Zusammenhang mit dem Internet Explorere diesen Problem.

  •  03-03-2012, 15:56 223997 Antwort zu 223996

    AW: Fragen zu Accordion

    Antworten Zitieren
    Ich habe den Cache im Internet-Explorer gelöscht, jetzt funktioniert es auch da! Danke nochmal und sorry für die Umstände!

    Das Attribut Height="400" hat aber kein Auswirkung. Wenn ein Accordeon-Pane sehr viel Text enthält, dachte ich, das dann die Gesamthöhe durch Height="400" begrenzt wird und dann im Accorden-Pane ein vertikaler Slider auftaucht. Dem ist aber nicht so und das Accordeon-Pane ist dann genauso hoch wie der gesamte Text (und schiesst bei ganz viel Text, dann auch aus der Seite nach unten raus!)

    <asp:Accordion ID="UserAccordion" runat="server" HeaderCssClass="accordionHeader"
                HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250"
                FramesPerSecond="70" RequireOpenedPane="false" Width="600" Height="400"
                SelectedIndex="-1">

  •  03-03-2012, 16:49 223998 Antwort zu 223997

    AW: Fragen zu Accordion

    Antworten Zitieren
    aspnose:

    Wenn ein Accordeon-Pane sehr viel Text enthält, dachte ich, das dann die Gesamthöhe durch Height="400" begrenzt wird und dann im Accorden-Pane ein vertikaler Slider auftaucht.

    Dann ändere die Stylesheet Klasse für den Container, den ich um das Accordion Control gelegt habe.

    .accordion
    {
        border      : 1px solid #FF0000;
        height      : 400px;
        overflow-y  : scroll;
    }
    Damit geht dann auch das.

    --
    Gruß, Stefan Falz
    Microsoft MVP - Visual Developer ASP/ASP.NET
    ASP.NET Consulting, Development, Coaching

    ASP.NET Zone - Leitfaden für gute Postings

    Xtopia 2008 - Gewinnspiel / Expression Studio und Xtopia Eintrittskarten zu gewinnen

  •  03-06-2012, 12:38 224001 Antwort zu 223998

    AW: Fragen zu Accordion

    Antworten Zitieren
    Hi,

    das war es nicht ganz, weil dadurch nicht die Höhe der einzelnen Panels eingeschränkt wird.

    Aber so war das dann die Lösung für mich (muss für jedes Panel dann eben separat eingestellt werden):

    <asp:Panel ID="Panel1" Height="200px" runat="server"> 
Als RSS Feed in XML ansehen
Powered by Community Server (Commercial Edition)