Comprehensive Examples

Rendering a Login/Registration form to the body with Button Handler

 jQuery.jBuilder.build({
 	layout : 'tab',
 	width : 400,
 	items : [{
 		type : "form",
 		method : "POST",
 		label : "Login",
 		defaults : {
 			anchor : "30%"
 		},
 		id : "loginForm1",
 		items : [{
 			type : "textfield",
 			name : "username",
 			label : "Username",
 			width : 200,
 			tabindex : 1
 		},{
 			type : "password",
 			label : "Password",
 			width : 200,
 			name : "userpass"
 		},{
 			type : "checkbox",
 			label : "Options",
 			items : [{label : "Remember Me", name : "RememberMe", value : "true"}]
 		},{
 			type : "button",
 			items : [{
 				text : "Log In",
 				handler : function() {
 					alert("You clicked the Log In button!");
 					return false;
 				}
 			},{
 				text : "Retrieve",
 				handler : function() {
 					new jQuery.jBuilder.window({
 						title : "Retrieve Password",
 						modal : true,
 						minWidth : 340,
 						resizable : false,
 						buttons : {
 							"Submit" : function() {
 								alert("Retrieve Password");
 							}
 						},
 						items : [{
 							type : "form",
 							method : "POST",
 							label : "Forgot Password",
 							id : "forgotForm",
 							items : [{
 								type : "textfield",
 								anchor : "30%",
 								name : "email",
 								label : "Email",
 								width : 200,
 								tabindex : 1
 							}]
 						}]
 					});
 					return false;
 				}
 			}]
 		}]
 	},{
 		type : "form",
 		method : "POST",
 		label : "Register",
 		id : "registerForm",
 		defaults : {
 			type : "textfield",
 			anchor : "30%"
 		},
 		items : [{
 			name : "username",
 			label : "Username",
 			width : 200,
 			tabindex : 1
 		},{
 			name : "email",
 			label : "Email",
 			width : 200,
 			tabindex : 1
 		},{
 			type : "password",
 			name : "userpass",
 			label : "Password",
 			width : 200,
 			tabindex : 1
 		},{
 			type : "password",
 			label : "Re-type",
 			width : 200,
 			tabindex : 1
 		},{
 			type : "button",
 			text : "Submit",
 			handler : function() {
 				alert("You clicked the Submit button!");
 				return false;
 			}
 		}]
 	}]
 });