(function($, h, c) {
var a = $([]),
e = $.resize = $.extend($.resize, {}),
i,
k = "setTimeout",
j = "resize",
d = j + "-special-event",
b = "delay",
f = "throttleWindow";
e[b] = 250;
e[f] = true;
$.event.special[j] = {
setup: function() {
if (!e[f] && this[k]) {
return false;
}
var l = $(this);
a = a.add(l);
$.data(this, d, {
w: l.width(),
h: l.height()
});
if (a.length === 1) {
g();
}
},
teardown: function() {
if (!e[f] && this[k]) {
return false;
}
var l = $(this);
a = a.not(l);
l.removeData(d);
if (!a.length) {
clearTimeout(i);
}
},
add: function(l) {
if (!e[f] && this[k]) {
return false;
}
var n;
function m(s, o, p) {
var q = $(this),
r = $.data(this, d);
r.w = o !== c ? o: q.width();
r.h = p !== c ? p: q.height();
n.apply(this, arguments);
}
if ($.isFunction(l)) {
n = l;
return m;
} else {
n = l.handler;
l.handler = m;
}
}
};
function g() {
i = h[k](function() {
a.each(function() {
var n = $(this),
m = n.width(),
l = n.height(),
o = $.data(this, d);
if (m !== o.w || l !== o.h) {
n.trigger(j, [o.w = m, o.h = l]);
}
});
g();
},
e[b]);
}
})(jQuery, this);
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢?
某位大神用jquery实现的方法,这样就可以 $('div').resize(fucntion(){ .. })直接使用了;
分享到:
相关推荐
像往常一样向任何元素添加“onresize”事件侦听器。 与 jquery 一起玩也很好。 ###贡献 拉请求是要走的路。 使用 coffeescript 作为 js 预处理器,所以我期待any-resize-event.coffee文件的变化。 环境 使用作为...
一个 gwtQuery 插件,可为任何 DOM 元素添加resize事件支持。 它使用一个隐藏的 html 对象来观察容器中的大小变化。 容器必须具有相对位置或任何其他样式,允许绝对子项在容器发生变化时进行更改。 它的灵感来自:...
角度拖曳调整大小用于拖动和调整元素大小的Angular.js指令。演示版动机drag指令是从有角度的文档中获取的( ),不幸的是,它破坏了css resize属性。 在此包中找到的resize指令允许可拖动元素也被调整...然后向元素添加
拖动调整大小 这是一个 Polymer 元素,它使任何 DOM 元素都可以拖动和调整大小。... 然后,将drag-resize属性添加到要拖动和调整大小的元素,例如: < drag> <!-- add the attribute "drag-resize
调整大小节奏可在窗口调整大小时测量元素的高度,并添加必要的边距底部以保持您提供的任何垂直节奏。 用法 $(选择器).resize-rhythm([height]) 例子 适用于所有使用12px基线的图像$( 'img' ).resize-rhythm(12) ...
前言 作为一名优秀的前端来说,...首先,我们要自己手动添加监听函数,其次注意性能问题,包括上面提到的防抖节流,还有在不需要的时候卸载监听函数,最后一个点就是,我们要在我们的元素上监听,或许这里有人说,又要
然后页面有几个事件是动态地增加DOM元素的,比如点击某个层会在底下列出该层详细内容,这样在FF和chrome下没出现问题,但是在IE6-8下每次都重布局了. 比如我拖动一个层,在拖动过程中层的内容又显示在最底下了,当我放开...
支持基本的事件回调,提供元素实时宽高位置信息数据; 目前仅支持 pc 端、px 的 css 单位;后续添加移动端和 rem 自适应; 组件仅实现最基本的拖拽、缩放和旋转核心功能,源码简单清晰可解耦,有较高的扩展性 演示...
html DOM元素有很多on开头的监听事件,如onload、onclick等,见DOM事件列表。但是同一种事件,后面注册的会覆盖前面的: [removed] = function(){ alert(1); } [removed] = function(){ alert(2)...
JavaScript+jQuery 网页特效设计 jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑...bind() 方法:可以向被选元素添加一个或多
为 dom 节点添加一个拖动手柄,使用 flexbox。 const dragResizer = require ( 'drag-resizer' ) dragResizer ( '.container' ) // dragResizer(document.querySelector('.container')) 传递带有要由拖动手柄操作...
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 <script type="text/javascript" src="/jquery/jquery.js"></...
CSS元素查询 元素查询是一种polyfill,它为所有新浏览器(包括IE7 +... 其他元素查询策略填充仅侦听[removed] ,这会导致性能问题,并且仅允许通过window.resize事件检测更改,而不能在内部更改布局(如css3动画,:ho
问题 在处理页面重新渲染时通常的做法是: 用vue-router重新路由到当前页面,页面是...使用 window.addEventListener() 添加 resize 事件监听窗口变化 new Vue({ el: '#app', data() { return { render: true } },
validatebox:添加“onBeforeValidate”和“onValidate”事件; combo:从该版本开始combo组件扩展自textbox组件(textbox是1 4中新增的组件); combo:添加“panelMinWidth” “panelMaxWidth” ...
validatebox:添加“onBeforeValidate”和“onValidate”事件; combo:从该版本开始combo组件扩展自textbox组件(textbox是1 4中新增的组件); combo:添加“panelMinWidth” “panelMaxWidth” ...
角度视口 一个简单的轻量级库,它检测元素何时在浏览器视口中,并向该元素添加一个sn-viewport--in或sn-viewport--out类。 这是的简单库,以。安装通过NPM npm i @thisissoon/angular-inviewport通过纱线yarn add @...
选项:手机:767 浏览器宽度,低于该宽度时,居中器将不会调整目标元素fullWidth:否如果为true,则不要为left或margin-left设置值笔记: 您应该添加“ display:none;” 到目标元素,以避免在正确放置之前进行渲染...
一般学过C#的都知道,Array 一旦定义好,比如四个长度,当需要再往里面添加元素的时候,需要Array.Resize一下才可以。有鉴于此,为了提高代码复用,所以索性封装下,方便使用。 具体实现代码如下: /// /// Array...