xform_clang_switch.php

/*
    Sprachnavigation innerhalb einer XForm Tabelle
    
    Das nachfolgende HTML mit dem Value "html" anlegen.
    
    Felder müssen mit einem Prefix "_CLANG-ID" angelegt werden
    
    Bsp.:
    Clang | Sprache | Feldname
    0     | de      | name_0
    1     | en      | name_1   
*/
<div class="xform-element">
    <label class="text">Sprache auswählen</label>
    <div id="rex-clang">
        <ul><li class="rex-navi-first"><a href="#" onclick="return changeLang('de');" id="selector-de"><span>de</span></a></li><li><a href="#" onclick="return changeLang('en');" id="selector-en"><span>en</span></a></li><li><a href="#" onclick="return changeLang('all');" id="selector-all"><span>Beide Sprachen anzeigen</span></a></li></ul>
    </div>
</div>

<script>

jQuery(document).ready(function() {
    changeLang("de");
});

function changeLang(lang) {
    jQuery('#rex-clang a').removeClass('rex-active');
    jQuery('#selector-' + lang).addClass('rex-active');
    if (lang == "de") {
        jQuery('[id^="xform-formular"][id$="_0"]').show();
        jQuery('[id^="xform-formular"][id$="_1"]').hide();
    }
    else if (lang == "en") {
        jQuery('[id^="xform-formular"][id$="_0"]').hide();
        jQuery('[id^="xform-formular"][id$="_1"]').show();
    }
    else if (lang == "all") {
        jQuery('[id^="xform-formular"][id$="_0"]').show();
        jQuery('[id^="xform-formular"][id$="_1"]').show();
    }
    return false;
}
</script>
<style>
    #rex-clang a span {
        display: inline-block;
        padding: 2px 5px;
    }
    #rex-clang a.rex-active span {
        background-color: #DFE9E9;
    }
</style>