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


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高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
jquery实现上传图片功能
Jun 29 jQuery
JavaScript 绘制饼图的示例
Feb 19 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python同时替换多个字符串方法示例
2019/09/17 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python异常处理机制结构实例解析
2020/07/23 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
销售职业生涯规划范文
2014/03/14 职场文书
数学教育专业求职信
2014/07/22 职场文书
政风行风建设责任书
2014/07/23 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
同意转租证明
2015/06/24 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
CentOS安装Nginx并部署vue
2022/04/12 Servers