Widget demo: Add a button to change the color of the widget.

1 files changed, 22 insertions, 4 deletions

diff --git a/demos/widget/default.html b/demos/widget/default.html
index c2b520983..b8b012f0e 100644
--- a/demos/widget/default.html
+++ b/demos/widget/default.html
@@ -6,15 +6,23 @@
 	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
 	<script src="../../jquery-1.5.1.js"></script>
 	<script src="../../ui/jquery.ui.core.js"></script>
-	<script src="../../ui/jquery.ui.widget.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
 	.custom-colorize {
-		font-size: 25px;
+		font-size: 20px;
+		position: relative;
 		width: 75px;
 		height: 75px;
 	}
+	.custom-colorize-changer {
+		font-size: 10px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
 	</style>
 	<script>
 	$(function() {
@@ -40,8 +48,15 @@
 					// prevent double click to select text
 					.disableSelection();
 
-				// bind click events to random method
-				this._bind({
+				this.changer = $( "<button>", {
+					text: "change",
+					className: "custom-colorize-changer"
+				})
+				.appendTo( this.element )
+				.button();
+
+				// bind click events on the changer button to the random method
+				this._bind( this.changer, {
 					// _bind won't call random when widget is disabled
 					click: "random"
 				});
@@ -78,6 +93,9 @@
 			// events bound via _bind are removed automatically
 			// revert other modifications here
 			_destroy: function() {
+				// remove generated elements
+				this.changer.remove();
+
 				this.element
 					.removeClass( "custom-colorize" )
 					.enableSelection()