jQuery第三课点击按钮弹出层div效果

jQuery 事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例：

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<link rel="stylesheet" type="text/css" href="style/hdw.css"/>

	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

	<script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>

	<script type="text/javascript">

		$(document).ready(function(){

			$('.one').click(function(){

				$('.box').show(); //显示

			});

			$('span').click(function(){

				$('.box').hide();//关闭

			});

			$('input').click(function(){

				$('.box').show();

			});

			$('.box_all').easydrag();

		});

	</script>

	<style type="text/css">

		* { padding:0; margin:0; }

		body { font-size:12px; padding:100px; }

		.box_all { float:left; padding:5px; background:#eee; position:absolute; top:30%; left:30%;}

		.box { width:500px; border:1px solid #4c7ebd; display:none; }

		.box h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; 					padding-left:10px; }

		.box span { float:right; padding-right:10px; cursor:pointer;}

		.box span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; 						text-indent:-9999px;}

		.box span a:hover { background:url(img/close_hover.jpg) no-repeat;}

		.box p { padding:10px; height:400px; background:#fff; border:3px solid #eee; }

		.one { display:block;}

	</style>

</head>

<body>

	<a href="#" class="one">后盾网教程</a><br />

	<input type="submit" class="one" value="后盾网教程" />

	<br />

	<input type="text" class="one" value="后盾网教程" />

	<div class="box_all">

	  <div class="box">

		<h1><span><a href="#">关闭</a></span>这是标题</h1>

		<p>这是内容</p>

	  </div>

	</div>

</body>

</html>

jquery.easydrag.handler.beta2.js   JQ插件的使用：

$(“#box”).easydrag();//给指定的标签绑定拖动效果，也可以是Class

$(“#box”).setHandler(‘handler’);//指定触发拖动的元素，download best apps for iphone 5handler是该元素的idhttp://www.newipadipa.com/ ，后面我们需要修改它

首先这个插件真的很好用（废话），短短2行代码就能让页面中的div动起来。但是如果要拖动很多div的时候

，我们还是要稍微做出修改才能正常使用。

首先我的弹窗div在弹出的时候是默认在页面正中的，但是要使用这个插件被拖动的div就要使

用”position:absolute”的属性定位，这让我们的居中非常困难。解决思路：在触发弹窗之前用js获取当前屏

幕的分辨率然后将div居中。

js代码：

{

 var div_width=Number(jQuery(‘#box’).css(‘width’));

 var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距离浏览器左边框的距离为屏幕宽

度的一半-div宽度的一半

 jQ

uery(‘#box).css(‘left’,sc_width);

}

好了，初始化之后就是拖动了，如果需要拖动的div不多的话这样就可以了。但是我写的页面要拖动的div较多

，而且这个插件只能用id号给元素绑定触发拖动的属性，如果一个id一个id的绑定事件的话会造成代码冗余

。所以我们要修改一下源文件jquery.easydrag.handler.beta2.js：找到 function(handlerId) 这个函数，

将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧，这样就可以了，下面是实例，高手们请

无视好了。。。 

插件源码：

/**

* EasyDrag 1.5 - Drag & Drop jQuery Plug-in

*

* Thanks for the community that is helping the improvement

* of this little piece of code.

*

* For usage instructions please visit http://fromvega.com/scripts

*/

(function($){

	// to track if the mouse button is pressed

	var isMouseDown    = false;

	// to track the current element being dragged

	var currentElement = null;

	// callback holders

	var dropCallbacks = {};

	var dragCallbacks = {};

	// bubbling status

	var bubblings = {};

	// global position records

	var lastMouseX;

	var lastMouseY;

	var lastElemTop;

	var lastElemLeft;

	// track element dragStatus

	var dragStatus = {};	

	// if user is holding any handle or not

	var holdingHandler = false;

	// returns the mouse (cursor) current position

	$.getMousePosition = function(e){

		var posx = 0;

		var posy = 0;

		if (!e) var e = window.event;

		if (e.pageX || e.pageY) {

			posx = e.pageX;

			posy = e.pageY;

		}

		else if (e.clientX || e.clientY) {

			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

			posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;

		}

		return { 'x': posx, 'y': posy };

	};

	// updates the position of the current element being dragged

	$.updatePosition = function(e) {

		var pos = $.getMousePosition(e);

		var spanX = (pos.x - lastMouseX);

		var spanY = (pos.y - lastMouseY);

		$(currentElement).css("top",  (lastElemTop + spanY));

		$(currentElement).css("left", (lastElemLeft + spanX));

	};

	// when the mouse is moved while the mouse button is pressed

	$(document).mousemove(function(e){

		if(isMouseDown && dragStatus[currentElement.id] != 'false'){

			// update the position and call the registered function

			$.updatePosition(e);

			if(dragCallbacks[currentElement.id] != undefined){

				dragCallbacks[currentElement.id](e, currentElement);

			}

			return false;

		}

	});

	// when the mouse button is released

	$(document).mouseup(function(e){

		if(isMouseDown && dragStatus[currentElement.id] != 'false'){

			isMouseDown = false;

			if(dropCallbacks[currentElement.id] != undefined){

				dropCallbacks[currentElement.id](e, currentElement);

			}

			return false;

		}

	});

	// register the function to be called while an element is being dragged

	$.fn.ondrag = function(callback){

		return this.each(function(){

			dragCallbacks[this.id] = callback;

		});

	};

	// register the function to be called when an element is dropped

	$.fn.ondrop = function(callback){

		return this.each(function(){

			dropCallbacks[this.id] = callback;

		});

	};

	// disable the dragging feature for the element

	$.fn.dragOff = function(){

		return this.each(function(){

			dragStatus[this.id] = 'off';

		});

	};

	// enable the dragging feature for the element

	$.fn.dragOn = function(){

		return this.each(function(){

			dragStatus[this.id] = 'on';

		});

	};

	// set a child element as a handler

	$.fn.setHandler = function(handlerId){

		return this.each(function(){

			var draggable = this;

			// enable event bubbling so the user can reach the handle

			bubblings[this.id] = true;

			// reset cursor style

			$(draggable).css("cursor", "");

			// set current drag status

			dragStatus[draggable.id] = "handler";

			// change handle cursor type

			$("#"+handlerId).css("cursor", "move");	

			// bind event handler

			$("#"+handlerId).mousedown(function(e){

				holdingHandler = true;

				$(draggable).trigger('mousedown', e);

			});

			// bind event handler

			$("#"+handlerId).mouseup(function(e){

				holdingHandler = false;

			});

		});

	}

	// set an element as draggable - allowBubbling enables/disables event bubbling

	$.fn.easydrag = function(allowBubbling){

		return this.each(function(){

			// if no id is defined assign a unique one

			if(undefined == this.id || !this.id.length) this.id = "easydrag"+(new Date().getTime());

			// save event bubbling status

			bubblings[this.id] = allowBubbling ? true : false;

			// set dragStatus

			dragStatus[this.id] = "on";

			// change the mouse pointer

			$(this).css("cursor", "move");

			// when an element receives a mouse press

			$(this).mousedown(function(e){

				// just when "on" or "handler"

				if((dragStatus[this.id] == "off") || (dragStatus[this.id] == "handler" && !holdingHandler))

					return bubblings[this.id];

				// set it as absolute positioned

				$(this).css("position", "absolute");

				// set z-index

				$(this).css("z-index", parseInt( new Date().getTime()/1000 ));

				// update track variables

				isMouseDown    = true;

				currentElement = this;

				// retrieve positioning properties

				var pos    = $.getMousePosition(e);

				lastMouseX = pos.x;

				lastMouseY = pos.y;

				lastElemTop  = this.offsetTop;

				lastElemLeft = this.offsetLeft;

				$.updatePosition(e);

				return bubblings[this.id];

			});

		});

	};

})(jQuery);

jQuery第三课点击按钮弹出层div效果的更多相关文章

jquery实现点击按钮弹出层和点击空白处隐藏层
昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){ $('.autoBtn' ...
点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
jquery点击按钮弹出图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
ExtJs 4.2.1 点击按钮弹出表单的窗口
初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...
JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用
请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...
Html ：点击按钮弹出输入框，再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
input内文字点击消失弹出层，可以写表单
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

Hihocoder1350-Binary Watch
时间限制:10000ms单点时限:1000ms内存限制:256MB 描述 Consider a binary watch with 5 binary digits to display hours ( ...
CSS背景使用，引入、尺寸、平铺、定位、多重背景
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
Day 07 数据类型的内置方法[列表,元组,字典,集合]
数据类型的内置方法一:列表类型[list] 1.用途:多个爱好,多个名字,多个装备等等 2.定义:[]内以逗号分隔多个元素,可以是任意类型的值 3.存在一个值/多个值:多个值 4.有序or无序:有序 ...
[读书笔记] Python数据分析（四）数组和矢量计算
Numpy:高性能计算和数学分析的基础包 ndarray, 一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组用于对数组数据进行快速运算的标准数学函数用于读写磁盘数据的工具和用于操作内存 ...
promise的原理
promise的原理一旦状态改变,就不会再变,任何时候都可以得到这个结果.Promise 对象的状态改变,只有两种可能:从 pending 变为 fulfilled 和从 pending 变为 re ...
poi操作excel2007（读取、生成、编辑）
因为现在再写excel2003版的比较low,所以我在这就不介绍了,直接介绍2007,我所用的编程软件是IDEA poi操作office总共有6个jar包,在pom.xml文件中配置如下,也可下载后直 ...
求第K大的数字
除了用最大堆(求最小的K个数)或最小堆(求最大的K个数) 可以用partition,然后直到返回index为k为止.参数可以是实际下标.然后返回index,就是partition的pivot的位置.
【从零之六&完结】android口语对话系统（RavenClaw java版含所有源代码）
! !! 更新:最新源码放到了github上,认为还不错点个星啊! 点击打开链接做了一个半月最终完毕了,以下这个就是我參考Olympus/RavenClaw系统编写的对话管理系统.眼下实现了一个简单 ...
[IOS]mac远程window全屏显示
在mac自带着一个远程window的软件.这让我们远程起来很方便. 其步骤和window远程也很相似. 输入ip地址: 输入username以及password: 然后点击确定就可以. 只是.这时就出 ...
C#高级编程五十八天----并行集合
并行集合对于并行任务,与其相关紧密的就是对一些共享资源,数据结构的并行訪问.常常要做的就是对一些队列进行加锁-解锁,然后运行类似插入,删除等等相互排斥操作. .NET4提供了一些封装好的支持并行操作 ...

jQuery第三课 点击按钮 弹出层div效果

jQuery 事件方法

jQuery第三课 点击按钮 弹出层div效果的更多相关文章

随机推荐

热门专题

jQuery第三课点击按钮弹出层div效果

jQuery第三课点击按钮弹出层div效果的更多相关文章