Simple popup dialogs for jQM
JavaScript Perl
Switch branches/tags
Nothing to show
Pull request Compare This branch is 87 commits behind jtsage:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
css
demos
external
js
screens
README.md
index.html

README.md

jQuery-Mobile-SimpleDialog

SimpleDialog is a very simple popup (modal) or jQMdialog (page) Dialog widget. For usage, see the source of the demo.

SimpleDialog Features

  • Two display modes, either a button choice (bool), or a text entry (string).

  • Attempts to position itself centered over the input, however, for small screens, it will open a dialog window instead.

  • Click outside the widget to close.

  • Options can be configured via data-options attribute

Suggested Use

The use of SimpleDialog is just that, very simple. Assuming a trigger of a usual button, i.e.:

<a href='#' id='diag1' data-role='button'>Simple Dialog, String Style</a>

A typical SimpleDialog code block would look like:

$('#diag1').live('click', function() {
	$(this).simpledialog({
		'mode' : 'string',
		'prompt' : 'Type Something!',
		'buttons' : {
			'Done, Submit': {
				click: function () { 
					alert('You Wrote: ' + $('#diag1').attr('data-string'));
				}
			},
			'Cancel': {
				click: function () { return true; },
				icon: "delete",
				theme: "c"
			}
		}
	})
});

Global Option Overrides:

// AFTER loading jQM
jQuery.extend(jQuery.mobile.simpledialog.prototype.options, {
	'useDialogForceTrue': true
});

Available Options

These can be passed to the dialog via an object set at the data-options attribute, or in the standard method

  • option : Description (default value)

Themeing:

  • pickPageTheme : Theme for popup window or dialog. (b)
  • pickPageInputTheme : String Mode Input Element. (e)
  • pickPageButtonTheme : Widget buttons. (a)
  • zindex : Z-Index for popup window. (500)

Customization:

  • mode : Mode of operation - either 'bool' Choice buttons, or 'string' input. (bool)
  • prompt : Prompt for dialog, or false to suppress display. (Are you sure?)
  • buttons : Object for buttons. (null)
  • allowReopen : Allow widget to reopen. (true)
  • useModal : Use modal styling - fade out background. (true)
  • forceInput : Force the user to choose a button in popup mode. (true)
  • useDialogForceTrue : Boolean Always use Dialog Window, regardless of screen size. (false)
  • useDialogForceFalse : Boolean Never use Dialog Window, regardless of screen size. (false)
  • enterToTrigger : Index of the button to trigger on ENTER [string mode]. (0)
  • escToTrigger : Index of the button to trigger on ESC [string mode]. (1)

Button Customization:

  • click : Function to perform on click
  • icon : Icon for button
  • theme : Theme for button

Runtime Fun:

  • butObj : contains the button objects. e.g. butObj[0].trigger('click') might be fun.
  • sawOnce : on a forceInput dialog, set to false to allow it to open again.

Note: forceInput + useModal is the rough equivalent to modal: true in ui.dialog