tabcontrol mehrere reitergruppen

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • 2nuts
    Contao-Nutzer
    • 11.07.2009
    • 106

    #1

    tabcontrol mehrere reitergruppen

    hallo.

    ich setze aktuell in einem projekt tabcontrol ein. mein problem ist dass ich in einem artikel auf der home seite mehrere accordions verwende in denen wiederum jeweils reiternavigationen sein sollen. von der struktur her sieht es so aus:

    1. accordion
    1.reitergruppe
    1.tab
    2.tab
    2.accordion
    2.reitergruppe
    1.tab
    2.tab

    usw. das problem ist, dass wenn ich eine zweite reitergruppe anlege, diese nicht unabhängig von der ersten agiert. irgendwie scheint es als könnte man keine zwei unabhängigen reitergruppen in einem artikel definieren...

    würde mich sehr über hilfe freuen ;-)
  • Brains
    Contao-Nutzer
    • 09.07.2009
    • 15

    #2
    Weil es auch für andere Nutzer interessant sein könnte, antworte ich nochmal auf diesem Wege.
    Das Startskript des TabControl setzt einen Container voraus in dem die Reitergruppe und seine Panele definiert sind. Man könnte das Startskript zwar etwas generischer formulieren, das würde aber andere, nicht ganz triviale Probleme mit sich bringen. Aktuell nimmt das Startskript an, dass der Artikel den Container darstellt. Dieses Verhalten lässt sich aber relativ einfach ändern.
    Wichtig ist hierbei, jeder Reitergruppe und ihren Panelen einen eigenen Container zur Verfügung zu stellen, diese also in eine div zu packen. Die Struktur sähe dann wie folgt aus:
    Artikel
    |- DIV
    | |- Reitergruppe 1
    | |- Panel 1.1
    | |- ...
    | |- Panel 1.n
    |
    |- DIV
    | |- Reitergruppe 2
    | |- Panel 2.1
    | |- ...
    | |- Panel 2.n

    Diese Container benötigen noch eine eigene Klasse, z.B.: ce_tabcontrol_container.
    Um das Verhalten des Startskriptes zu ändern muss man nur noch das Template ce_tabcontrol_tab.tpl wie folgt anpassen:
    Code:
    	function loadTabControls() {
    		//hier anpassen -v
    		$$('div.mod_article div.ce_tabcontrol_container').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'
    			});
    		});
    	}
    Schon sollte alles wunderbar funktionieren.

    Kommentar

    • 2nuts
      Contao-Nutzer
      • 11.07.2009
      • 106

      #3
      brains hatte da noch ein komma vergessen:

      PHP-Code:
      function loadTabControls() {
              //hier anpassen -v
              $$('div.mod_article, div.ce_tabcontrol_container').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'
                  });
              });
          }

      Kommentar

      Lädt...