怎样给div增加resize事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件,这个事件在window上面触发,那么如何给div元素增加resize事件,监听div的高度或宽度的改变呢?
先来回答另一个问题,监听div的高度变化又有什么用呢?一般而言div的高度是随着内容的增加而自适应的,对于ajax请求的数据还没有加载时,此时div的内容为空,在ajax数据返回后,div的高度就自然会自适应内容而增高了,监听这个变化也就等同于知道ajax请求类的promise什么时候返回数据,就可以不在ajax数据服务回调中处理其它非数据服务相关的逻辑了,也在一定程度上降低了数据服务和其它业务的耦合性。
某位大神用jquery实现的方法,这样就可以 $('div').resize(function(){ .. })直接使用了;
(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);
怎样给div增加resize事件的更多相关文章
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
- 为网页元素增加resize事件
默认只有window支持resize事件,但有时我们需要为div等元素添加resize事件 代码见下面,原理是在元素内添加一个内嵌html,然后监听这个内嵌html的resize事件 import { ...
- 实现div可以调整高度(div实现resize)
实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html> <hea ...
- 解决Js中的resize事件执行两次的方法
问题: 页面自适应的时候需要用到js的resize事件,但在执行过程中发现只要触发resize事件就会执行2次 原生js: window.onresize = function(){ console. ...
- 关于window的resize事件
也许你也遇到过这样的问题,或者还没注意到有过这样的问题,如下代码,在窗口发生变化时,会进入死循环: var _funResize = function(){ console.log('resize.. ...
- IE 的resize事件问题
window的resize事件,真的让人无语! 我在动态设置元素的HTML内容后,窗口高度变化了,可是却不触发resize事件. 但是我在访问document.documentElement.scro ...
- jquery resize事件增强版
/* * jQuery resize event - v1.1 - 3/14/2010 * http://benalman.com/projects/jquery-resize-plugin/ * * ...
- 跨浏览器resize事件分析
resize事件 原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera ...
- div的onclick事件怎么失效了?
1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...
随机推荐
- Atitit.研发管理如何避免公司破产倒闭的业务魔咒
Atitit.如何避免公司破产倒闭的业务魔咒 1. 大型公司的衰落或者倒闭破产案例1 1.1. 摩托罗拉1 1.2. 诺基亚2 1.3. sun2 2. 为什么他们会倒闭?? 常见的一些倒闭元素2 2 ...
- Windows下Redis缓存服务器的使用 .NET StackExchange.Redis Redis Desktop Manager
Redis缓存服务器是一款key/value数据库,读110000次/s,写81000次/s,因为是内存操作所以速度飞快,常见用法是存用户token.短信验证码等 官网显示Redis本身并没有Wind ...
- git &github 快速入门
本节内容 github介绍 安装 仓库创建& 提交代码 代码回滚 工作区和暂存区 撤销修改 删除操作 远程仓库 分支管理 多人协作 github使用 忽略特殊文件.gitignore 1.gi ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
- ABP源码分析五:ABP初始化全过程
ABP在初始化阶段做了哪些操作,前面的四篇文章大致描述了一下. 为个更清楚的描述其脉络,做了张流程图以辅助说明.其中每一步都涉及很多细节,难以在一张图中全部表现出来.每一步的细节(会涉及到较多接口,类 ...
- MySQL基础知识
一.MySQL安装 MySQL的下载 http://dev.mysql.com/downloads/mysql/ MySQL版本选择 MySQL功能自定义选择安装 1.功能自定义选择 2.路径自定义选 ...
- 【兼容写法】HttpServerUtility.Execute 在等待异步操作完成时被阻止。关键词:MVC,分部视图,异步
异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html MVC6之前的版本,对分部视图的异步支持不是很好 问题: 视图里面有分布视图:@{ ...
- JavaScript权威设计--JavaScript词法结构(简要学习笔记二)
1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...
- [C#] 走进异步编程的世界 - 在 GUI 中执行异步操作
走进异步编程的世界 - 在 GUI 中执行异步操作 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5877042.html 序 这是继<开始接 ...
- 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)
今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...