افتح Div On Element انقر فوق إغلاق في الجسم أو العنصر انقر فوق Mootools

Question

صنعت هذا الكمان http://jsfiddle.net/nab6n/10/

كما ترون أن لدي 2 الرسوم المتحركة وعنصر فئة الجسم أقوم بإضافة فئة إلى هيئة بعد النقر الأول على عنصر ولكن بمجرد النقر فوق الجسم لا تغلقه.إذا حددت الرسوم المتحركة باسم giveacodicetagpre.

يعمل على ما يرام إلا أنني لا أريد أن يفتح DIV عند فتح الجسم.أحتاجها لإغلاقها في الجسم، انقر فوق.

أي مساعدة موضع تقدير.

شكرا لك!

Answer 1

Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:

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);
    }
};

The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.

here's how it ties together after the above:

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");
    });

})();

I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.

P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).