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
<!-- ~ jquery.mb.components ~ Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy ~ email: mbicocchi@open-lab.com ~ site: http://pupunzi.com ~ ~ Licences: MIT, GPL ~ http://www.opensource.org/licenses/mit-license.php ~ http://www.gnu.org/licenses/gpl.html --> body{ font-family:Arial, Helvetica, sans-serif; margin:10px; } .wrapper{ position:relative; font-family:Arial, Helvetica, sans-serif; padding-top:90px; padding-left:50px; width:80%; height:500px; margin:auto } .wrapper .text{ font-family:Arial, Helvetica, sans-serif; padding-top:50px; } .wrapper h1{ font-family:Arial, Helvetica, sans-serif; font-size:26px; } .longText{ margin-top:20px; width:600px; height:350px; font:18px/24px Arial, Helvetica, sans-serif; color:gray; } span.btn{ padding:10px; display:inline-block; cursor:pointer; font:12px/14px Arial, Helvetica, sans-serif; color:#006; background-color:#006; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:#999 2px 0px 3px; -webkit-box-shadow:#999 2px 0px 3px; } span.btn:hover{ background-color:#006; } /* custom style for extruder */ .extruder.left.a .flap{ font-size:18px; color:white; top:0; padding:10px 0 10px 10px; background:#006; width:30px; position:absolute; right:0; -moz-border-radius:0 10px 10px 0; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-box-shadow:#666 2px 0px 3px; -webkit-box-shadow:#666 2px 0px 3px; } .extruder.left.a .content{ border-right:3px solid #772B14; } .extruder.top .optionsPanel .panelVoice a{ border-bottom:1px solid #000; } .extruder.left.a .flap .flapLabel{ background:#006; } </style> $(function(){ $("#extruderLeft").buildMbExtruder({ position:"left", width:300, extruderOpacity:.8, hidePanelsOnClose:true, accordionPanels:true, onExtOpen:function(){}, onExtContentLoad:function(){}, onExtClose:function(){} }); /* $("#extruderLeft").buildMbExtruder({ position:"left", width:300, extruderOpacity:.8, hidePanelsOnClose:false, accordionPanels:false, onExtOpen:function(){}, onExtContentLoad:function(){$("#extruderLeft").openPanel();}, onExtClose:function(){} }); */ $("#extruderLeft1").buildMbExtruder({ position:"left", width:300, heigth:350, extruderOpacity:.8, onExtOpen:function(){}, onExtContentLoad:function(){}, onExtClose:function(){} }); }); </script> <br> <br> </div> </div> </div>