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> и поэтому таблица ломается.

Приветствую друзья! Так вышло, что у меня сайт на 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> и вся таблица рушится. Каким образом можно достичь такого же эффекта, только что бы не нарушалась структура таблицы? Буду благодарен за помощь. Спасибо!