Mehrere Effekte von Mootools nutzen - Seite ohne reload

  • florist florist
    Jedi-Ritter
    0 x
    130 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2010, 12:41

    Hallo Leute,
    ich bin kurz vorm verzweifeln.
    Ich möchte meinen Content ohne Seitenreload laden.
    Außerdem benötige ich diverse Effekte auf meiner Seite (individueller Scrollbalken, SLideout-Menü, etc...)
    Für den Content ohne Seitenreload, hab ich mir die Extension tut_unobtrusiveajax angesehen und installiert.
    Die Effekte Realisiere ich mit t3mootools, nun zu meinem Problem:
    Soblad ich mein Slidemenu basierend auf Mootools an das Menü aus der extension tut_unobtrusiveajax
    anpassen will, klappt mein menü nicht mehr auf, ich glaube es liegt am falschen wrap.

    Hier mein TS des Menüs ohne die AJAX anpassung: [TS]lib.slideMENU = COA
    lib.slideMENU.10 = HMENU
    lib.slideMENU.10 {
    wrap = |
    special = directory
    #Einstiegspunkt auf der site
    special.value = 1
    entryLevel = 1

    1 = TMENU

    1 {
    wrap = <ul id="nav">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li>|</li>
    #NO.wrapItemAndSub = <li class="ajaxLink">|</li>
    ACT < .NO
    ACT = 1
    ACT.ATagParams = class="active"

    }

    2 = TMENU
    2 {
    noBlur = 1
    wrap = <ul id="secLev">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li>|</li>
    ACT < .NO
    ACT = 1
    ACT.ATagParams = class="active"

    }
    3 = TMENU
    3 {
    wrap = <ul>|</ul>
    #expAll = 1
    NO.wrapItemAndSub = <li class="ajaxlink">|</li>

    }

    } #ende slideMENU[/TS]

    Sobald ich folgendes veränder, klappt es nicht mehr auf:
    [TS]1 = TMENU

    1 {
    wrap = <ul id="nav">|</ul>
    expAll = 1
    #NO.wrapItemAndSub = <li>|</li>
    NO.wrapItemAndSub = <li class="ajaxLink">|</li>
    ACT < .NO
    ACT = 1
    ACT.ATagParams = class="active"

    } [/TS]
    Was mach ich falsch?
    Ich füge doch nur eine Klasse hinzu? im HTML-Quellcode stimmt auch alles!


  • 1
  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 Hilfreiche Beiträge
    23. 03. 2010, 17:33

    Tja, ohne auch das CSS und Javascript zu gehen, kann man das schwer sagen. Kann sein, dass die beiden Javascripte nicht kompatibel sind, kann aber auch sein, dass das Menüscript mit der zusätzlichen Klasse nicht klarkommt (vermute aber eher, dass das AJAX Script nicht kompatibel zu Mootools ist).

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • florist florist
    Jedi-Ritter
    0 x
    130 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2010, 18:45

    Danke für die schnelle Antwort.
    Allerdings müsste es doch möglich sein, nur mit der Mootools Exgtension den Ajax effekt zu erzeugen, allerdings kann ich dazu nirgends ein Beispile oder ähgnliches finden

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2559 Beiträge
    27 Hilfreiche Beiträge
    23. 03. 2010, 19:11

    Das Vorgehen ist ganz einfach (wenn ich es schaffe schreibe ich die Tage mal ein HowTo dazu).

    • Seitentyp anlegen, der nur den Content ausgibt.
      Mootools Funktion zum Abrufen dieses Seitentyps die dann ein Request macht und den Content refresht (und eventuell im Menü den Aktiv-Status setzt).
      Mootools Funktion an das Menü binden.

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact
    Release Manager TYPO3 Neos 1.1
    Ich habe Probleme mit den PMs hier, also schreibt mir bitte eine Mail oder über Twitter!

  • florist florist
    Jedi-Ritter
    0 x
    130 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2010, 19:31

    Däs wär echt super!
    Ich bin zwar in Typo3 schon recht fit, aber AJAX und JS Frameworks sind relativ neuland mich.
    Ich muss dass ganze für ein Projekt realisieren und kämpf etz schon seit tagen damit rum. Leider sind die Tutorials die ich dazu per google gefunden hab, nicht gerade für Anfänger geeignet.
    Wär dir super dankbar wenn du mir da dehilflich sein könntest.

    Bin heute nicht mehr dran, aber morfen poste ich mal bisschen Code und nen Link zur Seite.

  • florist florist
    Jedi-Ritter
    0 x
    130 Beiträge
    0 Hilfreiche Beiträge
    27. 03. 2010, 21:51

    Ich krieg das einfach nicht hin, anscheinend bin ich doch noch zu dumm :(

    Ich hab jetzt verstanden, dass ich in einen eigenen Seitentyp anlegen muss, der nur den echten Content ohne Rahmen(Headerdata, etc...) ausgibt.

    Allerdings versteh ich nicht, wie ich diesen Seitentyp dann verwende.
    Ich benötige doch trotzdem mein normales "Page-Objekt".

    So sieht in etwa mein Page-Objekt im Root-Template aus:
    [TS]page = PAGE

    // hier meine eingebundenen Javascripte und CSS-Dateien

    page {

    typeNum = 0
    ### Seitentitel erweitern ###
    headerData = COA
    headerData.10 = TEXT
    headerData.10.field = subtitle // title
    headerData.10.wrap = <title>Sonnenhaus&nbsp;-&nbsp; |</title>

    headerData.11 = TEXT
    headerData.11.value = <script type="text/javascript" >function toggle(abschnitt) {if (document.getElementById(abschnitt).style.display == 'block') {document.getElementById(abschnitt).style.display = 'none';} else {document.getElementById(abschnitt).style.display = 'block';}}</script>

    headerData.12 = TEXT
    headerData.12.value = <script type="text/javascript" >window.addEvent('domready', function() {var myMenu = new MenuMatic({ orientation:'horizontal' });});</script>

    headerData.13 = TEXT
    headerData.13.value = <script type="text/javascript" >window.addEvent('domready', function() { var scrollBox1 = new MooScroll({selector:'#contentmain'});});</script>

    ### HTML Template einbinden ###
    10 = TEMPLATE
    10 {
    workOnSubpart = DOCUMENT_BODY
    template = FILE
    template.file = fileadmin/templatedaten/indextypo3_01.htm



    }
    }[/TS]

    Wie und wo integriere ich jetzt ein zweites Page-Objekt?
    Hab da gerade ein Verständnisproblem.

  • 1