Suche
Teilen
startseite » forum

jquery mbextruder einbinden?

  • 0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    22. 08. 2011, 13:15

    Hatte gerade die falsche Kategorie gewählt, hoffe, es ist jetzt die richtige, ansonsten bitte verschieben....

    Hallo zusammen!

    Ich möchte auf einer Seite den jquery mb.extruder einbauen. ([url=]http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/[/url]
    Offline habe ich ihn jetzt designmäßig soweit angepasst, dass es meinen vortsellungen entspricht.
    Ich habe bloß keine ahnung, wie ich den ins Typo einbauen soll. zunächt einmal habe ich die ganzen dateien hochgeladen.
    habe es versucht als Inhaltselement einzubauen, als html und als "gemogeltes" php (html mit <??> oben drin), aber das klappt beides nicht.

    Die Herzdatei sieht aus wie unten, die .css und.js-Aufrufe habe ich mit TS in den Header der Seite gepackt. Aber es steht ja noch immer ein wenig Style und js drin, und daran verschluckt sich Typo....

    habe leider noch nie eine jquery komponente eingebunden, könnt ihr mir tipps geben, wie ich den extruder zum laufen bringe?

    Vielen Dank schonmal,
    koko

    1. <!--
    2.   ~ jquery.mb.components
    3.   ~ Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
    4.   ~ email: mbicocchi@open-lab.com
    5.   ~ site: http://pupunzi.com
    6.   ~
    7.   ~ Licences: MIT, GPL
    8.   ~ http://www.opensource.org/licenses/mit-license.php
    9.   ~ http://www.gnu.org/licenses/gpl.html
    10.   -->
    11.  
    12.  
    13.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    14.   <title>mb.extruder</title>
    15.   <style type="text/css">
    16.     body{
    17.       font-family:Arial, Helvetica, sans-serif;
    18.       margin:10px;
    19.     }
    20.     .wrapper{
    21.       position:relative;
    22.       font-family:Arial, Helvetica, sans-serif;
    23.       padding-top:90px;
    24.       padding-left:50px;
    25.       width:80%;
    26.       height:500px;
    27.       margin:auto
    28.     }
    29.     .wrapper .text{
    30.       font-family:Arial, Helvetica, sans-serif;
    31.       padding-top:50px;
    32.     }
    33.     .wrapper h1{
    34.       font-family:Arial, Helvetica, sans-serif;
    35.       font-size:26px;
    36.     }
    37.     .longText{
    38.       margin-top:20px;
    39.       width:600px;
    40.       height:350px;
    41.       font:18px/24px Arial, Helvetica, sans-serif;
    42.       color:gray;
    43.     }
    44.     span.btn{
    45.       padding:10px;
    46.       display:inline-block;
    47.       cursor:pointer;
    48.       font:12px/14px Arial, Helvetica, sans-serif;
    49.       color:#006;
    50.       background-color:#006;
    51.       -moz-border-radius:10px;
    52.       -webkit-border-radius:10px;
    53.       -moz-box-shadow:#999 2px 0px 3px;
    54.       -webkit-box-shadow:#999 2px 0px 3px;
    55.     }
    56.     span.btn:hover{
    57.       background-color:#006;
    58.     }
    59.  
    60.       /*
    61.       custom style for extruder
    62.       */
    63.  
    64.     .extruder.left.a .flap{
    65.       font-size:18px;
    66.       color:white;
    67.       top:0;
    68.       padding:10px 0 10px 10px;
    69.       background:#006;
    70.       width:30px;
    71.       position:absolute;
    72.       right:0;
    73.       -moz-border-radius:0 10px 10px 0;
    74.       -webkit-border-top-right-radius:10px;
    75.       -webkit-border-bottom-right-radius:10px;
    76.       -moz-box-shadow:#666 2px 0px 3px;
    77.       -webkit-box-shadow:#666 2px 0px 3px;
    78.     }
    79.  
    80.     .extruder.left.a .content{
    81.       border-right:3px solid #772B14;
    82.     }
    83.  
    84.  
    85.     .extruder.top .optionsPanel .panelVoice a{
    86.       border-bottom:1px solid #000;
    87.     }
    88.  
    89.     .extruder.left.a .flap .flapLabel{
    90.       background:#006;
    91.     }
    92.   </style>
    93.  
    94.   <link href="css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
    95.  
    96.   <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
    97.   <script type="text/javascript" src="inc/jquery.hoverIntent.min.js"></script>
    98.   <script type="text/javascript" src="inc/jquery.metadata.js"></script>
    99.   <script type="text/javascript" src="inc/jquery.mb.flipText.js"></script>
    100.   <script type="text/javascript" src="inc/mbExtruder.js"></script>
    101.   <script type="text/javascript">
    102.  
    103.  
    104.  
    105.     $(function(){
    106.  
    107.  
    108.       $("#extruderLeft").buildMbExtruder({
    109.         position:"left",
    110.         width:300,
    111.         extruderOpacity:.8,
    112.         hidePanelsOnClose:true,
    113.         accordionPanels:true,
    114.         onExtOpen:function(){},
    115.         onExtContentLoad:function(){},
    116.         onExtClose:function(){}
    117.       });
    118.  
    119.  
    120. /*
    121.       $("#extruderLeft").buildMbExtruder({
    122.         position:"left",
    123.         width:300,
    124.         extruderOpacity:.8,
    125.         hidePanelsOnClose:false,
    126.         accordionPanels:false,
    127.         onExtOpen:function(){},
    128.         onExtContentLoad:function(){$("#extruderLeft").openPanel();},
    129.         onExtClose:function(){}
    130.       });
    131. */
    132.  
    133.       $("#extruderLeft1").buildMbExtruder({
    134.         position:"left",
    135.         width:300,
    136.         heigth:350,
    137.         extruderOpacity:.8,
    138.         onExtOpen:function(){},
    139.         onExtContentLoad:function(){},
    140.         onExtClose:function(){}
    141.       });
    142.  
    143.  
    144.     });
    145.  
    146.   </script>
    147.  
    148.  
    149. <div class="wrapper" style="height:500">
    150.   <h1> </h1>
    151.  
    152.   <div class="text">
    153.     <h2> </h2>
    154.     <br>
    155.     <br>
    156. </div>
    157.   <div class="longText" style="position:relative;padding-left:50px">   
    158.     <div id="extruderLeft1" class="a {title:' MOBILE', url:'parts/extruderLeft1.html'}"></div>
    159.     <!--<div id="extruderLeft2" class="a {title:'content in place'}">-->
    160.  
    161.   </div>
    162.  
    163. </div>

  • 1
  • SomehowLost SomehowLo...
    Jedi-Meister
    0 x
    278 Beiträge
    0 Hilfreiche Beiträge
    22. 08. 2011, 15:14

    Hallo Koko,

    du musst an sich NUR die JS Dateien und am besten für Deinen Extruder eine separate CSS-Datei einbinden; dazu noch Dein JS-FE-Script, damit das Ganze auch ausgeführt wird.

    TS-Setup im Root-Template:

    1. page {
    2.   includeCSS {
    3.     extruderCSS = fileadmin/mein/pfad/zum/style.css
    4.   }
    5.   includeJS {
    6.     jQuery = fileadmin/mein/pfad/zum/js/jquery.js
    7.     mbExtruder = fileadmin/mein/pfad/zum/js/mbExtruder.js
    8.   }
    9.   # Einbindung Extruder.js basierend auf deinem HTML-Template
    10.   headerData.123 = HTML
    11.   headerData.123.value (
    12.     // Hier Dein Extruder-FE-Script also:
    13.     <script>
    14.     $( function () {
    15.       // tue dies und das  
    16.     });
    17.     </script>
    18.   )
    19.   # hier folgt der Rest Deines Setups
    20. }

    Da ich nicht genau weiß, was Du einbindest (ob Navigation etc.) kannst Du mich gerne per PM anschreiben für weitere Details.

    Viele Grüße,
    Andreas

    [url=http://www.andreas-hoffmeyer.de/]Andreas Hoffmeyer - Websites & mehr...[/url]
    [url=http://typo3-4-newbies.blogspot.de/]TYPO3 für Einsteiger: typo3-4-newbies.blogspot.de[/url]

  • 0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    23. 08. 2011, 13:27

    hallo andreas!

    habe mich nun im aufbau nach deiner anleitung versucht, aber leider wird noch nichts angezeigt.

    Dieser Extruder soll auf der Seite links am Rand wie ein kleiner Karteikartenreiter erscheinen, auf Klick öffnet er sich dann. Sieht man unter dem o.g. Link.

    Kann ich nicht die js- und css- und jquery-sourcen auch im header des Seitentemplates einbinden, so:

    1. #page.headerData.121 = TEXT
    2. #page.headerData.121.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/mbExtruder.js"></script> 
    3. #page.headerData.122 = TEXT
    4. #page.headerData.122.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.metadata.js"></script> 
    5. page.headerData.123 = TEXT
    6. page.headerData.123.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.mb.flipText.js"></script> 
    7. page.headerData.124 = TEXT
    8. page.headerData.124.value = <script type="text/javascript" language="JavaScript" src="fileadmin/template/mobile/inc/jquery.hoverIntent.min.js"></script> 
    9. page.headerData.125 = TEXT
    10. #page.headerData.125.value = <link rel="stylesheet" type="text/css" href="fileadmin/template/mobile/css/mbExtruder.css">
    ?

    Dann habe ich noch das folgende in meinem Template stehen:

    1. page.10 {
    2.  
    3.   template.file=fileadmin/template/html/vorlage_gruppe.html
    4.   workOnSubpart = DOCUMENT
    5.  
    6.   marks {
    7.     ADRESSE = TEXT
    8.     ADRESSE.value = XXX  <a class="mail" title="Opens window for sending email" href="javascript:linkTo_UnCryptMailto('pdlowr-lqirCurvlhu1gh');">info@xxx.de</a>
    9.  
    10.     START_GROUP_LEFT = CONTENT
    11.     START_GROUP_LEFT {
    12.       table = tt_content
    13.       select.orderBy = sorting
    14.       select.where = colPos=1
    15.     }
    16.  
    17.     START_GROUP_RIGHT = CONTENT
    18.     START_GROUP_RIGHT {
    19.       table = tt_content
    20.       select.orderBy = sorting
    21.       select.where = colPos=2
    22.     }
    23.  
    24.     START_GROUP_CONTENT = CONTENT
    25.     START_GROUP_CONTENT {
    26.       table = tt_content
    27.       select.orderBy = sorting
    28.       select.where = colPos=0
    29.     }
    30.  
    31.   }
    32.    includeCSS {
    33.     extruderCSS = fileadmin/template/mobile/css/mbExtruder.css
    34.   }
    35.   includeJS {
    36.    # jQuery = fileadmin/template/mobile/inc/jquery.metadata.js
    37.     mbExtruder = fileadmin/template/mobile/inc/mbExtruder.js
    38.   }
    39.   # Einbindung Extruder.js basierend auf HTML-Template
    40.   headerData.123 = HTML
    41.   headerData.123.value (
    42.     // Hier Dein Extruder-FE-Script also:
    43.     <script>
    44.      $(function(){
    45.  
    46.  
    47.       $("#extruderLeft").buildMbExtruder({
    48.         position:"left",
    49.         width:300,
    50.         extruderOpacity:.8,
    51.         hidePanelsOnClose:true,
    52.         accordionPanels:true,
    53.         onExtOpen:function(){},
    54.         onExtContentLoad:function(){},
    55.         onExtClose:function(){}
    56.       });
    57.  
    58.  
    59. /*
    60.       $("#extruderLeft").buildMbExtruder({
    61.         position:"left",
    62.         width:300,
    63.         extruderOpacity:.8,
    64.         hidePanelsOnClose:false,
    65.         accordionPanels:false,
    66.         onExtOpen:function(){},
    67.         onExtContentLoad:function(){$("#extruderLeft").openPanel();},
    68.         onExtClose:function(){}
    69.       });
    70. */
    71.  
    72.       $("#extruderLeft1").buildMbExtruder({
    73.         position:"left",
    74.         width:300,
    75. 		heigth:350,
    76.         extruderOpacity:.8,
    77.         onExtOpen:function(){},
    78.         onExtContentLoad:function(){},
    79.         onExtClose:function(){}
    80.       });
    81.  
    82.  
    83.     });
    84.  
    85.   </script>
    86.   )
    87.   # hier folgt der Rest Deines Setups
    88. }
    89.  
    90. }

    In der betreffenden Seite habe ich dann ein html-Inhaltselement eingefügt in dem dann noch der folgende Code ist:

    1. <div class="wrapper" style="height:500">
    2.   <h1>&nbsp;</h1>
    3.   <div class="text">
    4.     <h2>&nbsp;</h2>
    5.     <br>
    6.     <br>
    7. </div>
    8.   <div class="longText" style="position:relative;padding-left:50px">   
    9.     <div id="extruderLeft1" class="a {title:' MOBILE', url:'fileadmin/template/mobile/parts/extruderLeft1.html'}"></div>
    10.     <!--<div id="extruderLeft2" class="a {title:'content in place'}">-->
    11.   </div>

    Aber es wird nichts angezeigt. Hab ich noch irgendwo einen Denkfehler gemacht?

    Viele Grüße,

    koko

    ps: diesmal habe ich nicht als pm geantwortet wegen des ganzen scriptes

  • SomehowLost SomehowLo...
    Jedi-Meister
    0 x
    278 Beiträge
    0 Hilfreiche Beiträge
    27. 08. 2011, 13:39

    hallo koko,

    enschuldige die späte antwort, hatte zu tun.

    nun aber:
    du hast da ein paar kleine fehler in deinem ts:
    - du bindest dein JS und CSS in page.10 bereits ein. das funktioniert so leider nicht.

    du kannst natürlich deine dateien auch per headerData einbinden, finde ich aber zu umständlich, da ja typo3 bereits möglichkeiten zur korrekten einbindung mitbringt. aber wie gesagt, ginge auch so.

    hier mal ein beispiel, wie ich es machen würde:

    1. page = PAGE
    2. page {
    3.   # Einbindung der CSS Files (binde am besten alle so ein)
    4.   includeCSS {
    5.     # alle wieteren CSS Files
    6.     extruderCSS = mein/weg/zu/extruderCSS.css
    7.   }
    8.   # Einbindung der JS Files (binde am besten alle so ein)
    9.   includeJS {
    10.     # alle weiteren JS Files
    11.     jQuery = mein/weg/zu/jquery.js
    12.     mbExtruder =mein/weg/zu/mbExtruder.js
    13.   }
    14.   headerData {
    15.     110110 = HTML
    16.     110110.value (
    17.       <script type="text/javajscript">
    18.         $(document).ready( function () {
    19.           // hier dein extruder script
    20.         });
    21.       </script>
    22.     )
    23.   }
    24.   # Start Template Config
    25.   10 = TEMPLATE
    26.   10 {
    27.     template = FILE
    28.     template.file = mein/weg/zum/template.html
    29.     workOnSubpart = DOCUMENT
    30.     marks {
    31.       # hier deine marks
    32.     }
    33.   }
    34. }

    bei fragen einfach melden.

    viele grüße,
    andreas

    [url=http://www.andreas-hoffmeyer.de/]Andreas Hoffmeyer - Websites & mehr...[/url]
    [url=http://typo3-4-newbies.blogspot.de/]TYPO3 für Einsteiger: typo3-4-newbies.blogspot.de[/url]

  • 0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    19. 09. 2011, 10:47

    Hallo Andreas!

    Diesmal bin ich spät dran mit der Antwort....:o

    Also, ich kann die Jquery.js 's nicht im Body einbinden, allerdings auch nicht im Header, da ich im Typo die T3JQuery benutze, und die jqueries dort ja schon zentral eingebunden werden und es sonst zu Fehlermeldungen bzw. Darstellungsproblemen wegen doppeleinbindungen kommt. Nur die modifizierten .js (die mit mb im Namen) habe ich jetzt eingebunden, so, wie Du es vorgeschlagen hast.
    Extruder wird immer noch nicht angezeigt.
    Jetzt weiß ich allerdings nicht, wie ich herausfinden kann ob hoverIntent und metadata über T3Jquery eingebunden isind, da man diese Komponenten in der T3JQuery nicht auswählen kann. Vielleicht wird daher nichts angezeigt?

    Achja, um das Ganze ein bißchen besser vorstellbar zu machen: Z.B. unter [url=]http://www.ebbinghaus-automobile.de/[/url] ist so ein Teil eingebaut, ganz links am Seitenrand das "EBBINGHAUS MOBILE". So ein Teil möchte ich halt auch haben....

    Viele Grüße,
    koko

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin