jquery Drag & Eject Layer Introduction and sample _javascript Tips

Idrag & Idialog Introduction
Characteristics:
Idialog.js relies on the Easy-to-use dialog box written in jquery, and can also change the display animation of the dialog box by adding CSS3. Two methods are available:

• 1, drag function Idrag () or $.drag ();
• 2, dialog box function Idialog () or $.dialog ();
Cross-platform compatibility:
Compatible: ie6+, Firefox, Chrome and other mainstream browsers (other temporary no condition test). And IE6 can also support the modern browser static positioning (fixed), overwriting the Drop-down control.

Incrementally Enhanced Experience:
To ensure the function of the IE family is perfect, the modern browser to add CSS3 to enhance the experience, such as shadows, rounded corners, and scale show, Super Scale show, right slide show animation, animation can also modify the CSS file to expand.

Rich interface:
1. $.drag () function, which provides drag-and-drop range settings, drag-and-drop process, drag-and-drop end of the callback function; 2. $.dialog () function, which provides CSS3 display effects, size, location, display, shutdown and external access interface, etc., more reference to the following API.

Quick Start:
<script src= "Lib/js/jquery-1.8.3.min.js" ></script>
<script src= "lib/js/jquery.idialog.js" dialog-theme= "Default" ></script>
Jquery.idialog.js is based on jquery, so you must load jquery before loading it;
dialog-theme= "Default" indicates that the DEFAULT.CSS style sheet will be loaded automatically;
Default.css must be saved in the theme folder, and the folder should be in the same directory as jquery.iDialog.js.
Idrag () Full Use example:
JS Code:

Copy Code code as follows:

var log = $ (' #drag-demo-log ');

Idrag ({

Target: ' #drag-demo ',

min:{x:0, y:0},

max:{x:658, y:170},

Start:function (POS) {

log.html (' start:x= ' +pos.x+ ', y= ' +pos.y);

},

Move:function (POS) {

log.html (' move:left= ' +pos.x+ ', top= ' +pos.y);

},

End:function (POS) {

log.html (' end:left= ' +pos.x+ ', top= ' +pos.y);

}

});

A idialog () Use example:

Copy Code code as follows:

Idialog ({

Title: ' Hello World ',

ID: ' Demodialog ',

Content: ' <p> everybody good:<br> I am mindialog</p> ',

Lock:true,

WIDTH:500,

Fixed:true,

height:300

});