[TYPO3-german] Powermail Tabs

[Andre Sancken]

Hallo,

Ich habe ein mehrseitiges Formular mir Powermail erstellt. Dieses nutzt ja
dann jquery mit Tabs. Habe dann den tabs.js Code in soweit verändert, das es
jetzt auch wieder weiter und zurück Buttons gibt. Die Struktur von den Tabs
sieht ja so aus:

<ul class=„power mail-tabmenu“>
<li></li>
<li></li>
</ul>

<fieldset>Formularinhalt</fieldset>
<fieldset>Formularinhalt</fieldset>

Ich möchte gerne um alle Fieldsets einen extra Div Container haben. Nur
sobald ich die Fieldsets umschließe, sind die Tabs natürlich weg. Mein
Problem liegt in der fettmarkierten zeile. Dort wird ja der Container für
die einzelnen Tabs definiert.

Habe es auch schon so probiert:

 container:’div > fieldset'

Hier der JS Code:

jQuery.fn.powermailTabs = function (options) {
    'use strict';
    var $this = $(this);
    options = $.extend({ container:'fieldset', header:'legend' }, options);

    // generate menu
    var $ul = $('<ul />', {id:'powermail_tabmenu', class:'tabs-nav
clearfix'}).insertBefore($this.children(options.container).filter(':first'))
;

    function forNextButton($button) {
        var actFieldset = $($button).parent().hide().next().show();
        var number = actFieldset.index() - 2
$($ul).find('li.active').removeClass('active').next('li').addClass('active')
;
        
//$($ul).find('li.act').removeClass('act').parent().find('li').eq(1).addClas
s('act');
    }

    function forPrevButton($button) {
        var actFieldset = $($button).parent().hide().prev().show();
        var number = actFieldset.index() - 2
$($ul).find('li.active').removeClass('active').prev('li').addClass('active')
;
        
//$($ul).find('li.act').removeClass('act').parent().find('li').eq(0).addClas
s('act');
    }

    function hasNoValidationErrors(){
        return $('.powermail_form').validationEngine('validate');
    }

    //all containers
    $this.children(options.container).each(function (i, $fieldset) {
            //tab_menu
            $ul.append($('<li/>')
                .html($(this).children(options.header).html())
                .addClass((i == 0) ? 'active' : '')
                .bind('doSthTabs', {
                        container:$this.children(options.container),
                        fieldset:$($fieldset)
                    }, function (e) {
                        if (hasNoValidationErrors()) {
                            //alert('doSome' + i);
                   
$(this).siblings().removeClass('active').end().addClass('active');
                            e.data.container.hide();
                            e.data.fieldset.show();
                        }
                    }
                )
            );
        

            //"previous" and "next" buttons
            if (i < 1) {
                $('<button class="powermail_field powermail_submit pm_button
next" style="width: 100px;"> Weiter >> </button>')
                    .appendTo($($fieldset))
                    .bind('doSthButt', function () {
                        forNextButton($(this));
                    }
                );
            } else if (i < (($this.children(options.container).length) - 1))
{
                
                $('<button class="powermail_field powermail_submit pm_button
next" style="width: 100px;"> Weiter >> </button>')
                    .appendTo($($fieldset))
                    .bind('doSthButt', function () {
                        forNextButton($(this));
                    }
                );
 $('<button class="powermail_field powermail_submit pm_button prev"
style="width: 100px;"> Zurück << </button>')
                    .appendTo($($fieldset))
                    .bind('doSthButt', function () {
                        forPrevButton($(this));
                    }
                );
            } else {
                $('<button class="powermail_field powermail_submit
light-gray pm_button prev" style="width: 100px;"> Zurück << </button>')
                    .appendTo($($fieldset))
                    .bind('doSthButt', function () {
                        forPrevButton($(this));
                    }
                );
            }
        }
    );

    // trigger events
    $ul.find('li').click(function (e) {
        e.preventDefault();
        if(hasNoValidationErrors()){
            $(this).trigger('doSthTabs');
        }
    });
    $('.pm_button').click(function (e) {
        e.preventDefault();
        if (hasNoValidationErrors()) {
            $(this).trigger('doSthButt');
        }
    });

    // initial show first fieldset
    $this.children(options.container).hide();
    $this.find(options.container).first().show();

    // Stop submit
    $this.submit(function (e) {
        //e.preventDefault();
    });
};






TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german