koko0015
Threadersteller
Dabei seit: 25.08.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 25.08.2011 21:42
Titel jQuery component in Typo3 einbinden |
  |
|
Hallo zusammen!
Leider bin ich in Typo3 noch nicht sehr erfahren, muss aber eine jQuery Komponente (mb.extruder) einbauen und verzweifel so langsam daran.
Diese Komponente benötigt einige jQuery .js, hat ein eigenes .js, ein .css und besteht dann noch aus einer html-Datei, die auch noch ein wenig css und halt ein wenig js mit den betreffenden Aufrufen enthält.
Die Einbindung der benötigten jquery, .css und .js dateien habe ich im haupttemplate im header mittels Typoscript vorgenommen:
| Code: | #page.headerData.121 = TEXT
#page.headerData.121.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/mbExtruder.js"></script>
#page.headerData.122 = TEXT
#page.headerData.122.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.metadata.js"></script>
page.headerData.123 = TEXT
page.headerData.123.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.mb.flipText.js"></script>
page.headerData.124 = TEXT
page.headerData.124.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.hoverIntent.min.js"></script>
page.headerData.125 = TEXT
#page.headerData.125.value = <link rel="stylesheet" type="text/css" href="fileadmin/template/mobile/css/mbExtruder.css"> |
Dann habe ich auch das javascript aus der "Herz"-html-Datei mittels Typoscript in die Seite eingefügt.
| Code: | page.10 {
template.file=fileadmin/template/html/vorlage_gruppe.html
workOnSubpart = DOCUMENT
marks {
ADRESSE = TEXT
ADRESSE.value = XXX <a class="mail" title="Opens window for sending email" href="javascript:linkTo_UnCryptMailto('pdlowr-lqirCurvlhu1gh');">info@xxx.de</a>
START_GROUP_LEFT = CONTENT
START_GROUP_LEFT {
table = tt_content
select.orderBy = sorting
select.where = colPos=1
}
START_GROUP_RIGHT = CONTENT
START_GROUP_RIGHT {
table = tt_content
select.orderBy = sorting
select.where = colPos=2
}
START_GROUP_CONTENT = CONTENT
START_GROUP_CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos=0
}
}
includeCSS {
extruderCSS = fileadmin/template/mobile/css/mbExtruder.css
}
includeJS {
# jQuery = fileadmin/template/mobile/inc/jquery.metadata.js
mbExtruder = fileadmin/template/mobile/inc/mbExtruder.js
}
# Einbindung Extruder.js basierend auf HTML-Template
headerData.123 = HTML
headerData.123.value (
// Hier Dein Extruder-FE-Script also:
<script>
$(function(){
$("#extruderLeft"<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
/*
$("#extruderLeft"<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:false,
accordionPanels:false,
onExtOpen:function(){},
onExtContentLoad:function(){$("#extruderLeft"<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.openPanel();},
onExtClose:function(){}
});
*/
$("#extruderLeft1"<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.buildMbExtruder({
position:"left",
width:300,
heigth:350,
extruderOpacity:.8,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script>
)
# hier folgt der Rest Deines Setups
}
} |
Dann habe ich eine Seite angelegt in der ich ein HTML-Inhaltselement eingefügt habe
| Code: | <div class="wrapper" style="height:500">
<h1> </h1>
<div class="text">
<h2> </h2>
<br>
<br>
</div>
<div class="longText" style="position:relative;padding-left:50px">
<div id="extruderLeft1" class="a {title:' MOBILE', url:'fileadmin/template/mobile/parts/extruderLeft1.html'}"></div>
<!--<div id="extruderLeft2" class="a {title:'content in place'}">
|
, aus dem der Javascript aufgerufen wird, und trotzdem erscheint der blöde extruder nicht auf der seite.
Habt ihr ne Idee, woran es liegen könnte?
Viele Grüße,
koko
|
|
Willkommen auf dem Portal für Mediengestalter
