Открыть div по элементу click, закрыть по телу ИЛИ элементу нажать Mootools - PullRequest
Новая
       28

Открыть div по элементу click, закрыть по телу ИЛИ элементу нажать Mootools

0 голосов
/ 01 марта 2012

Я сделал эту скрипку http://jsfiddle.net/nAb6N/10/

Как вы можете видеть, у меня есть 2 аниматора, элемент и класс тела, я добавляю класс к телу после первого нажатия на элемент, но как только я нажимаю на телоне закрывает это.Если я определяю аниматоры как 

 var animators = $$('#opendiv,body');

, это работает нормально, за исключением того, что я не хочу, чтобы div открывался при щелчке тела.Мне нужно, чтобы оно закрывалось при щелчке тела.

Любая помощь приветствуется.

Спасибо!

1 Ответ

3 голосов
/ 01 марта 2012

правый. Похоже, вам действительно нужен шаблон externalClick для закрытия. Вот тот, который наиболее заметно используется в разработчиках mootools, позволяя вам создать пользовательское событие, основанное на клике: 

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

Как это работает: он основан на нормальном click. после добавления он добавляет функцию обратного вызова в качестве события щелчка в документе. когда click происходит внутри самого элемента, он прекращает пузыриться с помощью event.stopPropagation();, иначе он будет пузыриться и будет выполняться обратный вызов.

вот как это связано после вышесказанного:

http://jsfiddle.net/dimitar/nAb6N/13/

(function() {
    var opener = $('opendiv');
    var boxtoopen = $('box');

    boxtoopen.set('morph', {
        duration: 700,
        transition: 'bounce:out'
    });

    boxtoopen.addEvent('outerClick', function(event) {
        boxtoopen.morph(".openOff");
        opener.removeClass("hide");
    });

    opener.addEvent('click', function(e) {
        e.stop();
        boxtoopen.morph(".openOn");    
        this.addClass("hide");
    });

})();

Я также "передал" свойства морфа в CSS, так как это имеет смысл, семантически.

P.S. обратите внимание, что вам нужны mootools 1.4.3 или 1.4.5, но не 1.4.4, так как в юнитах этого выпуска есть ошибка морфа. jsfiddle выше использует 1.4.6 (край mootools).

...