+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Plugin-Diskussionen (https://www.mybb.de/forum/forum-38.html)
+--- Thema: collapse mit thead (/thread-27653.html)
collapse mit thead - Meister Lampe - 14.03.2013
Hallo,
ich habe inzwischen schon diverse threads hier durchgelesen aber leider keine Lösung für mich entdecken können.
Mein Ziel:
tbody per Klick auf den thead ausblenden und nicht per Klick auf das Bild (rechts im thead)
Meine bisherigen Versuche an einer eigenen Tabelle die auf einer eigene Seite (angelegt mit Page Manager on Querschlaeger):
PHP-Code:
<table class="tborder" cellspacing="1" cellpadding="4" border="0" style="margin-top: 5px;">
<thead>
<tr>
<td class="thead" colspan="2">
<div class="expcolimage"><img src="{$theme[\'imgdir\']}/wcfan_portal/collapse.png" id="cat_q3_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="css" class="fname" id="q3">{$lang->q3}</a></strong><div class="smalltext_forum"></div></div>
</td>
</tr>
</thead>
<tbody style="display: none;{$expdisplay}" id="cat_q3_e">
<tr>
<td class="trow2 post_content">
{$lang->a3}
</td>
</tr>
</tbody>
</table>
Funktioniert mit der Standardmethode wunderbar, der Tabellenkörper wird ausgeblendet. (blauer Pfeil mit 1.)
Nun möchte ich nicht auf das Bild klicken müssen, sondern auf den Tabellenkopf klicken können um den Körper zu verstecken. (roter Pfeil mit 2.)
Ich habe schon versucht die Tabelle so anzupassen:
PHP-Code:
<table class="tborder" cellspacing="1" cellpadding="4" border="0" style="margin-top: 5px;">
<thead id="cat_q3_img" class="expander">// HIER DIE AENDERUNG!
<tr>
<td class="thead" colspan="2">
<div class="expcolimage"><img src="{$theme[\'imgdir\']}/wcfan_portal/collapse.png" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="css" class="fname" id="q3">{$lang->q3}</a></strong><div class="smalltext_forum"></div></div>
</td>
</tr>
</thead>
<tbody style="display: none;{$expdisplay}" id="cat_q3_e">
<tr>
<td class="trow2 post_content">
{$lang->a3}
</td>
</tr>
</tbody>
</table>
und den entsprechenden Eintrag in der general.js zu:
Code:
expanders = $$('thead.expander');Da ich in Sachen JavaScript nicht der hellste bin, liegt meine Vermutung nahe, dass ich eine Anpassung vergessen habe. Kann mir da vllt jemand weiterhelfen?
Forum: <LINK>
PS: aktuelle Problemseite (FAQ) für Gäste nicht sichtbar, da noch in Entwicklung.
RE: collapse mit thead - Meister Lampe - 23.04.2013
Inzwischen habe ich entwas experiementiert und local eine einfach html Seite mit mehreren Tabellen angelegt.
Mit diesem Code :
PHP-Code:
//< ![CDATA[
document.observe("dom:loaded", function() {
$$('thead.togglethead').each(function(element){
Event.observe(element, 'click', function(event) {
Event.element(event).next('tbody').toggle();
});
});
});
//]]>
Die einzige Möglichkeit die mir einfällt ist, dass ich unwissentlich zu Prototype nicht kompatiblen Code nutze. Ich kenne mich da allerdings nicht aus.
Weiß jemand einen Rat?
RE: collapse mit thead - MrBrechreiz - 23.04.2013
Das was mir auf anhieb dazu einfällt und auch funzt (eben getestet) mach ein neues Collapse Bild, was den gesamten thead einnimt. Benenne es nun jeweils --> collapse und --> collapse_collapsed , beide sollten auch als gif vorhanden sein.
RE: collapse mit thead - Meister Lampe - 23.04.2013
Okay, das ist ein schöner workaround allerdings beharkt sich das etwas mit der variablen Breite des Themes. Wie ich das als Hintergrundbild anpassen würde weiß ich aber wie das also <img> automatisch hinbekomme weiß ich nicht.
RE: collapse mit thead - Meister Lampe - 25.04.2013
Ich habe jetzt eine Lösung gefunden. Ein eigenes Script:
PHP-Code:
function mytoggle(myelement) {
myelement.next().toggle();
};
und in jeden <thead> onclick eingefügt:
PHP-Code:
<table cellspacing="1" cellpadding="2" border="0" class="tborder">
<thead onclick="mytoggle($(this));">
<tr>
<td colspan="5" class="thead">
...
...
Ist bestimmt nicht die feine englische Art aber funktioniert.
RE: collapse mit thead - MrBrechreiz - 25.04.2013
Ja schön und gut, aber funktioniert es denn auch wenn Du die anderen Kategorein anklickst, ohne das sich die anderen öffnen/schliessen ?
RE: collapse mit thead - Meister Lampe - 08.05.2013
Es wird immer nur die angeklickte Tabelle auf- und zugeklappt. Allerdings wird die Tabelle auch geklappt wenn man auf den Link zum Forum klickt. Mit $(this) gebe ich der Funktion mytoggle() immer das geklickte DOM Element mit und in der Funktion wird das "auf das geklickte folgende" Element getoggelt.
Es sei noch erwähnt, dass mit dieser Methode die Status der Tabellen (ob zugeklappt oder aufgeklappt) nicht gespeichert werden.
RE: collapse mit thead - MrBrechreiz - 08.05.2013
Also wird das Toggle nicht im Cookie gespeichert für schon auf oder zu und dann damit gemerkt beim refresh der Seite ?