Question

我有一个div（A）是固定的.div的功能就像在facebook中的帖子。如果我点击帖子，div大小增加并显示添加链接的菜单，添加照片....如果我点击添加照片它将上传一张照片，并且div大小再次增加。根据我的要求，每当div（A）高度增加时，div（B）的相应边缘顶部应该增加。我搜索了这个但是我调整了大小（ jquery中的方法。我应该纯粹只使用mootools.Can我得到了tuts或片段的例子或小提琴。希望我已经给出了明确的描述。

Answer 1

以下是您可以在MooTools中添加的元素调整大小事件示例，非常基本，因为您只关心高度：

Element.Events.resize = {
    onAdd: function(){
        var self = this,
            oh = this.offsetHeight,
            timer;

        timer = setInterval(function(){
            var noh = self.offsetHeight
            if(noh != oh){
                self.fireEvent('resize', oh = noh);
            }
        }, 500);
        this.store('ohtimer', timer);
    },

    onRemove: function(){
        clearTimeout(this.retrieve('ohtimer'));
        this.eliminate('ohtimer');
    }
};

代码中的用法：

var foo = document.getElement('div.foo');

foo.addEvent('resize', function(offsetHeight){
    console.log('hi', offsetHeight);    
});

setInterval(function(){
    foo.innerHTML += 'hi<br/>there</br/>';
}, 1000);

设置为每半秒检查一次更改 - 再一次，非常cpu密集，导致重排，不建议在生产中使用它。事实上，你可以做到这一点无关紧要。

http://jsfiddle.net/96SYJ/1/ - 上面这个简单的演示用的东西在500ms检查时使用10％cpu的四核i7 mac book，做100ms检查导致35％cpu使用（FF 27）

找到一种不同的方式来布局你的DOM，以便两个div之间的边距是恒定的，并且通过CSS流动，而不是javascript。

Mozilla的Daniel Buchner对问题的更复杂的解决方案和描述：http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

每当div在mootools中增加或减少时如何调用函数

1 个答案: