jquery-ui/demos/dialog/modal-form.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Dialog - Modal form</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.4.2.js"></script>
	<script src="../../external/jquery.bgiframe-2.1.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.effects.core.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
	<script>
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog" ).dialog( "destroy" );
		
		var name = $( "#name" ),
			email = $( "#email" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( email ).add( password ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"Create an account": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error' );

					bValid = bValid && checkLength( name, "username", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "password", 5, 16 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( "#create-user" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

</div><!-- End demo -->


<div class="demo-description">
<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->

</body>
</html>
html pages: added HTML5 meta charset UTF-8 tag, changed DOCTYPE to uppercase 2010-03-12 03:18:34 +00:00			`<!DOCTYPE html>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`<html lang="en">`
			`<head>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<meta charset="utf-8">`
slightly reorganized/renamed demos to better reflect functionality 2009-01-20 20:09:55 +00:00			`<title>jQuery UI Dialog - Modal form</title>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">`
			`<script src="../../jquery-1.4.2.js"></script>`
			`<script src="../../external/jquery.bgiframe-2.1.1.js"></script>`
			`<script src="../../ui/jquery.ui.core.js"></script>`
			`<script src="../../ui/jquery.ui.widget.js"></script>`
			`<script src="../../ui/jquery.ui.mouse.js"></script>`
			`<script src="../../ui/jquery.ui.button.js"></script>`
			`<script src="../../ui/jquery.ui.draggable.js"></script>`
			`<script src="../../ui/jquery.ui.position.js"></script>`
			`<script src="../../ui/jquery.ui.resizable.js"></script>`
			`<script src="../../ui/jquery.ui.dialog.js"></script>`
			`<script src="../../ui/jquery.effects.core.js"></script>`
			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`body { font-size: 62.5%; }`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`label, input { display:block; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`input.text { margin-bottom:12px; width:95%; padding: .4em; }`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`fieldset { padding:0; border:0; margin-top:25px; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`h1 { font-size: 1.2em; margin: .6em 0; }`
Dialog demo: Removed misplaced !important. 2009-04-18 19:09:41 +00:00			`div#users-contain { width: 350px; margin: 20px 0; }`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }`
			`div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`.ui-dialog .ui-state-error { padding: .3em; }`
			`.validateTips { border: 1px solid transparent; padding: 0.3em; }`
demos/dialog/modal_form.html: markup tweaks 2008-12-31 06:32:43 +00:00			`</style>`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<script>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`$(function() {`
workaround for #4375 2009-07-11 14:00:08 +00:00			`// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`$( "#dialog" ).dialog( "destroy" );`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`var name = $( "#name" ),`
			`email = $( "#email" ),`
			`password = $( "#password" ),`
			`allFields = $( [] ).add( name ).add( email ).add( password ),`
			`tips = $( ".validateTips" );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function updateTips( t ) {`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`tips`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`.text( t )`
			`.addClass( "ui-state-highlight" );`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`setTimeout(function() {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`tips.removeClass( "ui-state-highlight", 1500 );`
			`}, 500 );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`}`

Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function checkLength( o, n, min, max ) {`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`if ( o.val().length > max \|\| o.val().length < min ) {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`o.addClass( "ui-state-error" );`
			`updateTips( "Length of " + n + " must be between " +`
			`min + " and " + max + "." );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`return false;`
			`} else {`
			`return true;`
			`}`
			`}`

Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`function checkRegexp( o, regexp, n ) {`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`if ( !( regexp.test( o.val() ) ) ) {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`o.addClass( "ui-state-error" );`
			`updateTips( n );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`return false;`
			`} else {`
			`return true;`
			`}`
			`}`

Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`$( "#dialog-form" ).dialog({`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`autoOpen: false,`
demos/dialog: set up dialog demos to use bgiframe 2009-01-07 03:40:05 +00:00			`height: 300,`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`width: 350,`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`modal: true,`
			`buttons: {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`"Create an account": function() {`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`var bValid = true;`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`allFields.removeClass( "ui-state-error' );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`bValid = bValid && checkLength( name, "username", 3, 16 );`
			`bValid = bValid && checkLength( email, "email", 6, 80 );`
			`bValid = bValid && checkLength( password, "password", 5, 16 );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			bValid = bValid && checkRegexp( email, /^((([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+))\|((\x22)((((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]\|\x21\|[\x23-\x5b]\|[\x5d-\x7e]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))(((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(\x22)))@((([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
			`bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );`

			`if ( bValid ) {`
			`$( "#users tbody" ).append( "<tr>" +`
			`"<td>" + name.val() + "</td>" +`
			`"<td>" + email.val() + "</td>" +`
			`"<td>" + password.val() + "</td>" +`
			`"</tr>" );`
			`$( this ).dialog( "close" );`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`}`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`},`
			`Cancel: function() {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`$( this ).dialog( "close" );`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`}`
demos dialog: Replaced old modal form with new functioning one. Thanks Scott G and Cloudream. 2009-01-29 20:14:30 +00:00			`},`
			`close: function() {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`allFields.val( "" ).removeClass( "ui-state-error" );`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`}`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`});`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00
			`$( "#create-user" )`
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests). 2010-01-07 03:19:50 +00:00			`.button()`
			`.click(function() {`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`$( "#dialog-form" ).dialog( "open" );`
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests). 2010-01-07 03:19:50 +00:00			`});`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

Added demo wrapper divs, description text and improved sample data 2008-12-30 17:47:22 +00:00			`<div class="demo">`

workaround for #4375 2009-07-11 14:00:08 +00:00			`<div id="dialog-form" title="Create new user">`
Dialog demo: Use the ui-state-highlight class instead of a hard-coded color. Fixes #4808 - Modal dialog form validation demo - error message uses hard-coded color. 2009-08-29 02:12:56 +00:00			`<p class="validateTips">All form fields are required.</p>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00
			`<form>`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`<fieldset>`
			`<label for="name">Name</label>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`<label for="email">Email</label>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`<label for="password">Password</label>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00			`</fieldset>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00			`</form>`
Added demo wrapper divs, description text and improved sample data 2008-12-30 17:47:22 +00:00			`</div>`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00
			`<div id="users-contain" class="ui-widget">`
Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<h1>Existing Users:</h1>`
tossed some framework classes on it, adjusted style. Set autoOpen to false - otherwise the purpose of the dialog is lost on the user 2009-01-29 21:48:09 +00:00			`<table id="users" class="ui-widget ui-widget-content">`
			`<thead>`
			`<tr class="ui-widget-header ">`
			`<th>Name</th>`
			`<th>Email</th>`
			`<th>Password</th>`
			`</tr>`
			`</thead>`
			`<tbody>`
			`<tr>`
			`<td>John Doe</td>`
			`<td>john.doe@example.com</td>`
			`<td>johndoe1</td>`
			`</tr>`
			`</tbody>`
			`</table>`
			`</div>`
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests). 2010-01-07 03:19:50 +00:00			`<button id="create-user">Create new user</button>`
Re-vamped set of dialog examples that shows the standard set of dialog types. Removed button.html because it was expanded into the 3 modal types. 2008-12-29 17:26:17 +00:00
Added demo wrapper divs, description text and improved sample data 2008-12-30 17:47:22 +00:00			`</div><!-- End demo -->`



Dialog demos: Coding standards. 2010-09-10 13:01:54 +00:00			`<div class="demo-description">`
			`<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>`
Added demo wrapper divs, description text and improved sample data 2008-12-30 17:47:22 +00:00			`</div><!-- End demo-description -->`
demos: whitespace fixes - trailing whitespace - inconsistent line endings - set svn:eol-style to native 2008-12-31 01:20:50 +00:00
			`</body>`
			`</html>`