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


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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
Convert Seconds To Hours
Jun 16 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
node实现分片下载的示例代码
2018/10/17 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python创建与遍历List二维列表的方法
2019/08/16 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python 实现端口扫描工具
2020/12/18 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
财务会计自荐信范文
2014/02/21 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
公共场所禁烟标语
2014/06/25 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
代办社保委托书范文
2014/10/06 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python