Mootool-Accordion mit Hintergrundgrafik im Header

[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?

[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

[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

[flip-flop]

Ich habe keine Ahnung wie dein Template aussieht, jedoch steht doch irgenwo

Code: Select all

<ul class="tab-navigation">

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

[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

[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 !?

[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?

[update]

Wir reden über ein jquery Bauteil

Echt? Wieso das? Du kennst doch meine eigenen kleinen animierten Tabs mit BG-Bild - die sind alle muuuh

[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

[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...

[juergen]

Passend zum Thema: http://www.tabsgenerator.com/?page=index

[erdbaer]

Vielen Dank für die schnelle Hilfe!
Das Problemchen wurde mit den hier gemachten Vorschlägen gelöst.

Danke!

[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.

[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: