NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:technics:internal-function-call:script-into-head-area [2010/05/05 15:58] Knut Heermann (flip-flop) |
english:technics:internal-function-call:script-into-head-area [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 11: | Line 11: | ||
| Always use a frontend_render script that looks like this - the script filename //(here: $block['custom_htmlhead']['...script...'])// is always used as array index: | Always use a frontend_render script that looks like this - the script filename //(here: $block['custom_htmlhead']['...script...'])// is always used as array index: | ||
| - | <code php|h script into head area |h> | + | <code php> |
| <?php | <?php | ||
| Line 45: | Line 45: | ||
| ?> | ?> | ||
| </code> | </code> | ||
| + | |||
| \\ | \\ | ||
| + | |||
| **Special case CSS-file at /template/inc_css/*** | **Special case CSS-file at /template/inc_css/*** | ||
| In this case we can use an own array ['block']['css']. It´s home base is /template/inc_css/* . \\ | In this case we can use an own array ['block']['css']. It´s home base is /template/inc_css/* . \\ | ||
| Line 52: | Line 54: | ||
| <code php> | <code php> | ||
| $GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css'; | $GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css'; | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | |||
| + | |||
| + | ==== Since phpwcms r411: ==== | ||
| + | |||
| + | Forum: [[http://forum.phpwcms.org/viewtopic.php?p=127961#p127961|…and some more too]] | ||
| + | |||
| + | <note important> | ||
| + | **Notation:** %%<!--%%##%% %%##%%[CSS:|JS:]%%##%% %%##instruction##%% %%##%%-->%% | ||
| + | |||
| + | The designated spaces##%% %%## are mandatory!! | ||
| + | </note> | ||
| + | |||
| + | \\ | ||
| + | |||
| + | === CSS: === | ||
| + | |||
| + | |||
| + | <code css> | ||
| + | <!-- CSS: {TEMPLATE}inc_css/my.css --> | ||
| + | </code> | ||
| + | \\ | ||
| + | |||
| + | - As Inline CSS: Equal CSS used this way is rendered only once and also always put into the <head> section. | ||
| + | |||
| + | <code 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; | ||
| + | } | ||
| + | --> | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | |||
| + | === JavaScript: === | ||
| + | |||
| + | |||
| + | <code html> | ||
| + | <!-- JS: {TEMPLATE}inc_js/calendarDateInput/calendarDateInputX.js --> | ||
| + | <!-- JS: {TEMPLATE}inc_js/MyFolder/MyScript.js --> | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | - Integrate plugins (jQuery) e.g. using the files: | ||
| + | * template/lib/jquery/plugin/ui-1.8.custom.min.js | ||
| + | * template/lib/jquery/plugin/jquery.easing.min.js | ||
| + | |||
| + | <code html> | ||
| + | <!-- JS: ui-1.8.custom.min --> | ||
| + | <!-- JS: easing.min --> | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | Similarly, for MooTools: | ||
| + | |||
| + | Load Plugin or More as described and based on current JavaScript framework/library. It will also render <srcipt src="" /> in head. | ||
| + | |||
| + | - Integrate e.g. MooTools 1.2x with the files in: | ||
| + | * template/lib/mootools/plugin-1.2/mootools.flext.js | ||
| + | * template/lib/mootools/plugin-1.2/mootools.Quickie-yui.js | ||
| + | |||
| + | <code html> | ||
| + | <!-- JS: flext --> | ||
| + | <!-- JS: Quickie-yui --> | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | - Loading More Components: | ||
| + | |||
| + | <code html> | ||
| + | <!-- JS: myplugin --> | ||
| + | <!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion --> | ||
| + | </code> | ||
| + | \\ | ||
| + | |||
| + | - And the best now is multi line JavaScript put as <script /> in head section. | ||
| + | |||
| + | Be aware – every equal JavaScript section like used in looped Content Parts is rendered only once. \\ | ||
| + | To be detected as JavaScript it will need ##%%;%%##, ##%%//%%## und/oder ##%%/*%%##. \\ | ||
| + | Just end your JavaScript line by ##%%;%%## is the safest way: | ||
| + | |||
| + | <code js> | ||
| + | <!-- JS: | ||
| + | // My Custom JS | ||
| + | alert('hey dude it works as expected'); | ||
| + | --> | ||
| </code> | </code> | ||
| Line 64: | Line 161: | ||
| To get css or js files included in the frontend output (in the head) of your module add them to your code like: | To get css or js files included in the frontend output (in the head) of your module add them to your code like: | ||
| - | <code php|h script into module head area |h> | + | <code php> |
| // load js functions | // load js functions | ||
| $block['custom_htmlhead']['javascript.js'] = ' <script src="'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/js/javascript.js" type="text/javascript"></script>'; | $block['custom_htmlhead']['javascript.js'] = ' <script src="'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/js/javascript.js" type="text/javascript"></script>'; | ||
