TitlePane wie in dojo, nur mit prototype/script.aculo.us

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • TitlePane wie in dojo, nur mit prototype/script.aculo.us

    Hi,

    ich habe beim dojo Toolkit ein schönes Widget namens "TitlePane" gefunden. (docs.dojocampus.org/dijit/TitlePane#examples)
    Ich setze aber üblicherweise prototype und script.aculo.us ein. Daher frag ich mich, ob jemand ein UI-Element kennt, welches dem TitlePane von dojo nahe kommt.

    Ich kann das Element aufgrund mangelnder JS-Erfahrung nicht selbst basteln, daher bleiben mir nur die Frameworks.
    Gibt es so etwas in prototype/script.aculo.us oder muss ich dojo einbinden?

  • Das habe ich schon probiert. Das größte Problem für mich ist das Erzeugen/Ändern der Grafik, wenn die Box offen bzw. geschlossen ist.

    Edit: Was ich bis jetzt habe sieht so aus:

    HTML/JS

    Quellcode

    1. <div class="title_pane">
    2. <%= link_to_function "Klick hier!", "Effect.toggle($('paneBody'), 'blind', {duration: 0.3})",
    3. :class => 'title_pane_head' %>
    4. <div class="title_pane_body" id="paneBody">
    5. Inhalt <br />
    6. <br />
    7. Noch mehr Inhalt...
    8. </div>
    9. </div>


    CSS

    Quellcode

    1. div.title_pane {
    2. width: 500px;
    3. height: 300px;
    4. }
    6. a.title_pane_head {
    7. background-color: #4c6393;
    8. color: white;
    9. padding: 0.5em;
    10. font-weight: bold;
    11. display: block;
    12. text-decoration: none;
    13. }
    15. a.title_pane_head:hover {
    16. text-decoration: underline;
    17. }
    19. div.title_pane_body {
    20. color: #4c6393;
    21. padding: 0.5em;
    22. border: 1px solid #4c6393;
    23. }
    Alles anzeigen


    aussehen tut das bisher so: testbereich.mdohnke.de/

    Was jetzt noch fehlt ist eine kleine Grafik vor dem Titellink, die sich je nach Status der Box ändert (offen/geschlossen). Das bekomme ich nicht hin...
    Kann jemand helfen?

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von mad ()

  • Ok, ich habs geschafft. Wahrscheinlich etwas unsauber, aber es funktioniert:

    Quellcode

    1. <div class="title_pane">
    2. <a class="title_pane_head" href="#" onclick="Effect.toggle(this.next('div'), 'blind', {duration: 0.3}); this.down('img').src = (this.next('div').style.display == '') ? '/images/box_closed.png?1271146575' : '/images/box_open.png?1271146591'; return false;">
    3. <img alt="Box_open" height="8" src="/images/box_open.png?1271146591" width="8" />&nbsp; Klick auch hier
    4. </a>
    5. <div class="title_pane_body">
    6. Noch ein Test
    7. </div>
    8. </div>


    Falls jemand Verbesserungen hat, immer her damit. JS ist wirklich nicht mein Gebiet :D