Mootools и table row

[varhal]

Приветствую друзья! Так вышло, что у меня сайт на CMS LS версии 0.4.2 с Mootools. Возникла необходимость в таблице отображать только первые 5 <tr>, а остальные скрывать. Таким образом, начиная с 6го <tr> добавляется class="vertical_slide".

HTML:

<table class="calend_table">
  <tr><td>111111</td></tr>
  <tr><td>222222</td></tr>
  <tr><td>333333</td></tr>
  <tr><td>444444</td></tr>
  <tr><td>555555</td></tr>
  <tr>< class="vertical_slide"td>666666</td></tr>
  <tr>< class="vertical_slide"td>777777</td></tr>
  <tr>< class="vertical_slide"td>888888</td></tr>
  <tr>< class="vertical_slide"td>999999</td></tr>
  <tr>< class="vertical_slide"td>000000</td></tr>
</table>

JavaScript:

window.addEvent('domready', function() {
   //добавляем массив элементов с классом к переменной
   var myVerticalSlide = $$('.vertical_slide');
   //назначаем эффект слайд каждому элементу массива
   myVerticalSlide.each(function(item, index){
      item[index] = new Fx.Slide (item, {duration: 200});
      item[index].hide();
   })
   //назначаем обработчик события
   $$('.v_toggle').each(function(item){
      item.addEvent('click', function(e){
         e.stop();
         //устанавливаем метод toggle для всех элементов массива myVerticalSlide
         myVerticalSlide.each(function(item, index){
            item[index].toggle();
         })
      })
   })
});

?

Посмотреть в работе: http://jsfiddle.net/BTqrW/

Проблема заключается в том, что этот скрипт то скрывает <tr class="vertical_slide"></tr> но заменяет его на <div></div> и вся таблица рушится.

Каким образом можно достичь такого же эффекта, только что бы не нарушалась структура таблицы?

Буду благодарен за помощь. Спасибо!

[s0rr0w]

Проблема заключается в том, что этот скрипт то скрывает <tr class="vertical_slide"></tr> но заменяет его на <div></div> и вся таблица рушится.

Каким образом можно достичь такого же эффекта, только что бы не нарушалась структура таблицы?

Буду благодарен за помощь. Спасибо!

Изменить код плагина

[varhal]

Я так понял за этот эффект отвечает клас Fx.Slide:

Fx.Slide = new Class({

	Extends: Fx,

	options: {
		mode: 'vertical',
		wrapper: false,
		hideOverflow: true,
		resetHeight: false
	},

	initialize: function(element, options){
		this.addEvent('complete', function(){
			this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0);
			if (this.open && this.options.resetHeight) this.wrapper.setStyle('height', '');
			if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper);
		}, true);
		this.element = this.subject = document.id(element);
		this.parent(options);
		var wrapper = this.element.retrieve('wrapper');
		var styles = this.element.getStyles('margin', 'position', 'overflow');
		if (this.options.hideOverflow) styles = $extend(styles, {overflow: 'hidden'});
		if (this.options.wrapper) wrapper = document.id(this.options.wrapper).setStyles(styles);
		this.wrapper = wrapper || new Element('div', {
			styles: styles
		}).wraps(this.element);
		this.element.store('wrapper', this.wrapper).setStyle('margin', 0);
		this.now = [];
		this.open = true;
	},

	vertical: function(){
		this.margin = 'margin-top';
		this.layout = 'height';
		this.offset = this.element.offsetHeight;
	},

	horizontal: function(){
		this.margin = 'margin-left';
		this.layout = 'width';
		this.offset = this.element.offsetWidth;
	},

	set: function(now){
		this.element.setStyle(this.margin, now[0]);
		this.wrapper.setStyle(this.layout, now[1]);
		return this;
	},

	compute: function(from, to, delta){
		return [0, 1].map(function(i){
			return Fx.compute(from[i], to[i], delta);
		});
	},

	start: function(how, mode){
		if (!this.check(how, mode)) return this;
		this[mode || this.options.mode]();
		var margin = this.element.getStyle(this.margin).toInt();
		var layout = this.wrapper.getStyle(this.layout).toInt();
		var caseIn = [[margin, layout], [0, this.offset]];
		var caseOut = [[margin, layout], [-this.offset, 0]];
		var start;
		switch (how){
			case 'in': start = caseIn; break;
			case 'out': start = caseOut; break;
			case 'toggle': start = (layout == 0) ? caseIn : caseOut;
		}
		return this.parent(start[0], start[1]);
	},

	slideIn: function(mode){
		return this.start('in', mode);
	},

	slideOut: function(mode){
		return this.start('out', mode);
	},

	hide: function(mode){
		this[mode || this.options.mode]();
		this.open = false;
		return this.set([-this.offset, 0]);
	},

	show: function(mode){
		this[mode || this.options.mode]();
		this.open = true;
		return this.set([0, this.offset]);
	},

	toggle: function(mode){
		return this.start('toggle', mode);
	}

});

Element.Properties.slide = {

	set: function(options){
		var slide = this.retrieve('slide');
		if (slide) slide.cancel();
		return this.eliminate('slide').store('slide:options', $extend({link: 'cancel'}, options));
	},

	get: function(options){
		if (options || !this.retrieve('slide')){
			if (options || !this.retrieve('slide:options')) this.set('slide', options);
			this.store('slide', new Fx.Slide(this, this.retrieve('slide:options')));
		}
		return this.retrieve('slide');
	}

};

Element.implement({

	slide: function(how, mode){
		how = how || 'toggle';
		var slide = this.get('slide'), toggle;
		switch (how){
			case 'hide': slide.hide(mode); break;
			case 'show': slide.show(mode); break;
			case 'toggle':
				var flag = this.retrieve('slide:flag', slide.open);
				slide[flag ? 'slideOut' : 'slideIn'](mode);
				this.store('slide:flag', !flag);
				toggle = true;
			break;
			default: slide.start(how, mode);
		}
		if (!toggle) this.eliminate('slide:flag');
		return this;
	}

});

Каким образом изменить данный код, чтобы вместо <div> использовался <tr>?

Тут вместо div:

this.wrapper = wrapper || new Element('div', {
                        styles: styles

Вставил tr:

this.wrapper = wrapper || new Element('tr', {
                        styles: styles

Но по умолчанию все tr видны и не скрываются при нажатии на ссылку.

Проблема в том, что <tr class="vertical_slide"><td></td></tr> обрамляется еще в один <tr></tr> и поэтому таблица ломается.

Edited March 21, 2012 by varhal

[varhal]

Тема закрыта!