一些常用彈出窗口/拖放/異步文件上傳等實用代碼

更新時間：2013年01月06日 11:38:28 投稿：whsnow

今天寫一點工作中遇到的東西【彈出窗口】【拖放】【異步文件上傳】，大家共同學(xué)習(xí),共同進(jìn)步

久不出技術(shù)類文章，我都忘了自己是一程序員啦......今天寫一點工作中遇到的東西，大家共同學(xué)習(xí)，反正也比較淺顯了。

彈出窗口

我們在工作中，經(jīng)常會碰到彈出窗口類應(yīng)用，有時候還需要一點遮蓋層：

這類圓角彈出框其實用得還是很廣泛的，用CSS3可以很容易的出現(xiàn)，但是考慮到瀏覽器兼容問題，這類還是需要用圖片實現(xiàn)了

主要代碼如下：

復(fù)制代碼代碼如下:

//彈出層劇中
function popup(popupName) {
var _scrollHeight = $(document).scrollTop(); //獲取當(dāng)前窗口距離頁面頂部高度
_windowHeight = $(window).height(); //獲取當(dāng)前窗口高度
_windowWidth = $(window).width(); //獲取當(dāng)前窗口寬度
_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" }); //設(shè)置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;
// 當(dāng)前鼠標(biāo)距離div邊框的距離
// 當(dāng)前鼠標(biāo)坐標(biāo)，減去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;
// 當(dāng)前div左邊的坐標(biāo)
// 當(dāng)前鼠標(biāo)坐標(biāo)，減去鼠標(biāo)拖動量
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;
//要移動一定數(shù)量才移動
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">請輸入標(biāo)題</span> <a class="cls" href="javascript:;"></a> ' +
' </h3> ' +
' </div> ' +
' <div class="content"> ' +
' 請輸入內(nèi)容 ' +
' </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);
//關(guān)閉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();
}
};

調(diào)用方法：

復(fù)制代碼代碼如下:

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

具體可能還需要一定函數(shù)回調(diào)，各位可以自己封裝一番。

拖放

工作中也經(jīng)常會出現(xiàn)拖放效果的一些需求：

代碼如下：

復(fù)制代碼代碼如下:

<!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;
// 當(dāng)前鼠標(biāo)距離div邊框的距離
// 當(dāng)前鼠標(biāo)坐標(biāo)，減去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;
// 當(dāng)前div左邊的坐標(biāo)
// 當(dāng)前鼠標(biāo)坐標(biāo)，減去鼠標(biāo)拖動量
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;
//要移動一定數(shù)量才移動
if (Math.abs(l - x2) > 10 || Math.abs(t - y2) > 10) {
dragBody.css("left", x2 + "px");
dragBody.css("top", y2 + "px");
}
//紅 #993300
//灰 #DBEAF9
//移動結(jié)束后判斷拖放
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技術(shù)好像暫時還不能實現(xiàn)，就我所謂的異步上傳事實上還是表單提交，而將form的target指向一

隱藏的iframe，然后成功后回調(diào)即可

若是要更好的體驗，便需要借助flash或者XX框架了，但是我也沒有研究過.

復(fù)制代碼代碼如下:

<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';