Aufruf der JS-Frameworks

[kmstario]

Nabend und Hallöchen,

ich habe ein wenig mit der neuen Konstellation der Mootools rumgespielt und wollte ein simples Accordeon starten.

Ich habe das Original Beispiel von demos.Mootools probiert.

Doch egal welche der neuen Einsatzvarianten ich versuche, es funktioniert nicht.
Es sieht so aus als ob die Pfadangaben zum more/FX Ordner nicht stimmen:

Code: Select all

Eingabe Variante 1:
[PHP]
$js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion';
renderHeadJS($js);
[/PHP]

Ausgabe:
  <script type="text/javascript" src="template/lib/mootools/mootools-1.1-yc.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.1/mootools.MORE:Fx/Fx.Elements,Fx/Fx.Accordion.js"></script>
------------------

Eingabe Variante 2:

$mootools_more = array(
        'Fx/Fx.Elements',
        'Fx/Fx.Accordion'
);
initJSPlugin($mootools_more, true);

Ausgabe:
  <script type="text/javascript" src="template/lib/mootools/mootools-1.1-yc.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.1/mootools.Array.js"></script>
-----------------------

Eingabe Variante 3:
<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->

Ausgabe:
  <script type="text/javascript" src="template/lib/mootools/mootools-1.1-yc.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.1/mootools.MORE:Fx/Fx.Elements,Fx/Fx.Accordion.js"></script>

Den Aufruf starte ich in einem Template von imagetext
Die CSS habe ich auch angehangen(für die Funktion selbst ja unwichtig) und die drei Tabs habe ich Komplett als Quelltext in einen Contenpart kopiert.

Worann kann es liegen?

Gruß Andreas

[flip-flop]

Hallo,

ich habe keine Ahnung was du dort wie zusammenbringst.

- Welche CMS-Version verwendest du

hier ein Beispiel mit dem CP Register Tabs: Accordion Tabs (MooTools v1.2x)

Das grundsätzliche Schema lautet wie folgt:

Code: Select all

<div id="accordion">

	<h3 class="toggler">Schalterbalken</h3>
	<div class="element">
		<!-- CONTENT //-->
	</div>
	
	<h3 class="toggler">Schalterbalken</h3>
	<div class="element">
		<!-- CONTENT //-->
	</div>

	<h3 class="toggler">Schalterbalken</h3>
	<div class="element">
		<!-- CONTENT //-->
	</div>
	
</div> <!-- ENDE accordion //-->

(Tip: Verwende Mootools V1.2.x)

Knut

[Oliver Georgi]

Mootools More zum Einzelladen existiert nur für MooTools 1.2.

Bei 1.1 muss die benötigte MooTools More JS Datei gesondert geladen werden.

[kmstario]

Moin Moin,

Mensch Flip Flop, hast dich ja mit der Beschreibung in der Wiki wieder mal selbst übertroffen, Klasse

Meine Version war eine r380 mit Updates auf r397. Ich hatte in einem anderen Beitrag von dir hier im Forum ( Beitrag >> ) verstanden,
das die Mootools automatisch mit den neuen Befehlszeilen mitgeladen werden, unabhänging von den Einstellungen in den Vorlagen, wo ich das Häkchen bei "immer laden" raus genommen hatte.

initJSPlugin('SimpleTabs'); ruft gleichzeitig auch das richtige JS-Framework auf.

Habe ich wohl etwas missverstanden und dachte die 1.1er im Header kamen durch den neuen Aufruf fürs Accordion mit.

Nun lädt sich egal ob ausgewählt oder nicht, immer das Framework was gerade unter Vorlagen angezeigt wird(Standart 1.1) ----> Fehler nach Update? oder vieleicht generell
Ich habe es genau geprüft und Mootools werden immer geladen, ohne eingeloggt zu sein und alle zusätzlichen Scripte aus.

Naja, ich werde heut mal die neue Anleitung ausprobieren, obwohl ich schlussendlich wenn es funzt, lieber wieder eine kleine Costum-Lösung bastele um im Accordion ganze CPs unterbringen zu können.
(Ähnlich wie, ich glaub Pepe war es, mal beschrieben hat).

Das finde ich absolut Genial an den Templates für die CPs, das fast alles realisierbar ist, nur mit ein paar kleinen Templates.

