https://de.contaowiki.org/index.php?title=Akkordeons_verschachteln_2&feed=atom&action=history
Akkordeons verschachteln 2 - Versionsgeschichte
2024-03-29T01:03:10Z
Versionsgeschichte dieser Seite in Contao Community Documentation
MediaWiki 1.22.6
https://de.contaowiki.org/index.php?title=Akkordeons_verschachteln_2&diff=7837&oldid=prev
Andreas: Bild hinzugefügt
2013-11-30T06:14:53Z
<p>Bild hinzugefügt</p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Nächstältere Version</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Version vom 30. November 2013, 06:14 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno">Zeile 4:</td>
<td colspan="2" class="diff-lineno">Zeile 4:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>= Verschachtelte Akkordeons =</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>= Verschachtelte Akkordeons =</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[[Datei:Akkordeons-verschachteln-2.png]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Ziel ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Ziel ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Akkordeons innerhalb von Akkordeons darstellen.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Akkordeons innerhalb von Akkordeons darstellen.</div></td></tr>
<!-- diff cache key kunde29sql1:diff:version:1.11a:oldid:7835:newid:7837 -->
</table>
Andreas
https://de.contaowiki.org/index.php?title=Akkordeons_verschachteln_2&diff=7835&oldid=prev
Andreas: Die Seite wurde neu angelegt: „{{AppliesTo |Version=3.1.5}} Category:Admin HOWTOS = Verschachtelte Akkordeons = == Ziel == Akkordeons innerhalb von Akkordeons darstellen. == Einschränku…“
2013-11-30T06:02:00Z
<p>Die Seite wurde neu angelegt: „{{AppliesTo |Version=3.1.5}} <a href="/Kategorie:Admin_HOWTOS" title="Kategorie:Admin HOWTOS">Category:Admin HOWTOS</a> = Verschachtelte Akkordeons = == Ziel == Akkordeons innerhalb von Akkordeons darstellen. == Einschränku…“</p>
<p><b>Neue Seite</b></p><div>{{AppliesTo<br />
|Version=3.1.5}}<br />
[[Category:Admin HOWTOS]]<br />
<br />
= Verschachtelte Akkordeons =<br />
<br />
== Ziel ==<br />
Akkordeons innerhalb von Akkordeons darstellen.<br />
<br />
== Einschränkung ==<br />
Bis zu 2 Ebenen. (Weitere Ebenen durch Templateerweiterung möglich.)<br />
<br />
== Umsetzung ==<br />
=== MooTools ===<br />
Template moo_accordion_nested.html5 oder -.xhtml erstellen und im Layout anstatt moo_accordion auswählen. Funktioniert auch bei nicht verschachtelten Akkordeons.<br />
=== jQuery ===<br />
Template j_accordion_nested... Sonst wie bei MooTools.<br />
<br />
== Näheres ==<br />
Für das Akkordeon in der 2. Ebene muss im Template eine neue Instanz (Javascript) erzeugt werden.<br />
<br />
== Das Template ==<br />
<br />
<br />
Der erste Block des original Templates (Instantiierung) wurde dubliziert, wobei jeweils in der ersten Zeile die Zielelemente (CSS-Selektoren) verändert wurden, so dass jeweils das äußere bzw. das innere Akkordeon (HTML-Code) angesprochen wird.<br />
<br />
=== MooTools ===<br />
<source lang="javascript"><br />
<br />
<script><br />
(function($) {<br />
window.addEvent('domready', function() {<br />
<br />
// Level 1<br />
new Fx.Accordion($$('div.mod_article > .ce_accordion > div.toggler'), $$('div.mod_article > .ce_accordion > div.accordion'), {<br />
display: 0, // first element open on start<br />
opacity: false, // no opacity animation<br />
alwaysHide: true, // possibility to close all accordions<br />
onActive: function(tog, el) {<br />
el.setProperty('aria-hidden', 'false');<br />
tog.addClass('active');<br />
tog.getNext('div').fade('in');<br />
tog.setProperty('aria-expanded', 'true');<br />
return false;<br />
},<br />
onBackground: function(tog, el) {<br />
el.setProperty('aria-hidden', 'true');<br />
tog.removeClass('active');<br />
tog.getNext('div').fade('out');<br />
tog.setProperty('aria-expanded', 'false');<br />
return false;<br />
}<br />
});<br />
<br />
// Level 2<br />
new Fx.Accordion($$('.ce_accordion .ce_accordion div.toggler'), $$('.ce_accordion .ce_accordion div.accordion'), {<br />
display: -1, // no element open on start<br />
opacity: false,<br />
alwaysHide: true,<br />
onActive: function(tog, el) {<br />
el.setProperty('aria-hidden', 'false');<br />
tog.addClass('active');<br />
tog.getNext('div').fade('in');<br />
tog.setProperty('aria-expanded', 'true');<br />
return false;<br />
},<br />
onBackground: function(tog, el) {<br />
el.setProperty('aria-hidden', 'true');<br />
tog.removeClass('active');<br />
tog.getNext('div').fade('out');<br />
tog.setProperty('aria-expanded', 'false');<br />
return false;<br />
}<br />
});<br />
<br />
// Accessibility<br />
$$('div.toggler').each(function(el) {<br />
el.setProperty('role', 'tab');<br />
el.setProperty('tabindex', 0);<br />
el.addEvents({<br />
'keypress': function(event) {<br />
if (event.code == 13) {<br />
this.fireEvent('click');<br />
}<br />
},<br />
'focus': function() {<br />
this.addClass('hover');<br />
},<br />
'blur': function() {<br />
this.removeClass('hover');<br />
},<br />
'mouseenter': function() {<br />
this.addClass('hover');<br />
},<br />
'mouseleave': function() {<br />
this.removeClass('hover');<br />
}<br />
});<br />
});<br />
$$('div.ce_accordion').each(function(el) {<br />
el.setProperty('role', 'tablist');<br />
});<br />
$$('div.accordion').each(function(el) {<br />
el.setProperty('role', 'tabpanel');<br />
});<br />
<br />
});<br />
})(document.id);<br />
</script><br />
<br />
</source><br />
<br />
=== jQuery ===<br />
{{msgImportant| Das jQuery-Template wurde noch nicht erarbeitet.}}<br />
<br />
== Formatierung ==<br />
Hier ein wenig CSS für den ersten Testlauf.<br />
<source lang="css"><br />
/* ... Accordion ...<br />
-------------------------------------------------------------------------------------------------*/<br />
.toggler {<br />
cursor: pointer;<br />
margin: 0;<br />
padding: 10px;<br />
color: #fff;<br />
background-image: linear-gradient(to bottom, #fff 0%, #000 50%);<br />
}<br />
.accordion .toggler {<br />
background-image: linear-gradient(to bottom, #fff 0%, #666 50%);<br />
}<br />
.ce_accordion {<br />
background: #eee;<br />
}<br />
.ce_accordion .ce_accordion {<br />
background: #ccc;<br />
margin-left: 50px;<br />
}<br />
/* ... Accordion ... END<br />
-------------------------------------------------------------------------------------------------*/<br />
</source><br />
<br />
--[[Benutzer:Andreas|Andreas Burg]] 07:02, 30. Nov. 2013 (CET)</div>
Andreas