mp_jquery

Medienpalast - JQuery

Enthaltene Bibliotheken

• jQuery (Schlüssel: jquery)
• jQueryUi (Schlüssel: jquery_ui)
• jQueryUiTouchPunch (Schlüssel: jquery_ui_touch_punch)
• Picturefill (Schlüssel: picturefill)
• Swfobject (Schlüssel: swfobject)

ViewHelpers

Als erstes sollten Sie den Namensraum einbinden:

{namespace jquery=Medienpalast\MpJquery\ViewHelpers}

ActivateLibViewHelper aktivieren

Beispiele:

• <jquery:activateLib>jquery_ui</jquery:activateLib>
• <jquery:activateLib libKey="jquery_ui" />
• {jquery:activateLib(libKey:"jquery_ui")}}

AddAdditionalJsViewHelper hinzufügen

Beispiel1 (mind. notwendige Parameter):

<jquery:addAdditionalJs key="test">
    <script type="text/javascript">
        <lib:format.jsCdata>
        <![CDATA[[
        //alert('dada');
        ]]>
        </lib:format.jsCdata>
    </script>
</jquery:addAdditionalJs>>

Beispiel2 (javascript im Kopf einbinden):

<jquery:addAdditionalJs key="test2" position="HEAD">
    <script type="text/javascript">
        <lib:format.jsCdata>
            <![CDATA[[
            //alert('dada2');
            ]]>
        </lib:format.jsCdata>
    </script>
</jquery:addAdditionalJs>>

Beispiel3 (javascript am ende des Body Tags einbinden):

<jquery:addAdditionalJs key="test3" position="BODY">
    <script type="text/javascript">
        <lib:format.jsCdata>
            <![CDATA[[
            //alert('dada3');
            ]]>
        </lib:format.jsCdata>
    </script>
</jquery:addAdditionalJs>>

Beispiel4 (javascript in a attribut):

{jquery:addAdditionalJs(key:"test4",position:"BODY",js:'<script type="text/javascript">alert(\'wahoo\');</script>')} }

SwfobjectViewHelfer

Beispiel1 (minimal notwendige Parameter):

<jquery:swfobject swfPath="fileadmin/pfad/zum/swf" width="600" height="400">
    <div>Alternative inhalt</div>
</jquery:swfobject>

Beispiel2 (alle Parameter):

<jquery:swfobject swfPath="fileadmin/pfad/zum/zum/swf" id="flashContentId" width="600" height="400" swfVersion="9.0.0" expressInstallPath="fileadmin/templates/swf/expressInstall.swf" flashVars="{flashvar1:'val1',flashvar2:'val2'}" params="{param1:'param1val',param2:'param2val'}" attributes="{attribute1:'attr1val',attribute1:'attr1val'}">
    <div>Alternative inhalt</div>
</jquery:swfobject>

Lib Registrieren

1. Beispiel "jquery_ui":

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['mp_jquery']['libs']['jquery_ui'] = array(
    // Mögliche Positionen: oben, unten, vorher:<key>, nachher:<key>>.
    Position' × × × × × × × × × × × ×× × × × × ×'after:jquery',
    // mögliche Seitenverfügbarkeiten: \Medienpalast\MpJquery\Utility\JqueryUtility::PAGE_POSITION_HEAD, \Medienpalast\MpJquery\Utility\JqueryUtility::PAGE_POSITION_BODY
    
    
        jquery'
    ),
    // entweder Dateipfad (vollständiger URL- oder rel. Pfad) oder Skript-Tag
    
    // entweder Dateipfad (vollständiger URL- oder rel. Pfad) oder Skript-Tag
    
    // Hinzufügen von Defer-Attributen zu neuen Skript-Tags
    jsFilesAddDeferAttribute'  => TRUE,
    // async-Attribut zu neuen Skript-Tags hinzufügen
    jsFilesAddAsyncAttribute'  => TRUE,
    zusätzliche Js' × × × × × × × × => ''',
    // muss \Medienpalast\MpJquery\Hooks\LibHookInterface implementieren
    
);

2. Beispiel "picturefill":

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['mp_jquery']['libs']['picturefill'] = array(
    // Mögliche Positionen: oben, unten, vorher:<key>, nachher:<key>>.
    Position' × × × × × × × × × × <> '',
    // mögliche Seitenverfügbarkeiten: \Medienpalast\MpJquery\Utility\JqueryUtility::PAGE_POSITION_HEAD, \Medienpalast\MpJquery\Utility\JqueryUtility::PAGE_POSITION_BODY
    
    
    // entweder Dateipfad (vollständiger URL- oder rel. Pfad) oder Skript-Tag
    
    // entweder Dateipfad (vollständiger URL- oder rel. Pfad) oder Skript-Tag
    
        \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath('mp_jquery') . Ressourcen/Public/Js/Picturefill/external/matchmedia.js',
        \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath('mp_jquery') . Ressourcen/Public/Js/Picturefill/picturefill/picturefill.mod.js',
    ),
    // Hinzufügen von Defer-Attributen zu neuen Skript-Tags
    jsFilesAddDeferAttribute'  => FALSE,
    // async-Attribut zu neuen Skript-Tags hinzufügen
    jsFilesAddAsyncAttribute'  => FALSE,
    zusätzliche Js' × × × × × × × × => ''',
);