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

Professional

Tuesday, April 13th 2010, 11:01am

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

Hi,

ich habe beim dojo Toolkit ein schönes Widget namens "TitlePane" gefunden. (http://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?

Szabo

Professional

Posts: 248

Tuesday, April 13th 2010, 4:39pm

Du kannst das recht einfach mit dem Toggle Effekt von script.aculous nachbauen:
http://wiki.github.com/madrobby/scriptaculous/effect-toggle

Solltest du dabei Probleme haben, gib einfach bescheid.

mad

Professional

Posts: 662

Tuesday, April 13th 2010, 4:45pm

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

HTML Code

<div class="title_pane">
  <%= link_to_function "Klick hier!", "Effect.toggle($('paneBody'), 'blind', {duration: 0.3})",
    :class => 'title_pane_head' %>
  <div class="title_pane_body" id="paneBody">
    Inhalt <br />
    <br />
    Noch mehr Inhalt...
  </div>
</div>

CSS

Cascading Style Sheets

div.title_pane {
    width: 500px;
    height: 300px;
}
 
a.title_pane_head {
    background-color: #4c6393;
    color: white;
    padding: 0.5em;
    font-weight: bold;
    display: block;
    text-decoration: none;
}
 
a.title_pane_head:hover {
    text-decoration: underline;
}
 
div.title_pane_body {
    color: #4c6393;
    padding: 0.5em;
    border: 1px solid #4c6393;
}

aussehen tut das bisher so: http://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?

This post has been edited 2 times, last edit by "mad" (Apr 13th 2010, 8:10pm)

mad

Professional

Posts: 662

Wednesday, April 14th 2010, 10:26am

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

HTML Code

<div class="title_pane">  
  <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;">
    <img alt="Box_open" height="8" src="/images/box_open.png?1271146591" width="8" />&nbsp; Klick auch hier
  </a>
  <div class="title_pane_body">
    Noch ein Test
  </div>
</div>