contao/test — Issue #2435: Tabs Contentelement wie Akkordion
Author: importer
Created: 2011-11-29 09:40:12+00:00
State: open
Labels: backend, Feature

Wir haben ja das Inhaltselements Akkordion, welches absolut vo Vorteils und zu den Basics auch gehört. Vielleicht gibt es da einen Ansatz zu einem weiteren nützlichen Contentelement. Ich rde hier von den Tabs, als tabfähiger Inhalt. Ich habe die Beta von Joomla 1.6 mir angeschaut und im Templateframework findet sich ein Modul namens Tab, ich poste mal den Code hier.

PHP Modulcode

```
function modChrome_beezTabs($module, $params, $attribs)
{
$area = isset($attribs['id']) ? (int) $attribs['id'] :'1';
$area = 'area_'.$area;

static $modulecount;
static $modules;

if ($modulecount < 1) {
$modulecount = count(JModuleHelper::getModules($attribs['name']));
$modules = array();
}

if ($modulecount == 1) {
$temp = new stdClass();
$temp->content = $module->content;
$temp->title = $module->title;
$temp->params = $module->params;
$temp->id=$module->id;
$modules[] = $temp;
// list of moduletitles
// list of moduletitles
echo '

';

foreach($modules as $rendermodule) {
echo '
'.$rendermodule->title.'
';
}
echo '

';
$counter=0;
// modulecontent
foreach($modules as $rendermodule) {
$counter ++;

echo '

';
echo $rendermodule->content;
if ($counter

![](= count($modules))
{
echo ''.JText::_('TPL_BEEZ2_NEXTTAB').'';
}
echo '

';
}
$modulecount--;
echo '

';
} else {
$temp = new stdClass();
$temp->content = $module->content;
$temp->params = $module->params;
$temp->title = $module->title;
$temp->id = $module->id;
$modules[] = $temp;
$modulecount--;
}
}

```

Ausgabe HTML

```

Australian Parks

Fruit Shop

Parks Home

Park Blog

Image Gallery

Park Links

Next Tab

Welcome

Fruit encyclopedia

Growers

Contact us

Login

Directions

```

Wobei zu sagen ist, dass Module in Contao ja auch in einem Artikel includiert werden können und dann in der linken Spalte angezeigt werden können. Hier geht es alleine um die Möglichkeit genau wie beim Akkordion.

Mootools Code

```
window.addEvent('domready', function() {
alldivs = $(document.body).getElements('div.tabcontent');
outerdivs = $(document.body).getElements('div.tabouter');
outerdivs = outerdivs.getProperty('id');

for (i = 0; i < outerdivs.length; i++) {

alldivs = $(outerdivs[i]).getElements('div.tabcontent');
count = 0;
alldivs.each(function(element) {
count++;
$(element).setProperty('role', 'tabpanel');
$(element).setProperty('aria-hidden', 'false');
$(element).setProperty('aria-expanded', 'true');
elid = $(element).getProperty('id');
elid = elid.split('_');
elid = 'link_' + elid[1];
$(element).setProperty('aria-labelledby', elid);

if (count )= 1) {
$(element).addClass('tabclosed').removeClass('tabopen');
$(element).setProperty('aria-hidden', 'true');
$(element).setProperty('aria-expanded', 'false');
}
})

countankers = 0;
allankers = $(outerdivs[i]).getElement('ul.tabs').getElements('a');

allankers.each(function(element) {
countankers++;
$(element).setProperty('aria-selected', 'true');
$(element).setProperty('role', 'tab');
linkid = $(element).getProperty('id');
moduleid = linkid.split('_');
moduleid = 'module_' + moduleid[1];
$(element).setProperty('aria-controls', moduleid);

if (countankers

![](= 1) {
$(element).addClass('linkclosed').removeClass('linkopen');
$(element).setProperty('aria-selected', 'false');
}
})
}
});

function tabshow(el) {
outerdiv = $(el).getParent();
outerdiv = outerdiv.getProperty('id');

alldivs = $(outerdiv).getElements('div.tabcontent');
liste = $(outerdiv).getElement('ul.tabs');

$(liste).getElements('a').setProperty('aria-selected', 'false');

alldivs.each(function(element) {
$(element).addClass('tabclosed').removeClass('tabopen');
$(element).setProperty('aria-hidden', 'true');
$(element).setProperty('aria-expanded', 'false');
})

$(el).addClass('tabopen').removeClass('tabclosed');
$(el).setProperty('aria-hidden', 'false');
$(el).setProperty('aria-expanded', 'true');
$(el).focus();
getid = el.split('_');
activelink = 'link_' + getid[1];
$(activelink).setProperty('aria-selected', 'true');
$(liste).getElements('a').addClass('linkclosed').removeClass('linkopen');
$(activelink).addClass('linkopen').removeClass('linkclosed');
}

function nexttab(el) {
outerdiv = $(el).getParent();
liste = $(outerdiv).getElement('ul.tabs');
getid = el.split('_');
activelink = 'link_' + getid[1];
aktiverlink = $(activelink).getProperty('aria-selected');
tablinks = $(liste).getElements('a').getProperty('id');

for ( var i = 0; i < tablinks.length; i++) {

if (tablinks[i] == activelink) {

if ($(tablinks[i + 1]) )= null) {
$(tablinks[i + 1]).onclick();
break;
}
}
}
}
```

Ich würde es gern selbst programmieren, wenn ich es könnte.

Gruß Tilo

--- _Originally created by neueplaneten on August 14th, 2010, at 03:32pm (ID 2435)_