diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2011-07-20 13:15:28 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2011-07-20 13:15:28 -0400 |
| commit | 51ee3be39829e339c8e4bccb532347944e600ca5 (patch) | |
| tree | cc19197fa40b71ef83f7f1e802c4cd0efb965a8c | |
| parent | e2a9b0c5685852e3de50c31f0d842de2e5186292 (diff) | |
| download | jquery-ui-51ee3be39829e339c8e4bccb532347944e600ca5.tar.gz jquery-ui-51ee3be39829e339c8e4bccb532347944e600ca5.zip | |
Widget demo: Add a button to change the color of the widget.
| -rw-r--r-- | demos/widget/default.html | 26 |
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() |