一些常用弹出窗口/拖放/异步文件上传等实用代码


Posted in Javascript onJanuary 06, 2013

久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了。

弹出窗口
我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层:

 一些常用弹出窗口/拖放/异步文件上传等实用代码

一些常用弹出窗口/拖放/异步文件上传等实用代码

一些常用弹出窗口/拖放/异步文件上传等实用代码

这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了

主要代码如下

//弹出层剧中 
function popup(popupName) { 
var _scrollHeight = $(document).scrollTop(); //获取当前窗口距离页面顶部高度 
_windowHeight = $(window).height(); //获取当前窗口高度 
_windowWidth = $(window).width(); //获取当前窗口宽度 
_popupHeight = popupName.height(); //获取弹出层高度 
_popupWeight = popupName.width(); //获取弹出层宽度 
// _posiTop = (_windowHeight - _popupHeight) / 2 + _scrollHeight - 50; 
_posiTop = _scrollHeight + 120; 
_posiLeft = (_windowWidth - _popupWeight) / 2; 
popupName.css({ "left": _posiLeft + "px", "top": _posiTop + "px", "display": "block" }); //设置position 
} 
function dragFunc(dragDiv, dragBody) { 
if (dragDiv[0] && dragBody[0]) { 
var dragAble = false; 
var x1 = 0; 
var y1 = 0; 
var l = 0; 
var t = 0; 
var divOffset = dragBody.offset(); 
dragDiv.mousedown(function (e) { 
var ss = this; 
// var rootId = 
dragDiv.css("cursor", "move"); 
dragAble = true; 
// 当前鼠标距离div边框的距离 
// 当前鼠标坐标,减去div相对左边的像素 
l = parseInt(dragBody.css("left")); 
t = parseInt(dragBody.css("top")); 
x1 = e.clientX - l; 
y1 = e.clientY - t; 
x1 = x1 > 0 ? x1 : 0; 
y1 = y1 > 0 ? y1 : 0; 
this.setCapture && this.setCapture(); 
}); 
dragDiv.mousemove(function (e) { 
if (!dragAble) 
return; 
// 当前div左边的坐标 
// 当前鼠标坐标,减去鼠标拖动量 
var x2 = 0; 
var y2 = 0; 
//需要考虑滚动条问题!!! 
var top = $(document).scrollTop() ? $(document).scrollTop() - 15 : 0; 
var left = $(document).scrollLeft() ? $(document).scrollLeft() - 15 : 0; 
x2 = e.clientX - x1 + left; 
y2 = e.clientY - y1 + top; 
x2 = x2 > 0 ? x2 : 0; 
y2 = y2 > 0 ? y2 : 0; 
//要移动一定数量才移动 
if (Math.abs(l - x2) > 10 || Math.abs(t - y2) > 10) { 
dragBody.css("left", x2 + "px"); 
dragBody.css("top", y2 + "px"); 
} 
}); 
dragDiv.mouseup(function (event) { 
if (!dragAble) 
return; 
dragAble = false; 
// dragDiv.css("position", "relative"); 
this.releaseCapture && this.releaseCapture(); 
}); 
} 
} 
var MyDialog = function (cfg) { 
this.config = { 
id: (new Date()).getTime().toString(), 
el: null, 
bodyId: null, 
cover: true, 
boxHtm: '<div class="dialog" > ' + 
'<table> ' + 
' <tr class="top"> ' + 
' <td class="tl"> ' + 
' </td> ' + 
' <td class="c"> ' + 
' </td> ' + 
' <td class="tr"> ' + 
' </td> ' + 
' </tr> ' + 
' <tr> ' + 
' <td class="c"> ' + 
' <div style="width:10px;"></div>' + 
' </td> ' + 
' <td class="main"> ' + 
' <div class="title"> ' + 
' <h3> ' + 
' <span class="title_text">请输入标题</span> <a class="cls" href="javascript:;"></a> ' + 
' </h3> ' + 
' </div> ' + 
' <div class="content"> ' + 
' 请输入内容 ' + 
' </div> ' + 
' </td> ' + 
' <td class="c"> ' + 
' </td> ' + 
' </tr> ' + 
' <tr class="bottom"> ' + 
' <td class="bl"> ' + 
' </td> ' + 
' <td class="c"> ' + 
' <div style="width:10px;"></div>' + 
' </td> ' + 
' <td class="br"> ' + 
' </td> ' + 
' </tr> ' + 
'</table> ' + 
'</div>' 
}; 
var scope = this; 
if (cfg) { 
$.each(cfg, function (key, value) { 
scope.config[key] = value; 
}); 
} 
this.box = null; 
this.cover = null; 
this.tmpBody = null; 
} 
MyDialog.prototype.show = function () { 
var scope = this; 
var cover = null; 
var box = null; 
if (this.config.cover) { 
if (this.config.id && $('#' + this.config.id + '_cover')[0]) { 
cover = $('#' + this.config.id + '_cover'); 
cover.show(); 
} else { 
cover = $('<div style=" display:block; " id="' + this.config.id + '_cover" class="coverDiv" ></div>'); 
$('body').append(cover); 
} 
scope.cover = cover; 
} 
if (!$('#' + this.config.id)[0]) { 
box = $(this.config.boxHtm); 
$('body').append(box); 
box.attr('id', this.config.id); 
if (this.config.title) { 
box.find('.title_text').html(this.config.title); 
} 
if (this.config.bodyId) { 
var body = $('#' + this.config.bodyId); 
var tmp = $('<div></div>').append(body); 
var initBody = tmp.html(); 
scope.tmpBody = $(initBody); 
tmp = null; 
if (body[0]) { 
var con = box.find('.main .content'); 
body.show(); 
con.html(''); 
con.append(body); 
} 
} 
if (this.config.el && this.config.el[0]) { 
var con = box.find('.main .content'); 
con.html(this.config.el); 
} 
//居中 
popup(box); 
//关闭dialog 
box.find('.title .cls').click(function (e) { 
scope.close(); 
e.preventDefault(); 
return false; 
}); 
dragFunc($('#' + this.config.id + ' .main .title'), $('#' + this.config.id)); 
box.show(); 
this.box = box; 
} 
} 
MyDialog.prototype.close = function () { 
//这里有问题 
var box = this.box; 
var tmpBody = this.tmpBody; 
var cover = this.cover; 
if (tmpBody && tmpBody[0]) { 
$('body').append(tmpBody); 
} 
if (box && box[0]) { 
box.remove(); 
} 
if (cover && cover[0]) { 
cover.hide(); 
} 
};

