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 ...
随机推荐
- poj1050查找最大子矩阵和
题目: To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 48507 Accepted: 2566 ...
- luogu P3391 【模板】文艺平衡树（Splay） 非旋转treap
Code: #include<bits/stdc++.h> using namespace std; void setIO(string s) { string in=s+".i ...
- Pyhton学习——Day6
# def test(x) : #形参:不占内存空间,调用函数时传入值,程序完成形参释放内存# # 注释内容# # 代码内容# y = x*2# print(y)# # return# # test( ...
- 你应该更新的 Java 知识
作者:dreamhead 出处:<你应该更新的Java知识>系列 你应该更新的 Java 知识 Tag:你应该更新的Java知识 Java Guava 集合 版权声明:转载时请以超链接形式 ...
- pythone 学习笔记（粗略）
文档目录 概述 安装 基本语法 数据结构 4.1 数字和字符串类型 4.2 元祖 4.3 列表 4.4 字典 流程语句 5.1 分支结构 5.2 逻辑运算符(if) 5.3 循环 5.3.1 for ...
- 2、使用Python3爬取美女图片-网站中的妹子自拍一栏
代码还有待优化,不过目的已经达到了 1.先执行如下代码: #!/usr/bin/env python #-*- coding: utf-8 -*- import urllib import reque ...
- reac实现控制输入框字符长度
reac实现控制输入框字符长度 代码思路:
- Intellij IDEA插件 - Scroll From Source
Intellij IDEA插件 - Scroll From Source 学习了:http://blog.csdn.net/luonanqin/article/details/41088171 可以自 ...
- 110_leetcode_Best Time to Buy and sell Stock II
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- Python——异常基础
异常基础 在Python中,异常会依据错误自己主动地被触发.也能由代码触发和截获.异常由五个语句处理: 1.[try/except]:捕捉由Python或你引起的异常并恢复. 2.[try/final ...