Added dialog functional demo

eduardolundgren · eduardolundgren · commit eb68232a2538 · 2008-06-09T08:25:18.000Z
diff --git a/demos/functional/index.html b/demos/functional/index.html
@@ -53,7 +53,7 @@
 			<script src="js/chili-recipes.js" type="text/javascript"></script>
 	</head>
 
-<body id="functional_demos">
+<body class="flora" id="functional_demos">
 <!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
 <!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
 <!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
diff --git a/demos/functional/js/functional.demo.js b/demos/functional/js/functional.demo.js
@@ -162,6 +162,8 @@ var uiRenderDemo = function(model) {
 
 var loadDemo = function(comp) {
 	
+	$("#dialog").dialog().remove();
+	
 	$('#containerDemo').html("<img src='images/ajax-loader.gif'>");
 	
 	 $("#containerDemo").ajaxError(function(request, settings){ 
diff --git a/demos/functional/templates/ui.dialog.html b/demos/functional/templates/ui.dialog.html
@@ -0,0 +1,34 @@
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Dialog Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple dialog',
+				desc: 'With few lines of code you could build a dialog. You can try more options on the fly!',
+				html: '<div id="dialog">jQuery UI Dialog</div>',
+				destroy: '$("#dialog").dialog("destroy");',
+				options: [
+					{ desc: 'Make a simple dialog', source: '$("#dialog").dialog();' },
+					{ desc: 'Modal dialog', source: '$("#dialog").dialog({ modal: true });' },
+					{ desc: 'Modal dialog with overlay', source: '$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });' },
+					{ desc: 'With buttons', source: '$("#dialog").dialog({buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } }});' },
+					{ desc: 'Close the dialog', source: '$("#dialog").dialog("close");' }
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