调用方法:
var dia = new MyDialog({ 
title : title, 
bodyId : id, 
id : id + '_box' 
}); 
dia.show();

具体可能还需要一定函数回调,各位可以自己封装一番。拖放
工作中也经常会出现拖放效果的一些需求:

一些常用弹出窗口/拖放/异步文件上传等实用代码

一些常用弹出窗口/拖放/异步文件上传等实用代码

一些常用弹出窗口/拖放/异步文件上传等实用代码代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://www.cnblogs.com/scripts/jquery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function dragFunc(dragDiv, dragBody, dropBody) { 
if (!dropBody[0]) { 
dropBody = $(document); 
} 
if (dragDiv[0] && dragBody[0]) { 
var dragAble = false; 
var x1 = 0; 
var y1 = 0; 
var l = 10; 
var t = 10; 
var init_position = ''; 
var init_cursor = ''; 
var tmp_body = null; 
dragDiv.mousedown(function (e) { 
var ss = this; 
init_position = dragBody.css("position"); 
init_cursor = dragBody.css("init_cursor"); 
dragBody.css("position", "absolute"); 
dragDiv.css("cursor", "move"); 
tmp_body = $('<div class="tmp_div"></div>'); 
tmp_body.css('width', dragBody.css('width')); 
tmp_body.css('height', dragBody.css('height')); 
tmp_body.insertAfter(dragBody); 
$(document).bind("selectstart", function () { return false; }); 
dragAble = true; 
// 当前鼠标距离div边框的距离 
// 当前鼠标坐标,减去div相对左边的像素 
l = parseInt(dragBody.css("left")) ? parseInt(dragBody.css("left")) : 10; 
t = parseInt(dragBody.css("top")) ? parseInt(dragBody.css("top")) : 10; 
var offset = dragBody.offset(); 
l = parseInt(offset.left); 
t = parseInt(offset.top); 
x1 = e.clientX - l; 
y1 = e.clientY - t; 
x1 = x1 > 0 ? x1 : 0; 
y1 = y1 > 0 ? y1 : 0; 
this.setCapture && this.setCapture(); 
}); 
dragDiv.mousemove(function (e) { 
if (!dragAble) 
return; 
// 当前div左边的坐标 
// 当前鼠标坐标,减去鼠标拖动量 
var x2 = 0; 
var y2 = 0; 
//需要考虑滚动条问题!!! 
var top = $(document).scrollTop() ? $(document).scrollTop() - 15 : 0; 
var left = $(document).scrollLeft() ? $(document).scrollLeft() - 15 : 0; 
x2 = e.clientX - x1 + left; 
y2 = e.clientY - y1 + top; 
x2 = x2 > 0 ? x2 : 0; 
y2 = y2 > 0 ? y2 : 0; 
//要移动一定数量才移动 
if (Math.abs(l - x2) > 10 || Math.abs(t - y2) > 10) { 
dragBody.css("left", x2 + "px"); 
dragBody.css("top", y2 + "px"); 
} 
//红 #993300 
//灰 #DBEAF9 
//移动结束后判断拖放 
var w = parseInt(dragBody.css('width')); 
var h = parseInt(dragBody.css('height')); 
$.each(dropBody, function () { 
var el = $(this); 
el.css('background-color', 'Gray'); 
var offset = el.offset(); 
var _l = offset.left || 0; 
var _t = offset.top || 0; 
var _w = parseInt(el.css('width')); 
var _h = parseInt(el.css('height')); 
if (x2 > _l && x2 + w < _l + _w && y2 > _t && y2 + h < _t + _h) { 
el.css('background-color', '#DBEAF9'); 
el.append(tmp_body); 
} 
var s = ''; 
}); 
}); 
dragDiv.mouseup(function (event) { 
if (!dragAble) 
return; 
$(document).unbind("selectstart"); 
//还原position 与 cursor 
dragBody.css("position", init_position); 
dragBody.css("cursor", init_cursor); 
//dragBody.css("left", '0'); 
//dragBody.css("top", '0'); 
if (tmp_body) { 
dragBody.insertAfter(tmp_body); 
var offset = tmp_body.offset(); 
l = parseInt(offset.left); 
t = parseInt(offset.top); 
dragBody.css("left", l); 
dragBody.css("top", t); 
tmp_body.remove(); 
} 
dragAble = false; 
// dragDiv.css("position", "relative"); 
this.releaseCapture && this.releaseCapture(); 
}); 
} 
} 
$(document).ready(function () { 
var d1 = $('#d1'); 
var c = $('.c'); 
dragFunc(d1, d1, c); 
}); 
</script> 
<style type="text/css"> 
div 
{ 
width: 100px; 
height: 100px; 
border: 1px solid black; 
} 
.tmp_div 
{ 
border-style: dashed; 
} 
#c1 
{ 
background-color: Gray; 
width: 300px; 
height:300px; 
float:left; 
margin:20px; 
} 
#c2 
{ 
background-color: Gray; 
width: 300px; 
height:300px; 
float:left; 
margin:20px; 
} 
</style> 
</head> 
<body> 
<div id="c1" class="c">1 
<div id="d1">me 
</div> 
</div> 
<div id="c2" class="c">2 
</div> 
</body> 
</html>

