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


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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
JS实现吸顶特效
2020/01/08 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
python Flask实现restful api service
2017/12/04 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
安全员岗位职责
2013/11/11 职场文书
策划助理岗位职责
2013/11/18 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
邀请函怎么写
2015/01/30 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL