jqDialogForms is a Javascript library based on jQuery that was built for producing windowed forms using strictly dynamic HTML. The inspiration comes from the development workflow of Visual Basic "Forms" and .NET Windows Forms, combined with the utility of HTML <form>'s and jQuery's serialize().
Features:
- 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 modal dialog or truly modeless (non-disabling) support
No demoNo extensive demo- No documentation
A few months back I released a Javascript library called jqAlert. I will probably rewrite jqAlert to use jqDialogForms.
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).
Unlike normal jQuery plug-ins, jqDialogForms is only dependent upon jQuery, it does not attach to jQuery.
To use jqDialogForms, you must instantiate a new DialogWindow object
with your options, pass a function callback to its apply() event,
and then invoke its show() function.
Here is the constructor signature for the DialogWindow object:
var DialogWindow = function(optional_message, optional_options, optional_parentWindow) { ... }For example,
var msg = 'Greetings.';
var myWindow = new DialogWindow(msg, {title: 'Enter your name'});
myWindow.show();
var msg = '<p>Please enter your name.</p><p><input name="your_name" style="width: 250px" /></p>';
var myWindow = new DialogWindow(msg, {title: 'Enter your name'});
myWindow.el.style.width = '300px';
myWindow.beforeShow(function() { alert('beforeShow'); });
myWindow.show(function() { alert('showing'); });
myWindow.apply(function() { alert('applying: ' + myWindow.serialize(true)); });
myWindow.show();
Multiple Forms & Activation
This sample displays multiple dialog windows. Click on the titlebar, message text, or gray space of each one to "activate" it.
Source
'Apply' Handler
Demonstrates the automatic detection of changes to form fields, followed by the manual handling of the 'Apply' event, which is raised when the OK button or the Apply button is clicked. (OK=Apply+Close.)
Source
Parent/Child Window Ownership
Demonstrates a parent's "ownership" of a child window, forcing the child window to stay on top of the parent window.
Source
Parent/Child Window Ownership With Parent Fields Blocking
Demonstrates a parent's "ownership" of a child window, forcing the child window to stay on top of the parent window, and blocking the parent's input fields until the child window is closed.
Source
DOM Element => HTML
This sample shows how the HTML of a DOM element can be used for the content body.
Source
DOM Element (direct)
This sample shows how a DOM element can be directly used for the content body. Note: Once consumed, it is destroyed with the window.
Source
Form Serialization
This sample demonstrates the two types of form serialization: default encoding and JSON.
Source
DialogWindow.DefaultOptions = {
containerWindowElement: null,
reuseElement: false, // set to true to use the element object rather
// than its HTML
title: 'Dialog', // the text for dialogTitle element
top: 'middle', // set to pixels or to 'middle'
left: 'center', // set to pixels or to 'center'
css: { // injected to the dialogWindow element
position: 'fixed',
minWidth: '120px'
},
iconUrl: '', // if set, adds an image to dialogIcon element
modal: false, // can be false (normal), true (page blocking -- not yet implemented),
// 'modeless' (takes Z-Index of parent), or
// 'parent' (like 'modeless' but also block
// parent's message and buttons)
showAnimate: null, // function; callback function that uses jQuery
// animate options structure, w/ added
// props: speed, easing, callback
hideAnimate: null, // function; callback function for performing an
// animation after closing a form
hideOkCancelButtons: false, // hide the element that contains the OK / Apply
// / Cancel buttons
hideOkButton: false, // hide the OK button
hideApplyButton: true, // hide the Apply button
hideCancelButton: true, // hide the Cancel button
allowResize: true, // enable jqDnR for resizing
okText: 'OK', // the text to be displayed on the OK button
applyText: 'Apply', // the text to be displayed on the Apply button
cancelText: 'Cancel' // the text to be displayed on the Cancel button
};