Frage nochmal zum Schluss, ist das so mit den Frameworks laden richtig, auch ohne Häkchen, oder fehlt da noch die Möglichkeit Vorlage ohne Framework

sonnige Grüße aus Potsdam, Andreas

[zuker]

accordeon doesn’t play
It seems that all files are loaded, but...

Code: Select all

<link rel="stylesheet" type="text/css" href="template/inc_css/specific/mootools/reg_tabs_accordion01.css" />

  <script type="text/javascript" src="template/lib/mootools/mootools-1.2-core-yc.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.2/mootools.MORE:Fx/Fx.Elements,Fx/Fx.Accordion.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js"></script>

I use r396.

By the way, in the bottom of accordeon description page Accordion Tabs (MooTools v1.2x) there is a mistake. Instead of reg_tabs_accordiontabs01.css and reg_tabs_simpletabs01.css it should be
reg_tabs_accordion01.css

[Oliver Georgi]

accordeon doesn’t play

It's false loaded.

This should be enough:

Code: Select all

<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->

[flip-flop]

@zuker:
.... Accordeon description corrected.

Is there any more extension available in template/lib/mootools/more/*



@kmstario:

initJSPlugin('SimpleTabs'); ruft gleichzeitig auch das richtige JS-Framework auf.

ist absolut richtig.
Wenn in der Vorlage "[ ] immer laden" nicht aktiviert ist, wird auch kein Core-Set geladen, außer irgendwo in einem Template oder Renderer wird es doch noch versteckt aufgerufen. Dieses Problem gab es in den ersten Versionen.

Code: Select all

<script type="text/javascript" src="template/lib/mootools/plugin-1.1/mootools.MORE:Fx/Fx.Elements,Fx/Fx.Accordion.js"></script>

Passiert wenn du das V1.1 Set damit startest. Hierzu gibt es keine More Plugins.

Update: config sauber angepasst?
Die Anzeigereihenfolge der Bibliotheken wird in der config festgelegt.
Nach einem Update von < r381 muss mit Sicherheit die Vorlage einmal gespeichert werden, damit diese Neuerungen übernommen werden.

Bitte MooTools V1.2 verwenden (Ist ja auch für diese Version beschrieben).



Moo-More Plugins können nicht mit der MooTools 1.1 auf diese art und Weise geladen werden.

Hier das Accordion-Plugin für die Version 1.1 (Nicht empfohlen).

template/lib/mootools/plugin-1.1/mootools.AccordionTabs.js

Code: Select all

/* MooTools V1.1 */
window.addEvent('domready', function() {
	
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});

	//add click event to the "add section" link
	$('add_section').addEvent('click', function(event) {
		event.stop();
		
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
		
	});
});

Im Core v1.1 hat Oliver einige More Erweiterungen untergebracht. Das ist der Grund, weshalb Accordion mit dem Core v1.1 funktioniert.

Knut

[update]

Statt

Code: Select all

        toggler.setStyle('color', '#41464D');

könnte man auch mal sowas versuchen

Code: Select all

         onActive: function(toggler, element){
            toggler.addClass("accordion-selected");
         },
         onBackground: function(toggler, element){
            toggler.removeClass("accordion-selected");
  }

und schwupps! hat man eine class für den aktiven Tab... und muss nicht im JS rumfummeln

[zuker]

Thanks Knut.
It works with MooTools V1.2. It was my fault. I have found that not all mootools files were uploaded during upgrade from r392 to r393.

It works with It MooTools 1.1. too.

One more question, how to make accordion not to open element on load?

[flip-flop]

http://mootools.net/docs/more/Fx/Fx.Accordion

[zuker]

Hi,
I have found the answer. May be it will be useful for someone else.

If you don’t want the element to opened on load, just try to put this code in to file /template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js :

Code: Select all

window.addEvent('domready', function() {
 
    //create our Accordion instance
    var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
       opacity: 0.5, duration: 500, alwaysHide: true, show: -1, 
        onActive: function(toggler, element){
            toggler.setStyle('color', '#41464D');
        },
        onBackground: function(toggler, element){
            toggler.setStyle('color', '#528CE0');
        }
    });
	

[Jensensen]

I'm JavaScript-illiterate but I think mootools v1.2 has also some kind of new syntax.
In this file
/template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js
I tried the following code:

Code: Select all

/* MooTools V1.2 */
window.addEvent('domready', function() {
	
	//create our Accordion instance
	//var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
	var myAccordion = new Fx.Accordion($$('.toggler'), $$('.element'), {
		//opacity: false,
		opacity: 0.5,
		duration: 1250,
		//alwaysHide: true,
		//show: -1,
		display: -1,
		
		// thanks claus
		onActive: function(toggler, element){
			toggler.addClass("accordion-selected");
		},
		onBackground: function(toggler, element){
			toggler.removeClass("accordion-selected");
		}
	});
});

and it works.

[FN-Media]

Hi

also ich beiss mir hier seit stunden die Zähne dran aus.

Nach dieserr Anleitung hab ich das alles eingebaut und kriegs nicht zum laufen.

http://ap-anlagenbau.it/index.php

Code: Select all

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="template/inc_css/frontend.css" />
  <link rel="stylesheet" type="text/css" href="template/inc_css/specific/mootools/reg_tabs_accordion01.css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2/mootools-yui-compressed.js"></script>
  <script type="text/javascript" src="template/lib/mootools/more/Core/More.js"></script>
  <script type="text/javascript" src="template/lib/mootools/more/Fx/Fx.Elements.js"></script>
  <script type="text/javascript" src="template/lib/mootools/more/Fx/Fx.Accordion.js"></script>
  <script type="text/javascript" src="template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js"></script>
</head>

Code: Select all

<div style="margin:10px 0 0 0;padding:0;" class="spaceBeforeCP"></div>
 
<div id="rgt_content">
 
    <h1>register</h1>
    
 
    <div id="accordion">
        
    </div>
 
</div> <!--  END id="rgt_content" //-->
 
</div>

config geändert config/phpwcms|conf.inc.php

Code: Select all

$phpwcms['allow_cntPHP_rt']   = 1; //allow PHP replacement tags and includes in content parts

template/inc_cntpart/tabs|accordiontabs01.tmpl

Code: Select all

/* ********************************************************************
  accordion01.tmpl for the CP Register (Tabs)
 
  02.02.10 KH (flip-flop) - http://planmatrix.de Knut Heermann
 
  Corresponding with the file /template/inc_css/specific/reg_tabs_accordion01.css
  Uses the js file lib/mootools/plugin-1.2/mootools.AccordionTabs.js
  - and lib/mootools/mootools-1.2-core-yc.js
  - Put this file into the Folder /template/inc_cntpart/tabs/*
 
  - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1;
*********************************************************************** */
 
<!--TABS_START//-->
 
<div id="rgt_content">
 
    [TITLE]<h1>{TITLE}</h1>[/TITLE]
    [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
 
    <div id="accordion">
        [TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]
    </div>
 
</div> <!--  END id="rgt_content" //-->
 
[PHP]
// *******************************************************
// Load Mootools Framework //(set in the template)//.
 
    // ---- Init Moore function  v2
    $js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion';
    renderHeadJS($js);
 
    // ---- Loading the right CSS-file.
    $GLOBALS['block']['css']['reg_tabs_accordion01'] = 'specific/mootools/reg_tabs_accordion01.css';
 
    // ---- Loading the JS Plugin
    initJSPlugin('AccordionTabs');
 
// *******************************************************
[/PHP]
 
<!--TABS_END//-->

template/inc_css/specific/mootools|reg_tabs_accordion01.css = vorhanden

template/lib/mootools/plugin-1.2|mootools.AccordionTabs.js =vorhanden

Vorlage:

<div style="align:left;float:left"><font color="#000000">{NAV_ROW}&nbsp;|&nbsp;{NAV_ROW:54:1}&nbsp;|&nbsp;[INT index.php?english]EN - English[/INT]you are here: {BREADCRUMB}</font></div>
<br />{CONTENT}

CN Part:


Also mir gehen nun die Ideen aus. Hat jemand einen Tip für mich?

[flip-flop]

Die Register werden auf der Seite nicht erzeugt.
Lege spaßeshalber einmal ein drittes an.

[FN-Media]

Guten Morgen

das brachte leider auch nichts.