Some common pop-up window, drag-and-drop, asynchronous file upload, and other practical code

I have forgotten that I am a programmer because I have never been a technical article. Today I am writing something that I have encountered at work. I learned it together and it is quite simple.

Pop-up windowDuring our work, we often encounter pop-up window applications, and sometimes we need a bit of coverage layer:

 

In fact, this type of corner pop-up box is still very widely used, and it can be very easy to use CSS3. However, considering browser compatibility problems, this type of corner pop-up box still needs to be implemented using images.

The main code is as follows::
Copy codeThe Code is as follows:
// Pop-up layer play
Function popup (popupName ){
Var _ scrollHeight = $ (document). scrollTop (); // obtain the height of the current window from the top of the page.
_ Optional wheight = $ (window). height (); // get the current window height
_ Required wwidth = $ (window). width (); // obtain the current window width.
_ PopupHeight = popupName. height (); // obtain the height of the pop-up layer
_ PopupWeight = popupName. width (); // obtain the pop-up layer width.
// _ PosiTop = (_ javaswheight-_ popupHeight)/2 + _ scrollHeight-50;
_ PosiTop = _ scrollHeight + 120;
_ PosiLeft = (_ Your wwidth-_ 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;
// The distance between the current mouse and the div border
// The current mouse coordinate, minus the pixel relative to the left of the 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;
// Coordinates on the left of the current div
// The current mouse coordinate, minus the amount of mouse dragging
Var x2 = 0;
Var y2 = 0;
// You need to consider the 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;
// Move a certain number of objects
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"> enter the title </span> <a class = "cls" href = "javascript:;"> </a>' +
'</H3>' +
'</Div>' +
'<Div class = "content">' +
'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 );
// Disable 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 is a problem
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 codeThe Code is as follows:
Var dia = new MyDialog ({
Title: title,
BodyId: id,
Id: id + '_ box'
});
Dia. show ();

Some Function callbacks may be required. You can encapsulate them yourself.

Drag and DropSome requirements for drag-and-drop effects often occur during work:

The Code is as follows::
Copy codeThe Code is as follows:
<! 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;
// The distance between the current mouse and the div border
// The current mouse coordinate, minus the pixel relative to the left of the 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;
// Coordinates on the left of the current div
// The current mouse coordinate, minus the amount of mouse dragging
Var x2 = 0;
Var y2 = 0;
// You need to consider the 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;
// Move a certain number of objects
If (Math. abs (l-x2)> 10 | Math. abs (t-y2)> 10 ){
DragBody.css ("left", x2 + "px ");
DragBody.css ("top", y2 + "px ");
}
// Red #993300.
// Gray # DBEAF9
// Judge drag and drop after moving
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 ");
// Restore 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 = $('#1 ');
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>

Asynchronous File Upload

The so-called AJAX asynchronous file upload is actually not implemented by js technology, so my so-called asynchronous upload is actually a form submission, and the target of form is directed

The hidden iframe can be called back after the operation is successful .....

For better experience, I need to use flash or XX framework, but I have not studied it.
Copy codeThe Code is as follows:
<Form id = "formImg" name = "formImg" enctype = "multipart/form-data" method = "post" action = "">
<Input type = "hiding" 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, and PNG formats are supported, file smaller than 1 MB"
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 ';

However, callback involves a single cross-domain issue, which must be under the same domain name.

Current situationLove Life and Work. Continue to work hard this year!