(Note: If you link to this blog entry, please use the URL: http://www.jondavis.net/codeprojects/jqDialogForms/ which only temporarily links back to here.)
I'm releasing a v1.0 v1.1 beta build of jqDialogForms, a DHTML-based dialog windows library based on jQuery and jqDnR. This is something I started to build during my free time at my last job (it was never used there) and then continued development and completed it on my own (at home). Since I'm no longer at the job where it would have been useful had it been completed there, I do not have a lot of real-world samples to demonstrate here, but I'm releasing it now in hopes that it can continue to evolve.
There are other libraries out there that produce dialog windows that are completely modal. Modal dialogs are important, but I quickly ran into problems when, for example ...
- A dialog window spawns a child dialog window
- I want to see behind the child's parent's window (move the window)
- I want to open multiple dialog windows at once
- I'm using any modern browser, including IE 7 in quirks mode
- Dialog windows are very large, and users are browsing with small monitors or browser windows
- The user has scrolled down beyond the fold and absolute positioning is used
jqDialogForms has a placeholder for modal dialogs but it's not implemented. The focus instead was on parent disabled+modeless+serializeable windows, meaning the ability to have a child window have a parent window, which forces the child window to retain a top-most z-index over the parent window, while the parent window's form fields are disabled, but you can still access the parent window and even drag it around. None of the windows in this scenario need to be modal; they just retain z-index. You can click on each open window and it acquires "activation", which moves its z-index to the top and then moves all of its child windows above it, and there is also an "active/inactive" titlebar color. It's a Windows 9x multiple app windowing behavior, within the browser. The window is also serializeable, meaning that it is a self-contained <form> with fields that serialize using either jQuery serialize() or using a JSON serialization. It is important to note that I made a point to be ASP.NET Web Forms compatible. jQuery's serialize() function doesn't work well with ASP.NET Web Forms unless the <form>'s are dynamically generated and appended to the body as this library does.
Because it is for dialogs, it assumes Apply and Cancel behavior and the presence of buttons. (OK is Apply+Close. Cancel is Close without Apply.) So there are assignable event handlers for before-show, show, Apply click, and hide. The default layout implements OK/Cancel and a close box on the top right.
- Modeless+parent disabling+serializeable dialog form windows
- Reference a DOM element or a string of HTML as the message or form fields to be displayed
- Automatically switch from fixed positioning to absolute positioning when in quirks mode IE7, and position to the current vertical scroll position
- jqDnR enabled: Resizeable, Windows 9x style
- jqDnR enabled: Drag around the screen via the title bar
- Activateable; show multiple windows, and activate/focus each window as it is clicked on (Windows 9x application windows activation behavior)
- Lacking CSS conformance of a dialog window container, a prefab one is used that includes a title bar, a close box, and OK/Cancel buttons.
- OK button invokes Apply event handler and then, if not invalidated, closes the window.
- Dirty state detection; on editable forms, OK/Apply buttons are disabled unless a field is changed
- Exposes form serialize functions that outputs name/value HTML/querystring encoding (in the style of jQuery serialize()), or JSON serialization.
- "Smart" top positioning for oversized dialogs
- CSS-driven layout
Among the several known issues:
- Multiple windows do not retain their activation order.
- No fully modal dialog or truly modeless (non-disabling) support
- No demo No extensive demos
- No documentation
It's NOT perfect, there are a few missing parts and pieces, but as far as I know it's a stable beta and can probably be used in production environments (I think). If you have any comments or suggestions, please use the Comments herein on this blog or e-mail me.