JavsScript-Reitermenü [Gelöst]

  • johanness johanness
    Jedi-Ratsmitglied
    0 x
    916 Beiträge
    0 Hilfreiche Beiträge
    03. 04. 2007, 12:41

    Hallo,

    im Folgenden wird beschrieben, wie man mit Typo3 ein Reitermenü einbauen kann. [b]Features:[/b]
    - Keine Suchmaschineneinschränkung
    - Inhalt wird auch bei abgeschaltetem JavaScript gezeigt
    - Nichts wird nachgeladen
    - Komplett über CSS zu stylen
    - Fertiges JavaScript kostenlos auch in kommerzielle Projekte einsetzbar

    [b]Nachteile:[/b]
    Der Redakteur braucht ein HTML-ContentElement, um zu bestimmen, wo das Reitermenü beginnt und wo es aufhört (das kann auch über das Contentlement "Datensatz" geschehen!).

    Das Reitermenü basiert auf dem unter MIT Lizenz stehenden [url=http://www.barelyfitz.com/projects/tabber/]Tabbermenü [/url]von Patrick Fitzgerald. Eine Beschreibung zum JavaScript findet ihr auf diesem Link.

    [b]Step 1:[/b]
    Um das Reitermenü in Typo3 einzubauen brauchen wir einen zusätzlichen Rahmen, das mit das JavaScript das Contentlement als Eintrag erkennt.
    Im Setup:
    [TS]tt_content.stdWrap.innerWrap.cObject.1.value = <div class="tabbertab">|</div>
    [/TS]
    Im Seiten-TSConfig der Rootseite:
    [TS]TCEFORM.tt_content.section_frame.altLabels.1 = Tabbermenü Eintrag[/TS]

    [b]Step 2:[/b]
    Optional kann der Reitermenü-Eintragstext automatisch aus der Überschrift des Contentelements ausgelesen werden. Das klappt bei derzeitigem JS-Code nur, wenn die Überschrift über den Headline-Tag gewrapt wird.
    Im Setup:
    [TS]lib.stdheader.10.1.fontTag = <h3>|</h3>
    [/TS]

    Im Seiten-TSConfig der Rootseite:
    [TS]TCEFORM.tt_content.header_layout.altLabels.1 = Tabbermenü Headline
    [/TS]

    [b]Step 3:[/b]
    Legt zwei (bei Bedarf als per Datensatz reinholbare, also wiederverwendbare) Contentelemente vom Typ "HTML" an.
    Das erste mit der versteckten Überschrift "Tabbermenü Start" und dem Inhalt:
    [HTML]<div class="tabber">[/HTML]
    Das zweite mit der versteckten Überschrift "Tabbermenü Ende" und dem Inhalt:
    [HTML]</div>[/HTML]

    [b]Step 4:[/b]
    Bindet das [url=http://www.barelyfitz.com/projects/tabber/tabber.js]JavaScript[/url]und ein CSS-file mit ein.
    Im Setup:
    [TS]page = PAGE
    page.stylesheet = fileadmin/resources/stylesheet.css
    page.headerData.10 = TEXT
    page.headerData.10.value = <script type="text/javascript" src="fileadmin/resources/tabber.js"></script>[/TS]
    Mögliches CSS-File:
    [HTML]

    /* tabber
    ----------------------------------------------- */

    /* $Id: example.css,v 1.3 2006/03/06 06:02:28 pat Exp $ */
    /*--------------------------------------------------
    REQUIRED to hide the non-active tab content.
    But do not hide them in the print stylesheet!
    --------------------------------------------------*/
    .tabberlive .tabbertabhide { display:none; }

    /*--------------------------------------------------
    .tabber = before the tabber interface is set up
    .tabberlive = after the tabber interface is set up
    --------------------------------------------------*/
    .tabber {}
    .tabberlive { margin-top: 1.5em;}

    /*--------------------------------------------------
    ul.tabbernav = the tab navigation list
    li.tabberactive = the active tab
    --------------------------------------------------*/
    ul.tabbernav{
    margin:0;
    /* padding: 3px 0; */
    padding: 3px 0 5px 0;
    border-bottom: 1px solid #ccc;
    font: 11px "Trebuchet MS", "Tahoma", "Helvetica", "Arial", sans-serif;
    }

    ul.tabbernav li {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.0em;
    display: inline;
    }

    ul.tabbernav li a {
    padding: 3px 0.5em;
    margin-right: 3px;
    border: 1px solid #999;
    border-bottom: none;
    background: #D4D8E0;
    text-decoration: none;
    }

    ul.tabbernav li a:link { color: #333; }
    ul.tabbernav li a:visited { color: #667; }

    ul.tabbernav li a:hover{
    color: #fff;
    background-color: #283A63;
    text-decoration: none;
    }

    ul.tabbernav li.tabberactive a{
    color: #333;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    cursor: default;
    }

    ul.tabbernav li.tabberactive a:hover{
    color: #000;
    background-color: #f5f5f5;
    xborder-bottom: 1px solid white;
    }

    /*--------------------------------------------------
    .tabbertab = the tab content
    Add style only after the tabber interface is set up (.tabberlive)
    --------------------------------------------------*/
    .tabberlive .tabbertab {
    padding: 8px;
    font-size: 0.9em;
    border:1px solid #ccc;
    background-color: #f5f5f5;
    border-top:0;
    }

    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
    display:none;
    }

    /* If desired, set a height and add a scrollbar */
    .tabberlive#tab2 .tabbertab{
    height:200px;
    overflow:auto;
    }

    .tabberlive .tabbertab h3 {
    padding: 0;
    margin: 0;
    font-size: 11px;
    font-weight: bold;
    color: #283A63;
    }

    #sidebar .tabberlive .tabbertab ul{
    padding-left: 0;
    }
    #sidebar .tabberlive .tabbertab ul li{
    line-height: 1.2em;
    border-bottom: 1px solid #ddd;
    padding: 0.3em 0;
    }
    [/HTML]

    [b]Step 5:[/b] Einbinden des Menüs auf der Seite
    Fügt auf einer Seite das Element "Tabbermenü Start" und "Tabbermenü Ende" ein. Alle dazwischen liegenden Inhaltselemente mit dem Rahmen "Tabbermenü Eintrag" bekommen automatisch einen Eintrag im Tabbermenü (Mehrere Inhaltselemente können als Datensatzsammlung in einem Reiter untergebracht werden).

    [b]To-Do:[/b]
    Das vorgefertige JavaScript könnte noch einiges mehr, was ich aber selbst noch nicht versucht habe. Dieses Tutorial beschreibt also nur einen Ansatz, wie man sich mit Hilfe dieses JS-Codes ein induviduelles Reitermenü bauen kann. [i]Verbesserungsvorschläge und Erweiterungen erwünscht![/i]


  • 1
  • johanness johanness
    Jedi-Ratsmitglied
    0 x
    916 Beiträge
    0 Hilfreiche Beiträge
    03. 04. 2007, 19:54

    [b]An die Moderatoren:[/b]
    Ich bin mir nicht sicher, ob der bestreffende Moderator mein Thema hierher an den richtigen Ort geschoben hat. Es ist zwar im Grunde eine Art Menü, da der Inhalt strukturiert wird. Aber es ist ein völlig anderer Ansatz, als bei klassischen Menüs, so dass ich selbst nicht auf die Idee käme hier zu suchen - auch wenn ich das Thema mit "...menü" betitelt habe.

    [i]Ich würde eher bei Extensions suchen. Aber ich habe ja keine Extension. Ich könnte mir am besten eine neue Rubrik "TypoScript > ContentRendering" oder so ähnlich vorstellen! Da könnten dann gleich all die Fragen geklärt werden, die am Schluss doch wieder nur mit tt_content zu tun haben. [/i]

  • 1