其他可调整大小的 div 宽度上的实时监听器答案

【问题标题】：Live listener on other's resizable div width其他可调整大小的 div 宽度上的实时监听器
【发布时间】：2012-09-20 05:39:50
【问题描述】：

假设我们有一个 div：

<div id="left">Some content</div>

id为“left”的div是可调整大小的div（可以在浏览器中用鼠标调整大小），当调整大小时，它会接收到当前宽度的CSS样式，如下所示：

<div id="left" style="width: 289px;">Some content</div>

我想要实现的是读取#left div 的实时事件（或类似的东西）的宽度值，并基于该值添加一些条件（它必须是实时事件，而不是在单击或鼠标上读取它释放点击等）...提前感谢您的帮助！

解决方案：

您可以使用自定义绑定函数来实现：

(function(){
        var interval;
        jQuery.event.special.liveresize = {
            setup: function(){
                var self = this,
                $this = $(this),
                $originalContent = $this.width();
                interval = setInterval(function(){
                if($originalContent != $this.width()) {
                        $originalContent = $this.width();
                        jQuery.event.handle.call(self, {type:'liveresize'});
                    }
                },100);
            },
            teardown: function(){
            clearInterval(interval);
            }
        };
        })();

然后直接调用它：

$(function() {
            $('#left').bind('liveresize', function() {
                var actual_width = $(this).width();
                if(actual_width < 930) 
                {
                    $('#left').addClass('ng-av-small-left');
                    $('#left').addClass('ng-av-small-right');    
                } else 
                {
                    $('#left div.block div.left').removeClass().addClass('left');
                    $('#left div.block div.right').removeClass().addClass('right');
                }       
                });
        });

【问题讨论】：

将调整哪个事件 div 的大小？

标签： javascript jquery

【解决方案1】：

你可以这样得到它

  var j = $('.box').height();

检查此链接以获取可调整大小的 div 标签

请参考此链接

http://jqueryui.com/demos/resizable/#method-option

获取 div 的大小

http://www.ezineasp.net/post/Javascript-Get-Height-of-Div-onclick.aspx

【讨论】：