Page 1 of 1
Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Mon 19. Dec 2011, 21:56
by erdbaer
Guten Abend,
ich bin neu hier, beschäftige mich seit kurzem mit phpwcms und habe nun ein Problem. Ich habe fleissig dieses Forum und das Wiki durchforstet - ohne eine Lösung gefunden zu haben. Evtl. kann mir hier geholfen werden?
ich habe mit Hilfe des Beitrags
http://forum.phpwcms.org/viewtopic.php? ... =Accordion
MOOTOOLS-Accordions eingebaut. Läuft alles prima und ohne Fehler.
Nun möchte ich aber jedem Header / Titel eines Accordions eine individuelle Grafik integrieren - per CSS-Background-Definition über Element-Style.
Dazu habe ich mir gedacht, ich gebe den zu verwendenden Grafiken den Namen des Titels. So braucht dann der unbedarfte "Redakteur" ggf. nur eine Grafik mit dem Titel des Accordions in das entsprechende Verzeichnis laden und muss nicht erst ID's suchen usw...
Die m. E. passende Stelle in der Datei "/include/inc_front/content.article.inc.php" habe ich auch schon gefunden. Allerdings soll man ja den Original-Code nicht anfassen.
Wie bekomme ich das nun dennoch hin, dem ul-Tag dynamisch die passende Hintergrundgrafik zu verpassen?
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Mon 19. Dec 2011, 23:21
by flip-flop
Hi,
poste mal einen Auszug aus dem generierten Quelltext und dem dazu passenden Template.
Ich weiß im Moment nicht welche Variante du gewählt hast.
Knut
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Mon 19. Dec 2011, 23:56
by erdbaer
Hallo Knut,
der generierte Quelltext für ein Accordion sieht so aus:
Code: Select all
<div class="tab-container" id="TABBOX-ec32c07eb24dc923747f1af4c062e1d3">
<ul class="tab-navigation">
<li class="tab-item-1 tab-first tab-last"><a href="#">Zuhören und verstehen</a></li>
</ul>
<div class="tab-content" id="tab-zuhAren-und-verstehen0" style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;">
<h4></h4>
<p>...content...</p>
</div>
<div class="tab-container-clear"></div>
</div>
Die verwendete php-Datei (mootools-accordion-cptab.php):
Code: Select all
<?php
/**
********************************************************************
* KH 13.12.2010: For CP Reg Tabs since r409
* KH: 03.05.2011: MooTools Accordion
* http://forum.phpwcms.org/viewtopic.php?f=28&t=21049&p=129856#p129856
********************************************************************/
// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------
// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false AND strpos($content["all"],'[%MOO-ACCORDION%]') !== false) {
// Kill the identifyer TAG [%MOO-ACCORDION%]
$content["all"] = str_replace('[%MOO-ACCORDION%]','',$content["all"]);
// Load the CSS file
$block['css']['mootools-accordion'] = 'specific/mootools/accordion.css';
// Load the required "plugins"
// ---- Init Moore function v2
$mootools_more = array('Fx/Fx.Elements','Fx/Fx.Accordion');
initJSPlugin($mootools_more, true);
initJSPlugin('moo-accordion');
// Kill the anchor text in link)
$content["all"] = preg_replace('/href="#tab-(.*?)"\>/s','href="#">', $content["all"]);
}
?>
und das Java-Skript (mootools.moo-accordion.js):
Code: Select all
window.addEvent('domready', function() {
//create our Accordion instance
var myAccordion = new Accordion($('accordion'), 'ul.tab-navigation', 'div.tab-content', {
opacity: false,
// fixedHeight: 220,
alwaysHide:true,
display:-1
/* onActive: function(toggler, element){
toggler.setStyle('color', '#41464D');
},
onActive: function(toggler, element){
element.setStyle('border-bottom', '1px solid #CCCCCC');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#F9F9F9');
} */
});
});
Verwendet wird der CP Register-Tab mit "[%MOO-ACCORDION%] "
Michael
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 08:09
by flip-flop
Ich habe keine Ahnung wie dein Template aussieht, jedoch steht doch irgenwo
Hier könnte so etwas eingefügt werden:
Code: Select all
<ul class="tab-navigation" style="background: url(../../../Verzeichnis/tab/{TABTITLE}.png) no-repeat;">
oder
Code: Select all
<li class="......" style=background: url(../../../Verzeichnis/tab/{TABTITLE}.png) no-repeat;">
Knut
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 10:51
by erdbaer
Hallo,
eilen Dank für die schnelle Antwort.
Ich hatte mir das Accordion nach der Anleitung im oben genannten Link aufgebaut.
Also mit einem normalen CP "WYSYWYG HTML", nem Haken bei "Register (Tabs):" und dem Identifier "[%MOO-ACCORDION%]".
Hier hatte ich die Standard-Vorlage genutzt...
Mittlerweile scheint das nicht mehr uptodate zu sein.
Versuche mit dem CP "Register (Tabs)" und dem Template "Accordion.MooTools.tmpl" funktionieren wunderbar - sogar die css-Klassen für den H3-Tag wechseln automatisch beim auf- und zuklappen. Ich glaube, da kann ich mein Vorhaben gut unterbringen. Allerdings kann ich auch hier nicht die Stellen finden, an der Element-Style für div-Container und H3-Tag definiert werden können.
Wo kann ich diese Stelle finden?
Der html-Code sieht nun so aus:
Code: Select all
<div class="accordion" id="accordion_22">
<h3 class="toggler ">1</h3>
<div class="element" style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;">
<h4>test</h4>
<p>testtext...</p>
</div>
</div>
Die verwendete tmpl-Datei "Accordion.MooTools.tmpl" so:
Code: Select all
<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="accordion_{ID}" class="accordion">{TABS_ENTRIES}</div>
<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->
<script type="text/javascript">
window.addEvent('domready', function() {
new Accordion($('accordion_{ID}'), 'h3.toggler', 'div.element', {
opacity: false,
alwaysHide: true,
onActive: function(toggler, element){toggler.addClass('active');},
onBackground: function(toggler, element){toggler.removeClass('active');}
});
});
</script>
[/TABS_ENTRIES]
<!--TABS_END//-->
<!--TABS_ENTRY_START//-->
[TABCONTENT]
<h3 class="toggler">{TABTITLE}</h3>
<div class="element">
[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
[TABTEXT]{TABTEXT}[/TABTEXT]
</div>
[/TABCONTENT]
<!--TABS_ENTRY_END//-->
Michael
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 11:25
by juergen
Was mir beim überfliegen auffiel (und das kann auch voll daneben sein .. )
Wir reden über ein jquery Bauteil und ich lese mootools .. die vom JS annektierkte Klasse gibt es glücklicherweise nicht, bzw nur den ul Teil !?
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 12:07
by update
Code: Select all
<!--TABS_ENTRY_START//-->
[TABCONTENT]
<h3 class="toggler style="background:transparent url(/pics/tab-orgien/{TABTITLE}.png) 0 0 no-repeat;">{TABTITLE}</h3>
<div class="element">
[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
[TABTEXT]{TABTEXT}[/TABTEXT]
</div>
[/TABCONTENT]
<!--TABS_ENTRY_END//-->
Wie wär's damit?
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 12:20
by update
DF6IH wrote:Wir reden über ein jquery Bauteil
Echt? Wieso das? Du kennst doch meine eigenen kleinen animierten Tabs mit BG-Bild - die sind alle muuuh
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 12:21
by flip-flop
... nicht mehr aktuell:
JS-Bibliotheken unterliegen einer zeitlichen Dynamik, da diese permanent weiterentwickelt werden. Das hängt auch mit Neuerungen oder Fehlern in den Browsern zusammen.
Lässt man sich auf die Verwendung von diesen Bibliotheken ein, muss einem klar sein, dass spätestens nach einem Jahre die Seite auf Kompatibilität mit neueren Browsern überprüft werden muss. Es kann durchaus passieren, dass eine älter Bibliothek nicht mehr richtig funktioniert, bzw. beim Einsatz einer neueren Bibliothek das alte JS nicht mehr damit zusammenarbeitet.
Wenn spezielle Scripte verwendet werden die nicht dem Systemupdate unterliegen, ist es ratsam sich in JS und PHP ein wenig einzuarbeiten um zu verstehen wie das zusammenhängt. Dazu kommt nun noch die Eigenart eines CM-Systems.
Inhaltlicher Vorschlag siehe Claus.
Wir reden über ein jquery Bauteil
Ja, der angegebene Tread ist blöderweise sehr verwässert.
Ich weiß immer noch nicht wieso erst <ul> und nun auf einmal <div>.
Knut
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 12:33
by update
BTW: Ich persönlich finde die Variante mit div manchmal besser, denn dann kann man trigger und element an völlig verschiedenen Stellen plazieren...
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Tue 20. Dec 2011, 17:22
by juergen
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Wed 21. Dec 2011, 17:14
by erdbaer
Vielen Dank für die schnelle Hilfe!
Das Problemchen wurde mit den hier gemachten Vorschlägen gelöst.
Danke!
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Wed 21. Dec 2011, 19:48
by update
Ach komm!!
Jetzt sage auch genau,
wie, damit spätere Generationen was zu lernen bekommen (und wir natürlich auch)
Nur so gibt's ein funktionsfähiges Forum.
Re: Mootool-Accordion mit Hintergrundgrafik im Header
Posted: Thu 29. Dec 2011, 21:47
by erdbaer
Hallo,
hier nun meine Lösung:
Ich habe ein CP "Registertabs" verwendet".
Meine "Accordion.MooTools.tmpl" im Verzeichnis "/template/inc_cntpart/tabs/" sieht wie folgt aus:
Code: Select all
<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="accordion_{ID}" class="accordion">{TABS_ENTRIES}</div>
<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->
<script type="text/javascript">
window.addEvent('domready', function() {
new Accordion($('accordion_{ID}'), 'h3.toggler', 'div.element', {
opacity: false,
alwaysHide: true,
onActive: function(toggler, element){toggler.addClass('active');},
onBackground: function(toggler, element){toggler.removeClass('active');}
});
});
</script>
[/TABS_ENTRIES]
<!--TABS_END//-->
<!--TABS_ENTRY_START//-->
[TABCONTENT]
<div style="background:#EEEEEE url(/img/{TABHEADLINE}.gif) no-repeat right center;">
<h3 class="toggler">{SPACER:25x25}{TABTITLE}</h3>
</div>
<div class="element">
[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
[TABTEXT]{TABTEXT}[/TABTEXT]
</div>
[/TABCONTENT]
<!--TABS_ENTRY_END//-->
Durch die Zeile
<div style="background:#EEEEEE url(/img/{TABHEADLINE}.gif) no-repeat right center;">
ist es nun möglich, jedem Accordion per css ein individuelles Bild hinzuzufügen.
Und da die class "toggler" im aufgeklappten Zustand des Accordions zu "toggler active" wird, kann über diese beiden Klassen auch noch ein wechselnder Pfeil für das Auf- und Zuklappen eingebaut werden.
Das Ergebnis:
