Long time no technical articles, I have forgotten that I am a programmer ... Today, write a little work encountered in the things, we learn together, anyway, it is more obvious.
pop-up window In our work, we often encounter pop-up window class applications, sometimes need a little masking layer:
This kind of fillet pop-up box is used in fact is very wide, with CSS3 can be very easy to appear, but in view of the browser compatibility problem, this kind of still need to use a picture to achieve
The main code is as follows :
Copy Code code as follows:
In the pop-up drama
function popup (popupname) {
var _scrollheight = $ (document). ScrollTop (); Gets the height of the current window from the top of the page
_windowheight = $ (window). Height (); Gets the current window height
_windowwidth = $ (window). width (); Get the current window width
_popupheight = Popupname.height (); Get the pop-up layer height
_popupweight = Popupname.width (); Get the pop-up layer width
_positop = (_windowheight-_popupheight)/2 + _scrollheight-50;
_positop = _scrollheight + 120;
_posileft = (_windowwidth-_popupweight)/2;
Popupname.css ({"Left": _posileft + "px", "top": _positop + "px", "Display": "Block"}); Set 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;
Distance of the current mouse from the Div border
The current mouse coordinates minus the div relative to the left pixel
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
Coordinates to the left of the current Div
Current mouse coordinates, minus the amount of mouse drag
var x2 = 0;
var y2 = 0;
Need to consider scroll bar problem!!!
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;
To move a certain number before moving
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 ' > ' +
' ' <span class= ' title_text > Please enter title </span> <a class= "CLS" href= "javascript:;" ></a> ' +
' ' </div> ' +
' <div class= ' content ' > ' +
' Please enter the 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);
}
Center
popup (box);
Close 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 () {
There's a problem here.
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 ();
}
};
Call Method:
Copy Code code as follows:
var dia = new Mydialog ({
Title:title,
Bodyid:id,
Id:id + ' _box '
});
Dia.show ();
You may also need a certain function callback, you can encapsulate it yourself.
Drag and Drop There are also many requirements for drag-and-drop effects in your work:
The code is as follows :
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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;
Distance of the current mouse from the Div border
The current mouse coordinates minus the div relative to the left pixel
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
Coordinates to the left of the current Div
Current mouse coordinates, minus the amount of mouse drag
var x2 = 0;
var y2 = 0;
Need to consider scroll bar problem!!!
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;
To move a certain number before moving
if (Math.Abs (l-x2) > 10 | | | Math.Abs (T-y2) > 10) {
Dragbody.css ("left", x2 + "px");
Dragbody.css ("Top", y2 + "px");
}
Red #993300
Ash #DBEAF9
To determine drag and drop after moving over
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");
Reduction position and 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>
<body>
<div id= "C1" class= "C" >1
<div id= "D1" >me
</div>
</div>
<div id= "C2" class= "C" >2
</div>
</body>
Asynchronous File Upload
We call Ajax asynchronous file upload in fact, with the JS technology seems to be temporarily not implemented, as I call the asynchronous upload is in fact a form submission, and the form of Target point to a
Hidden iframe, and then a successful callback can be really very pit Dad's practice ....
If you want a better experience, you need to use the Flash or XX framework, but I have not studied.
Copy Code code as follows:
<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= "support jpg, GIF, PNG format, file less than 1M"
Name= "pic" value= "" Onchange= "javascript:up_img (17);" > Upload </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 ';
But the callback involves a bit of cross-domain problem that needs to be done under the same large domain name.
Current Situation Love life, love to work, continue to work this year!