异步文件上传
我们所谓的AJAX异步文件上传事实上用js技术好像暂时还不能实现,就我所谓的异步上传事实上还是表单提交,而将form的target指向一

隐藏的iframe,然后成功后回调即可,真是十分坑爹的做法。。。。。

若是要更好的体验,便需要借助flash或者XX框架了,但是我也没有研究过.

<form id="formImg" name="formImg" enctype="multipart/form-data" method="post" action=""> 
<input type="hidden" name="MAX_FILE_SIZE" value="800000" id="max_size"/> 
<input type="hidden" name="callback" value="parent.add_img_input" id="callback"/> 
<a class="upbtn"><input type="file" name="userfile" id="userfile" title="支持JPG、GIF、PNG格式,文件小于1M" 
name="pic" value="" onchange="javascript:up_img(17);">上传</a> 
</form> 
document.charset='utf-8'; 
var form = $('#formImg'); 
var frame = $('#frame_img'); 
if (!frame[0]) { 
frame = $('<iframe id="frame_img" name="frame_img" style="display:none;" ></iframe>'); 
} 
form.append(frame); 
form.attr('target', 'frame_img'); 
form.attr('action', url); 
form.submit(); document.charset='gbk';

但是回调会涉及一点跨域的问题,需要在同一大域名下才行。

现况


爱生活,爱工作,今年继续努力吧!
Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
javascript编码的几个方法详细介绍
Jan 06 #Javascript
javascript返回顶部效果(自写代码)
Jan 06 #Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 #Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 #Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 #Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 #Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 #Javascript
You might like
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
绿色环保标语
2014/06/12 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
《灰雀》教学反思
2016/02/19 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis