[tabcontrol] Im Menü "first" & "last"-Klassen einbauen + Übergang mit Alpha Effekt ?

Hallo Leute,

ich muss die Extension [tabcontrol] anpassen, um ein bestimmtes Menü-Design zu realisieren.

Hierfür muss ich:

1. eine Klass "first" bei dem ersten li und eine "last" bei dem letzten li haben, um diese beiden Menü-Punkte gesondert anzusprechen (wie bei der Hauptnavigation auch üblich)

2. Ist es möglich statt einem normalen Übergang (ohne Effekt), einen Alpha (Aktueller Tab verblasst und neuer Tab erscheint langsam) einzubauen?
(Ähnlich wie hier: http://seanmonstar.github.com/MGFX.Tabs/)

Vielen Dank im Voraus!!
Hueso

Wäre echt super, wenn mir jemand helfen könnte...

ok, vergessen wir den Alpha-Effekt, aber kann mir bitte jemand zumindest bei dem Hinzufügen einer "first" und "last"-Klasse (oder irgendein anderer Name, um das erste und letzte Menü-Element per CSS anzusprechen) bei den Menü LIs helfen?

So wird der Code im FE generiert:

Code:

---

<div class="ce_tabcontrol_tabs block">
<ul>
        <li class="tabs selected">Punkt 1</li>
        <li class="tabs ">Punkt 2</li>
        <li class="tabs ">Punkt 3</li>
</ul>
</div>

---

Wahrscheinlich müsste man dieses Template anpassen... aber wie?

PHP-Code:

---

<?php if (!defined('TL_ROOT')) die('You can not access this file directly!');

/**
 * TYPOlight webCMS
 * Copyright (C) 2005 Leo Feyer
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation, either
 * version 2.1 of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, please visit the Free
 * Software Foundation website at http://www.gnu.org/licenses/.
 *
 * PHP version 5
 * @copyright  Jean-Bernard Valentaten 2009 
 * @author     Jean-Bernard Valentaten <troggy.brains@gmx.de> 
 * @package    TabControl 
 * @license    GNU/LGPL 
 * @filesource
 */


/**
 * Class ContentTabControl 
 *
 * @copyright  Jean-Bernard Valentaten 2009 
 * @author     Jean-Bernard Valentaten <troggy.brains@gmx.de> 
 * @package    Controller
 */
class ContentTabControl extends ContentElement {
    /*
     * Datamember
     */
    
    /**
     * Contains the default classes used in our
     * tab-template 
     *
     * @staticvar array
     * @access private
     */
    private static $defaultClasses = array('tabs', 'panes');
    
    /**
     * Contains the path to the js-plugin needed for Tabcontrols to work
     *
     * @var string
     * @access private
     */
    private $strPlugin = 'plugins/tabcontrol/tabcontrol.js';
    
    /**
     * The template
     *
     * @var string
     * @access protected
     */
    protected $strTemplate = 'ce_tabcontrol_tab';
    
    /*
     * Methods
     */
    
    /**
     * Generate content element
     */
    protected function compile() {
        //init vars
        $classes    = deserialize($this->tabClasses);    //come all ye classes ;)
        $titles        = deserialize($this->tabTitles);    //will only be filled when in tab-mode
        static $panelIndex = 0;                            //static index counter
        
        //default classes if neccessary
        if (!count($classes)) {
            $classes = self::$defaultClasses;
        } else {
            if (!strlen($classes[0])) $classes[0] = self::$defaultClasses[0];
            if (!strlen($classes[1])) $classes[1] = self::$defaultClasses[1];
        }
        
        //take some measures depending on the selected tab type
        switch ($this->tabType) {
            case 'tabcontrolstart':
                //start a new panel
                if (TL_MODE=='FE') {
                    $this->strTemplate = 'ce_tabcontrol_start';
                    $this->Template = new FrontendTemplate($this->strTemplate);
                } else {
                    $this->strTemplate = 'be_wildcard';
                    $this->Template = new BackendTemplate($this->strTemplate);
                    $this->Template->wildcard = '### TabControl: '.(++$panelIndex).'. Pane START ###';
                }
                break;
                
            case 'tabcontrolstop':
                //stop the current panel
                if (TL_MODE=='FE') {
                    $this->strTemplate = 'ce_tabcontrol_stop';
                    $this->Template = new FrontendTemplate($this->strTemplate);
                } else {
                    $this->strTemplate = 'be_wildcard';
                    $this->Template = new BackendTemplate($this->strTemplate);
                    $this->Template->wildcard = '### TabControl: '.$panelIndex.'. Pane END ###';
                }
                break;
                
            case 'tabcontroltab':
            default:
                //display some tabs and check whether we need to append our plugin
                if (TL_MODE=='FE') {
                    //make sure our plugin will be loaded
                    if (!is_array($GLOBALS['TL_JAVASCRIPT'])) {
                        $GLOBALS['TL_JAVASCRIPT'] = array($this->strPlugin);
                    } elseif (!in_array($this->strPlugin, $GLOBALS['TL_JAVASCRIPT'])) {
                        $GLOBALS['TL_JAVASCRIPT'][] = $this->strPlugin;
                    }
                    
                    //finally, we set template
                    $this->Template = new FrontendTemplate($this->strTemplate);
                } else {
                    $titleList = '';
                    foreach($titles as $index=>$title) {
                        $titleList .= ++$index.'. '.$title.'<br/>';
                    }
                    
                    $this->strTemplate = 'be_wildcard';
                    $this->Template = new BackendTemplate($this->strTemplate);
                    $this->Template->wildcard = '### TabControl: Tabs ###';
                    $this->Template->title = $titleList;
                }
        }
        
        //and pass it all to the template
        $this->Template->behaviour        = $this->tabBehaviour;
        $this->Template->panes            = $classes[1];
        $this->Template->panesSelector    = '.'.str_replace(' ', '.', $classes[1]);
        $this->Template->tabs            = $classes[0];
        $this->Template->tabsSelector    = '.'.str_replace(' ', '.', $classes[0]);
        $this->Template->titles            = $titles;
    }
}

?>

---

:confused:

Hallo Hueso

Ich brauchte gerade das gleiche wie du und habe das Template angepasst.

Im Template "ce_tabcontrol_tab.tpl" folgender Code einfügen

PHP-Code:

---

<!-- indexer::stop -->
<script type="text/javascript">
/* <![CDATA[ */
    function loadTabControls() {
        $$('div.mod_article').each(function(s) {
            new TabControl(s, {
                behaviour: '<?php echo $this->behaviour; ?>',
                tabs: s.getElements('<?php echo $this->tabsSelector; ?>'),
                panes: s.getElements('<?php echo $this->panesSelector; ?>'),
                selectedClass: 'selected',
                hoverClass: 'hover'
            });
        });
    }
    
    /*
     * Bootstrap
     */
    window.addEvent('domready', loadTabControls);
/* ]]> */
</script>
<!-- indexer::continue -->

<div class="<?php echo $this->class; ?>_tabs block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<ul>

<?php
 $counttab = count($this->titles);
 $i = 0;
 foreach ($this->titles as $title):
 $i++;
 $classtab = ((($i % 2) == 0) ? ' even' : ' odd') . (($i == 1) ? ' first' : '') . (($i == $counttab) ? ' last' : '');
?>

<li class="<?php echo $this->tabs; ?> <?php echo $classtab; ?>"><?php echo $title; ?></li>

<?php endforeach; ?>

</ul>
</div>

---

Bei mir funktionierts so.

Grüessli
Steven

Hallo tognit,

vielen Dank für deinen Vorschlag. Klappt sehr gut so.
Das mit dem Alpha-Effekt fände ich auch noch sehr interessant. Hat dort jemand bereits Neues rausgefunden?

Grüße
Alex