---
title: "rgtabs & mootools"
url: "https://www.typo3.net/d/90313-rgtabs-mootools"
source: "typo3.net"
tags: ["Extensions","Frage"]
created: "2009-06-08"
last_reply: "2010-01-27"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# rgtabs & mootools

Extensions · 7 Antworten · gestartet 2009-06-08

## Eröffnungsbeitrag

**Der Dude** · 2009-06-08 · [Beitrag #1](https://www.typo3.net/d/90313-rgtabs-mootools/1)

Hallo zusammen!
Die aktuellen Version von rgtabs(2.2.3) und t3mootools(1.3.0) arbeiten leider nicht zusammen. Mit einer älteren Version der Mootools läuft es aber. Hat jemand eine Idee?

-----------
TYPO3 4.2.6

## Antworten

### [#2](https://www.typo3.net/d/90313-rgtabs-mootools/2) · jochla · 2009-06-17

Hallo,

hast Du inzwischen was heruasgefunden? Ich hab dasselbe Problem und auch  [in diesem Posting](https://www.typo3.net/d/90241-probleme-mit-rgtabs-rgaccordion-t3mootools) wird das Problem behandelt.

Gruß, Johannes.

### [#3](https://www.typo3.net/d/90313-rgtabs-mootools/3) · sefer · 2009-06-17

Hi Jochla,

wenn du nicht gerade auf die neueste Mootools angewiesen bist, dann probier mal ne ältere Version. Vielleicht klappts ja.

Ciao'
Sefer

### [#4](https://www.typo3.net/d/90313-rgtabs-mootools/4) · Der Dude · 2009-06-18

Hallo,

das Problem besteht leider immer noch. Aktuelle Version von rgtabs(2.2.3) und t3mootools(1.3.0) produzieren einen Javascript Fehler. Abhilfe schafft derzeit nur eine ältere Version der Mootools.

Grüße

### [#5](https://www.typo3.net/d/90313-rgtabs-mootools/5) · jochla · 2009-06-21

Danke für Eure Antworten.

Ich habe inzwischen t3mootools v.1.2.3 installiert. Damit funktioniert nun rgtabs, aber leider noch nicht rgaccordion: <http://t3test.jochla.de/index.php?id=rgaccordion>, auch nicht zusammen mit rgtabs.

Wichtig ist auf jeden Fall, dass rgaccordion1.js erst nach der JS Library von t3mmotools eingebunden wird, das habe ich im [typo3forum.net](http://www.typo3forum.net/forum/rg/31414-rgaccordion-rgtabs-seite-verwenden.html) gefunden und mit folgendem TypoScript erreicht:

```typoscript
# rgAccordion nach t3mootools einbinden
page.includeCSS.file57 = EXT:rgaccordion/res/rgaccordion1.css
page.15 = HTML
page.15.value = <script type="text/javascript" src="typo3conf/ext/rgaccordion/res/rgaccordion1.js"></script>
```

Trotzdem funktioniert das ganze noch nicht. Folgenden Javascript-Fehler habe ich ausgemacht:

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 3
Zeichen: 1
Code: 0
URI: <http://t3test.jochla.de/typo3conf/ext/rgaccordion/res/rgaccordion1.js>

Die Meldung bezieht sich auf diese Zeile:

```javascript
window.addEvent( 'domready', function() {...
```

Hat den Fehler schon mal jemand gehabt und konnte diesen auch beheben?

Muss ich vielleicht eine noch ältere Version t3mootools-einbinden? Ich werd's mal testen und wieder berichten.

Bin aber auch für jeden anderen Hinweis dankbar!

Gruß, Johannes.

### [#6](https://www.typo3.net/d/90313-rgtabs-mootools/6) · jochla · 2009-06-21

Ich bin bis zur t3mootols-Version 1.1.0 zurückgegangen - ohne Erfolg! Das Problem bleibt bestehen: rgtabs funktioniert, rgaccordion nicht!

Wer weiss Rat und kann mir weiterhelfen - komme in meinem Projekt einfach nicht weiter und bräuchte wirklich beide Extensions.

Gruß, Johannes.

### [#7](https://www.typo3.net/d/90313-rgtabs-mootools/7) · mstarr · 2009-07-28

Hallo,

hoffe es hilft jemandem von euch. Ich habe das meiste des rgtabs-JS auf die neuen mootools-Versionen angepasst. Leider funktioniert es nur, solange man auf AJAX verzichtet. Vielleicht hat jemand die Zeit und Lust den AJAX-Request umzuschreiben..

Viele Gruesse,
MStarr

/res/scripts/rgtabs.js:

```javascript
/**
 * SimpleTabs - Unobtrusive Tabs with Ajax
 * 
 * Simple and clean Tab plugin for MooTools 1.1
 * including support for Ajax content and various
 * custom Events to customise the appearance.
 * 
 * To use the Ajax feature simply use an anchor
 * with an href attribute as entry. The Ajax will
 * inject the response of this url into the tab.
 * 
 * @example
 * 
 *	var tabs = new SimpleTabs($('tab-element'), {
 * 		entrySelector: 'h2.tab-entry'
 *	});
 * 
 * @version		1.0rc0
 * 
 * @see			Events, Options
 * 
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	2007 Author
 */
var SimpleTabs = new Class({
	Implements: Options,
	/**
	 * Options
	 * 
	 * show: Number, default 0: index for the initial selected tab
	 * entrySelector: String, default ".tab-entry". Selector to find the tab elements under the given parent element
	 * classMenu: String, default "tab-menu". className for the ul that hold the tab items
	 * classWrapper: String, default "tab-wrapper". className for the wrapper that holds the container elements
	 * classContainer:  String, default "tab-container". className for the single container elements
	 * onShow: Event. Fires when a container is shown, arguments: (tabElement, containerElement, tabIndex, tabElementOld, containerElementOld, tabIndexOld)
	 * onHide: Event. Fires when a container is hidden, same arguments
	 * onRequest: Event. Fires when Ajax request starts, same arguments
	 * onComplete: Event. Fires when Ajax request is completed successfully, same arguments
	 * onFailure: Event. Fires when a Ajax request fails, same arguments
	 * getContent: Function. Callback to return the tab content element for an entry element, default is Element::getNext()
	 * 
	 */
	options: {
		show: 0,
		delay:0,
		showMenuBelow:0,
		entrySelector: '.rgtabs-entry',
		classWrapper: 'rgtabs-wrapper',
		classMenu: 'rgtabs-menu',
		classContainer: 'rgtabs-container',
		onShow: function(toggle, container, index) {
			toggle.addClass('rgtabs-selected');
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.addClass('sel');
			});
			container.setStyle('display', '');
		},
		onHide: function(toggle, container, index) {
			var list = $$('.rgtabs-selected a');
			list.each(function(element) {
				element.removeClass('sel');
			});
			toggle.removeClass('rgtabs-selected');
			container.setStyle('display', 'none');
		},
		onRequest: function(toggle, container, index) {
			container.addClass('rgtabs-ajax-loading');
		},
		onComplete: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		onFailure: function(toggle, container, index) {
			container.removeClass('rgtabs-ajax-loading');
		},
		getContent: null
	},

	/**
	 * Constructor
	 * 
	 * @param {Element} The parent Element that holds the entry elements
	 * @param {Object} Options
	 */
	initialize: function(el, options) {
		this.setOptions(options);
		this.element = $(el);
		this.current = 0;
		this.selected = null;
		this.build();
		this.loadActive();
		this.prepareTimer(this.options.show+1);
	},

	build: function() {
	/*
	var list = $$('.rgtabswrap');
list.each(function(element) {
element.removeClass("rgtabswrap");
element.style.display="block";
});
*/

		this.entries = [];
		var count =0;
		var count2 =0;
		this.menu = new Element('ul', {'class': this.options.classMenu});
		this.wrapper = new Element('div', {'class': this.options.classWrapper});
		
    this.element.getElements(this.options.entrySelector).each(function(el) {
			count++
		});
		this.count = count;
		
		this.navPrev = new Element('a', {
  				'href': 'javascript:void(0)',
  				'class': 'rgtabs-nav prev',
  				'events': {
					'click': this.moveNav.bindWithEvent(this, 'prev')
  				}
  			}).set('html','&laquo; Previous Page');

		this.navNext = new Element('a', {
  				'href': 'javascript:void(0)',
  				'class': 'rgtabs-nav next',
  				'events': {
					'click': this.moveNav.bindWithEvent(this, 'next')
  				}
  			}).set('html','Next Page &raquo;');
		
		
		this.element.getElements(this.options.entrySelector).each(function(el) {
		  

			if (count2==0) {
        classname="tabfirst";
      } else if (count2+1==count) {
        classname="tablast";
      } else {
        classname="tabmiddle";
      }
      count2++;
			var content = el.href || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
			this.addTab(el.innerHTML, el.title || el.innerHTML, content,classname);
		}, this);
		
		// change position of tabs to below
		if (this.options.showMenuBelow==1) {
			this.menu2=  this.menu.clone();
				this.element.empty().adopt(this.wrapper).adopt(this.menu);
//			this.element.empty().adopt(new Element('div').addClass('topmenu').adopt(this.menu2)).adopt(this.wrapper).adopt(this.menu);
// 			this.element.empty().adopt(this.wrapper).adopt(this.menu).adopt(new Element('div').addClass('rgtabs-pageswrapper').adopt(this.navPrev).adopt(this.navNext));			
		} else {
			this.element.empty().adopt(this.menu).adopt(this.wrapper);
		}

		if (this.entries.length) {
      this.select(this.options.show);
      this.current = this.options.show;
    }
	},
	foo: function(index) {
	 	alert(index);
	},
	/**
	 * Add a new tab at the end of the tab menu
	 * 
	 * @param {String} inner Text
	 * @param {String} Title
	 * @param {Element|String} Content Element or URL for Ajax
	 */
	addTab: function(text, title, content,classname) {
		if ($type(content) == 'string' && !$(content)) var url = content;
		var container = $(content) || new Element('div');
/*
		this.entries.push({
			container: container.setStyle('display', 'none').addClass(this.options.classContainer).inject(this.wrapper),
			toggle: new Element('li').addClass(classname).adopt(new Element('a', {
				href: 'javascript:void(0)',
				title: title,
				events: {
					//mouseover: this.onClick.bindWithEvent(this, [this.entries.length]),
					click: this.onClick.bindWithEvent(this, [this.entries.length])
					
				}
			}).setHTML(text)).inject(this.menu),
			url: url || null
*/
 		var linkElement = new Element('a', {
 				href: 'javascript:void(0)',
 				title: title,
 				events: {
 					click: this.onClick.bindWithEvent(this, [this.entries.length])
 				}
 			});
 		if(typeof Element.setHTML != 'undefined')linkElement.set('html',text);
 		else linkElement.set('html',text);
 		
 		
 		this.entries.push({
 			container: container.setStyle('display', 'none').addClass(this.options.classContainer).inject(this.wrapper),
 			toggle: new Element('li').addClass(classname).adopt(linkElement).inject(this.menu),
 			url: url || null
		});
		return this;
	},

	onClick: function(evt, index) {
		evt.stop();
		this.select(index);
	},

	/**
	 * Needed by navigation prev/next functionality
	 * @author adrian@foeder.de
	 * @see declaration of "this.navPrev" and "this.navNext"
	 */
	moveNav: function(evt, dir) {
		evt.stop();
		var stepDir = ('prev'==dir ? -1 : 1);
		var newStep = 0;

		if (dir=='prev') {
			if (this.selected==0) newStep = this.count-1;
			else newStep= this.selected-1; 		
		} else {
			if (this.selected+1==this.count) newStep = 0;
			else newStep= this.selected+1; 		
		}
		
		this.select(newStep);
	},
	
	/**
	 * Select the tab via tab-index
	 * 
	 * @param {Number} Tab-index
	 */
	select: function(index) {

    if (this.selected === index || !this.entries[index]) return this;
		var entry = this.entries[index];
		var params = [entry.toggle, entry.container, index];
		if (this.selected !== null) {
			var current = this.entries[this.selected];
			if (this.ajax && this.ajax.running) this.ajax.cancel();
			params.concat([current.toggle, current.container, this.selected]);
			this.fireEvent('onHide', [current.toggle, current.container, this.selected]);
		}
		this.fireEvent('onShow', params);
		if (entry.url && !entry.loaded) {
			this.ajax = new Request(entry.url, $merge({
				method: 'get',
				onRequest: this.fireEvent.pass(['onRequest', params], this),
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onSuccess: function(resp) {
					entry.loaded = true;
					entry.container.empty().set('html', resp);
					this.fireEvent('onComplete', params);
				}.bind(this)
			}, this.options.ajaxOptions)).send();
		}
		this.selected = index;

		this.prepareTimer(this.selected+1);
		
		return this;
	},
	
	loadActive: function() {
	  var show = -1;
    
    this.element.getElements('.rgtabs-wrapper .rgtabs-container a[id^="c"]').each(function(anchorid, i) {
        if (window.location.hash.test(anchorid.id)) {
          show = i;
          //alert(i);
        }
    });    
    
    if (show!=-1) {
          this.select(show);
          //alert('2222'+show);    
    }
  },
	prepareTimer: function(index) {
	    if (this.options.delay>0) {
        if (index >=this.count) index = 0;
        this.select.delay(this.options.delay, this,index);
      }
	}  

});

SimpleTabs.implement(new Events, new Options);
```

### [#8](https://www.typo3.net/d/90313-rgtabs-mootools/8) · mchenzi · 2010-01-27

Hallo

Hat jemand den Request mal umgeschriben

Könnte das gehen. Ich bin leider eine Niete in JS
Wie kann man denn sowas testen?

```javascript
if (entry.url && !entry.loaded) {
			this.ajax = new Request($merge({
				onRequest: this.fireEvent.pass(['onRequest', params], this),
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onComplete: function(resp) {
					entry.loaded = true;
					entry.container.empty().set('html',resp);
					this.fireEvent('onComplete', params);
				}.bind(this)
			}, this.options.ajaxOptions)).addEvent('success', function(response, xml) {
				$('update-div').set('html', response);}).send(entry.url);
		}
```

gruss

Sebastian

---

Quelle: „rgtabs & mootools“, typo3.net, https://www.typo3.net/d/90313-rgtabs-mootools
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.