工作中碰到的一些东西【弹出窗口】【拖放】【异步文件上传】-白红宇

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

这类圆角弹出框其实用得还是很广泛的，用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">

<head>

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>

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 id="c2" class="c">2

</div>

</body>

</html>

异步文件上传

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

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

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

<a class="upbtn"><input type="file" name="userfile" id="userfile" title="支持JPG、GIF、PNG格式，文件小于1M"

name="pic" value="" οnchange="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';

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

现况

爱生活，爱工作，今年继续努力吧！

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/01/05/2846082.html如需转载请自行联系原作者