| Tutorial: Menue-Modul mit MenuMatic |
|
Kategorie: Tutorials | Geschrieben von Gerald Martin am Mittwoch, 15. April 2009 | 4838x gelesen
Aber fangen wir von vorn an: MenuMatic von greengeckodesign (Jason J. Jaeger) ist eine auf SuckerFish und Mootools basierende JavaScript-Applikation. Das heißt, man muss
a) realisiert man am besten mit dem Media 65 Joomla Menu Module (Registrierung für Download notwendig). Im Gegensatz zum "herkömmlichen" mod_mainmenu hat man noch weitere Möglichkeiten, IDs und Klassen für CSS zu definieren (siehe Screenshot): <ul class="menu" id="ptm-nav"> <li class="current"><a href="#"><span>Startseite</span></a> <ul> <li><a href="#"><span>Joomla!-Lizenz</span></a></li> <li><a href="#"><span>Mehr über Joomla!</span></a> <ul> <li><a href="#"><span>FAQ</span></a></li> </ul> </li> </ul> </li> <li>[...]</li> </ul> So sollte die Struktur aussehen, wenn die "klassische" Suckerfish-Syntax (Suckerfish- Dropdowns by D. Griffiths and D. Webb )angewendet wird. b) ist etwas tricky, da Joomla! - derzeit in Version 1.5.10 - Mootools in der Version 1.11 verwendet und MenuMatic die Version 1.2 verlangt. Nun sollte man nicht einfach die vorhandene Bibliothek [joomla-root]/media/system/js/mootools.js ersetzen, sondern dern Core möglichst in Ruhe lassen, damit 1. die Funktion und 2. die Updatefähigkeit des Systems erhalten bleibt. Abgesehen davon wird an verschiedenen Stellen berichtet, dass ein Adhoc-Upgrade auf Mootools 1.2 Probleme mit dem Backend-Menü verursacht. Aus diesen Gründen lassen wir die originale Mootools-Bibliothek von Joomla! in Ruhe und beschränken uns ausschließlich auf die Integration in das Template. Auf der Grundlage dieser Anleitung gehen wir die Sache an:
<jdoc:include type="head" />
danach die Einbindung von mootools.js verhindern: <?php /* --- This removes any default Scripts from the Header Buffer --- */ $header = $this->getHeadData(); // Get the current HEAD buffer $header['scripts'] = array(); // Clear all current 'scripts' entries $this->setHeadData($header); // Update the HEAD buffer /* --- We add the MooTools Framework manually, see below --- */ ?>
zuletzt die eigenen Klassen für Mootools 1.2.1 "manuell" einbinden: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-1.2.1-core.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-1.2-more.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-core.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-more.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/↵ <?php echo $this->template ?>/js/mootools-compact-custom.js"></script>
Damit haben wir die Grundlagen für MenuMatic abgeschlossen. Zuguterletzt muss MenuMatic selbst eingebunden anhand einer Instanz der Klasse zum Arbeiten bewegt werden:
<!-- Load the MenuMatic Class -->
<script language="JavaScript" type="text/javascript" src="↵
<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>↵
/js/MenuMatic_0.68.2.js"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
</body>
</html>
Im Beispiel wird mit Absicht die Version MenuMatic_0.68.2.js verwendet.
Ich hoffe, die Anleitung hilft dem ein- oder anderen weiter.
Über Resonanz freue ich mich.
Powered by AkoComment Tweaked Special Edition v.1.4.6 |
|||||||||
Kommentare (3)
