Effect Chart
Call schematic
Interaction diagram
As shown in the figure above, this is basically a complete logical flow of jquerydialog.
1, the user clicks the modal window "submits" the button, calls the Jquerydialog.ok () function, this function corresponds the user submits the event.
2, with the concept of Oo, Jquerydialog.ok () is actually a virtual function, its logic encapsulated in the child window Contentwindow.ok (), which I borrowed from the FCKeditor, as shown in the following code:
JS Code
Copy Code code as follows:
var Jquerydialog = {
<summary> Submit </summary>
<remark></remark>
Ok:function () {
var frm = $ ("#jd_iframe");
if (Frm[0].contentwindow.ok ()) {
Jquerydialog.close ();
}
else{
Frm[0].focus ();
}
}
};
Therefore, each subpage to dialog must define function OK to be invoked by the parent window and return True or FALSE to notify the parent window dialog whether it is closed.
3, usually in the Contentwindow will include the service side of the processing logic, which requires a post to interact with the server, because the Contentwindow itself does not contain a "submit" button, so if you want to post it must be in Contentwindow.ok () Write the Submit () yourself.
4, finally, the service end of the logic implementation, control rights need to return to dialog. So I encapsulated the jquerydialog.submitcompleted (), which contains three parameters for the dialog to perform the final logical processing: whether to eject the message and the message content, whether to close the dialog, whether to refresh the parent window. This function also benefits from FCKeditor, as follows:
JS Code
Copy Code code as follows:
var Jquerydialog = {
<summary> Submit Complete </summary>
<param name= "Alertmsg" > Pop-up prompt content, value is null do not eject </param>
<param name= "Isclosedialog" > whether to close the dialog box </param>
<param name= "isrefreshpage" > Refresh page (Valid when closing dialog box is true) </param>
Submitcompleted:function (Alertmsg, Isclosedialog, Isrefreshpage) {
if ($.trim (alertmsg). length > 0) {
alert (alertmsg);
}
if (Isclosedialog) {
Jquerydialog.close ();
if (isrefreshpage) {
Window.location.href = window.location.href;
}
}
}
};
5, the result response, to the user present.
Development log
JS modal window on the internet a catch is a lot of reference to some, eventually decided to put this also into their own many "original project" one of them, after all, in the web Development window or use very frequently. From the release of the log can also be seen, this thing has been tinkering with a period of time, basically now is still an initial version, but I will insist on constantly improve it, the process of learning to learn the jquery, FCKeditor and other large JS project framework, a lot of income At the same time, and once again experienced JS browser compatibility and debugging of the bitter, but why not? Enjoy.
Talk about the implementation of the project: first, based on floating div. Then IFRAME child page, use IFRAME I think for users and developers are the most convenient, modal window content is a child page content, modal window switch is the paging, the transfer of different sub page URL is opened different content modal window. confirmed that the frame structure is finally some processing details, such as the child page event and modal window close association, which I get a great help from the FCKeditor, reference to its implementation, you can view the demo in detail code; Some common DOM methods are encapsulated for multiple browser compatibility ; Some custom configurations, such as border color, background color, are added. At the same time considering the ease of use, all using CSS to achieve results, the project does not use pictures.
OK, as mentioned earlier, this is a relatively basic version, I will adhere to the continuous improvement, welcome everyone to use and put forward valuable suggestions. (Wu Jian, 2009-06-01)
--------------------------------------------------------
Recently done a project, mainly based on the client, JQuery + JSON, wrote nearly 4,000 lines of JS code. Although the project was handed out without a knot, but began to have a good impression of jquery and put it down, and decided to formally rename the project to Jquerydialog.
This update is completely based on the jquery framework, and the namespace, so that JS seems to have a bit of OO sense, while modifying the client ID, plus the jd_ prefix to avoid conflict, modified the drag core function, supported by multiple browsers. Finally, an example of interaction between client and server is added to the demo. Welcome everyone to download and use. (Wu Jian, 2009-11-05)
-------------------------------------------------------
Always feel dragged not smooth, decided to completely solve the problem, these days to check a lot of data, finally found the problem: because the use of IFRAME, when the mouse moved to the IFRAME, MouseMove event lost, we can try the demo, After the modification now the drag and drop is completely smooth, and simply I also isolated a draganddrop class, specifically to achieve drag-and-drop. Have to thank FCKeditor source code, absorbing a lot of its essence, some days ago to see the news, FCKeditor refactoring the code, the introduction of the CKEditor of the Mac style, has been studying FCK, I believe that over time will write a FCKeditor source code analysis of the article.
The ok,2.0.1 version optimizes the core drag-and-drop, while fixing bugs such as dialog location, Mouse style, adding custom-style configuration items and optimizing the jquery cache. (Wu Jian, 2009-12-13)
-------------------------------------------------------
Upgrade jquery to 1.4, while fixing two bugs for event registration. (Wu Jian, 2010-01-18)
-------------------------------------------------------
Added an internal extension for the open method to fix the bug shown in the IE6 section. (Wu Jian, 2010-02-03)
Release release
JS Code
/*****************************************************************************
Author
Wu Jian http://wu-jian.cnblogs.com/
[Version UPDATE]
2009-06-01: Version 1.0.1 released.
2009-07-05: Version 1.0.2, updated with some obvious bugs, fully supports IE series browsers.
2009-08-15: Version 1.0.3, encapsulated with standard DOM, multiple browser compatible, style beautification, added shadow effect.
2009-11-05: Version 2.0.0, based on jquery new encapsulation, the JS namespace has been applied to avoid client ID conflicts.
The project was officially renamed JQuery Dialog, optimized for drag-and-drop core implementations and fully supported across browsers.
2009-12-14: Version 2.0.1, optimized the core drag-and-drop algorithm, separated the Draganddrop class.
Fixed the bug where the mouse dragged too fast dialog paused.
Fixes a bug that is positioned when the dialog width or height is greater than the page.
Fixed a bug where the mouse style and drag control area were not accurate.
Added configuration items, jquery cache optimization.
2010-01-18: Version 2.0.2,jquery upgraded to 1.4.
2010-02-03: Version 2.0.3, adding an internal extension for the open () method, fixing the IE6 section to show the bug.
*****************************************************************************/
DEMO http://demo.jb51.net/js/jquery_dialog/default.html
Click to download
