jQuery第三課點擊按鈕彈出層div效果

時間 2020-06-22

原文原文鏈接

jQuery 事件方法

事件方法會觸發匹配元素的事件，或將函數綁定到全部匹配元素的某個事件。javascript

觸發實例：css

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

上面的例子將觸發 id="demo" 的 button 元素的 click 事件。html

綁定實例：java

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

上面的例子會在點擊 id="demo" 的按鈕時隱藏全部圖像。jquery

方法	描述
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);