NAVIGATION
Table of Contents
Skript in den <head> Bereich
Vorlagen/Template <head> Bereich
Forum: http://forum.phpwcms.org/viewtopic.php?p=101300#p101300 (OG)
Hier wird eine Technik vorgestellt, mit der verschiedene Aufrufe zu JavaScripten oder CSS-Dateien im <head> Bereich nach Bedarf abgelegt werden können. (<head> impfen).
Aus phpwcms heraus werden verschiedene JavaSkripte und CSS-Dateien automatisch abgelegt.
In Templates zu Artikeln oder CPs gibt es häufig den Zwang bestimmte Skripte oder CSS-Dateien mit der Seite zu laden. Bei entsprechendem Skript-Dateiname wird ein doppelter Aufruf vermieden (das Skript oder die CSS-Datei könnte schon vom System geladen worden sein).
Die Prozeduren können auch in einem frontend_render-Skript abgelegt werden.
Der Skript-Dateiname (hier: $block['custom_htmlhead']['…script…']) wird immer als Array Index verwendet.
Bsp. frontend_render-Skript:
<?php /* Load my special Mootools script */ $block['custom_htmlhead']['mootools.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools-release-1.11.js" type="text/javascript"></script>'; /* Load Mootools in newer releases < V1.4.3 r380 */ initMootools(); /* Load Mootools in newer releases >= V1.4.4 r381 */ initJSLib(); /* Load My custom JavaScript */ $block['custom_htmlhead']['my.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/my.js" type="text/javascript"></script>'; /* or alternatively */ $block['custom_htmlhead']['my.js'] = getJavaScriptSourceLink('template/inc_js/my.js'); /* Load some other <head> positions */ $block['custom_htmlhead']['favicon1'] = ' <link rel="icon" href="favicon.ico" type="image/x-icon" />'; $block['custom_htmlhead']['favicon2'] = ' <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />'; /* IE <=6 Style Hack */ $block['custom_htmlhead']['IEhack'] = ' <!--[if lt IE 7]><style type="text/css"> #inner { height:300px; } </style><![endif]-->'; /* Hm I want to overwrite some default CSS */ $block['custom_htmlhead']['mycss'] = ' <style type="text/css">' . LF . ' <!--' . LF; $block['custom_htmlhead']['mycss'] .= ' #header { ' . LF; $block['custom_htmlhead']['mycss'] .= ' background: #F9E931 url(template/img/mozilla.png) no-repeat left top !important;' . LF; $block['custom_htmlhead']['mycss'] .= ' background: #F9E931 url(template/img/ie.gif) no-repeat left top;' . LF; $block['custom_htmlhead']['mycss'] .= ' }'; $block['custom_htmlhead']['mycss'] .= LF . ' //-->' . LF . ' </style>'; ?>
<note>
Sollen php-Anweisungen direkt in einem Template ausgeführt werden, wird der TAG [PHP] ... Anweisungen ...[/PHP] verwendet.
Außerdem ist ein direkter Zugriff auf die oben gezeigt Variablen aus [PHP] ... [/PHP] nicht möglich, dazu muss dann $GLOBALS bemüht werden.
Bsp.:
$GLOBALS['block']['custom_htmlhead']['my.js']
anstatt
$block['custom_htmlhead']['my.js']
</note>
Sonderfall CSS-Datei in /template/inc_css/*
Hierzu gibt es ein eigenes Array ['block']['css'], das direkt das Verzeichnis /template/inc_css/* ansteuert.
Bsp.:
$GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css';
Ab phpwcms r411:
Forum: …and some more too
<note important> Notation: <!-- [CSS:|JS:] Anweisung -->
Die gekennzeichneten Leerzeichen sind zwingend!! </note>
CSS:
<!-- CSS: {TEMPLATE}inc_css/my.css -->
- Als Inline CSS:
<!-- CSS: body {background:yellow;} --> <!-- CSS: body { background:yellow; } a { text-decoration: none; background: transparent url({TEMPLATE}img/link.png) no-repeat left center; padding-left: 25px; } -->
JavaScript:
Aktuell im Sitetemplate ausgewählte (aber nicht standardmäßig zu laden aktivierte) js-libary starten:
<!-- JS: initJSLib -->
- andere JS-Dateine einbinden
<!-- JS: {TEMPLATE}inc_js/calendarDateInput/calendarDateInputX.js --> <!-- JS: {TEMPLATE}inc_js/MyFolder/MyScript.js -->
- Plugins einbinden (jQuery) z.B. mit den Dateien in:
- template/lib/jquery/plugin/ui-1.8.custom.min.js
- template/lib/jquery/plugin/jquery.easing.min.js
<!-- JS: ui-1.8.custom.min --> <!-- JS: easing.min -->
Analog dazu für MooTools :
- Plugins einbinden z.B. MooTools 1.2x mit den Dateien in:
- template/lib/mootools/plugin-1.2/mootools.flext.js
- template/lib/mootools/plugin-1.2/mootools.Quickie-yui.js
<!-- JS: flext --> <!-- JS: Quickie-yui -->
- Laden von More Komponenten:
<!-- JS: myplugin --> <!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->
- Mehrzeiliges JavaScript als <script /> im “head” Bereich.
Alle gleichen JavaScript-Abschnitt wie in sich wiederholenden ContentParts einmal gerendert.
Um als JavaScript erkannt zu werden brauchen wir ;, // und/oder /*.
Der Abschluss einer JavaScript Zeile mit einem ; ist der sicherste Weg:
<!-- JS: // My Custom JS alert('hey dude it works as expected'); -->
Modul <head> Bereich
Forum: http://forum.phpwcms.org/viewtopic.php?p=113969#p113969 (breitsch)
Um CSS- oder JS-Dateien in die Frontendeausgabe des Moduls im <head> Bereich einzubinden wird folgender Code hinzugefügt:
// ==== load js functions $block['custom_htmlhead']['javascript.js'] = ' <script src="'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/js/javascript.js" type="text/javascript"></script>'; // ==== load inline css $block['custom_htmlhead']['inlinecss.css'] ='<style type="text/css">'.LF.' .classname {property:value;}'.LF.'</style>'; // ==== load external style sheet $GLOBALS['block']['custom_htmlhead']['externalcss.css'] = LF.' <style type="text/css">'.LF.'@import url("'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/css/externalcss.css");'.LF.'</style>';
<note important>
Der letzte Eintrag (Schlüssel → siehe Skript-Dateiname oben) muss einzigartig sein.
$block['custom_htmlhead']['…script…']
</note>
