проблема с переключателем в mootools - PullRequest
Новая
       17

проблема с переключателем в mootools

0 голосов
/ 21 сентября 2011

Я пытаюсь закодировать функцию, которая позволяет включать и выключать все миниатюры в списке в зависимости от их классов. например, если я нажимаю «печать» в строке меню, мне нужно скрыть все большие пальцы с классом «печать». Если я щелкну по нему второй раз, появятся скрытые пальцы.

Вот что я придумал: 

window.addEvent('domready', function(){
       $$('.menu_button').toggle(
        function() {
            this.fade(0.5);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','0');
            });
        },
        function() {
            this.fade(1);
            var buttonId = this.id;
            $('slider_list').getElements('.'+buttonId).each(function(li) {
                li.tween('width','100');
            });
        }
    );  

});



//toggle (emulate JQuery's toggle)
(function() {
    var toggled = 0;
    Element.implement({
        toggle: function(fn1, fn2) {
            var fns = [fn1, fn2];
            return this.addEvent('click', function(){
                fns[toggled].apply(this, arguments);
                toggled = toggled == 0 ? 1 : 0;
            });
        }
    });
})();

Я нашел здесь функцию переключения

Теперь у меня возникли некоторые проблемы. Во-первых, независимо от того, что я делаю, в конце списка всегда будет большой палец. Тогда некоторые щелчки в меню ничего не сделают. Обычно, когда я нажимаю кнопку в другом состоянии (скрытом / показанном), чем в предыдущем, всегда будет нулевой щелчок ...

Кто-нибудь?

1 Ответ

0 голосов
/ 21 сентября 2011

Я реализовал его таким образом, чтобы он позволял использовать несколько функций, хотя MooTools совсем не похож на него, он будет работать.Проблема с кодом, который вы используете, заключается в том, что каждый элемент, использующий переключение, переключает одну и ту же toggled переменную 

Element.implement({
    toggle: function() {
       this.store('toggle_options', {
         fn: arguments,
         cur: 0
       });
       this.addEvent('click', function(e) {
           e.stop();
           var opts = this.retrieve('toggle_options');
           console.log(opts.fn.length, opts.cur);
           opts.fn[opts.cur++].apply(this);
           if(opts.cur >= opts.fn.length) opts.cur = 0;
       }); 
    } 
});

$('button').toggle(
    function() {
      this.set('text', 'foo 1');  
    },
    function() {
      this.set('text', 'bar 2');
    }
);

здесь: http://jsfiddle.net/94FFj/

Хотя я бы порекомендовал вам реализоватьВаш код как этот: 

  $$('.menu_button').each(function(button) {
    button.store('toggle_active', 0);
    button.addEvent('click', function(e) {
      e.stop();
      var active = this.retrieve('toggle_active');
      var opts = [{opacity: 1, width: 0}, {opacity: 0.5, width: 100}];
      this.fade(opts[active].opacity);
      $$('slider_list .' + this.get('id')).tween('width', opts[active].width);
      this.store('toggle_active', active ? 0 : 1);
    });
  })
...