JQuery Drag & amp; pop-up layer introduction and Examples

IDrag & iDialog Introduction
Features:
IDialog. js depends on jquery's easy-to-use dialog box. You can also add css3 to change the display animation of the dialog box. Two methods are provided:

• 1. drag functions iDrag () or $. drag ();
• 2. the dialog box function iDialog () or $. dialog ();
Cross-platform compatibility:
Compatible: Mainstream browsers such as IE6 +, Firefox, and Chrome (other temporarily unavailable tests ). In addition, IE6 also supports static location (fixed) and overwrite drop-down controls of modern browsers.

Progressive enhancement:
To ensure that the functions of the IE family are complete, modern browsers add css3 to enhance the experience, such as shadows, rounded corners, and scale show, super scale show, and right slide show animations, you can also modify the css file to expand the animation.

Rich interfaces:
1. $. the drag () function provides the drag range setting. before dragging, the drag process, and the drag-and-drop callback function; 2. $. the dialog () function provides css3 to display special effects, sizes, locations, display, close, and external access interfaces. For more information, see the following APIs.

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 depends on jquery, so jQuery must be loaded before it is loaded;
• Dialog-theme = "default" category: the default.css style sheet is automatically created;
• Default.css must be saved in the theme folder, which must be in the same directory as jquery. iDialog. js.
Complete use example of iDrag:
JS Code:

Copy codeThe Code is 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 );

}

});

An iDialog () Example:
Copy codeThe Code is as follows:
IDialog ({

Title: 'Hello world ',

Id: 'modiquota ',

Content: '<p> hello, everyone: <br> I am minDialog </p> ',

Lock: true,

Width: 500,

Fixed: true,

Height: 300

});