diff options
| author | Felix Nagel <info@felixnagel.com> | 2011-09-27 22:04:49 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2011-09-27 22:06:03 +0200 |
| commit | 9c43d64312f47aba82596495796eed25b04c6656 (patch) | |
| tree | 623023ca3bfb5058a47f8f2c0b8d3f954d396539 | |
| parent | 257067c81baac222cbd64222b2d100da32c90fbd (diff) | |
| download | jquery-ui-9c43d64312f47aba82596495796eed25b04c6656.tar.gz jquery-ui-9c43d64312f47aba82596495796eed25b04c6656.zip | |
Selectmenu: improved events and added test file with callbacks
| -rw-r--r-- | tests/visual/selectmenu/disabled.html | 2 | ||||
| -rw-r--r-- | tests/visual/selectmenu/events.html | 72 | ||||
| -rw-r--r-- | ui/jquery.ui.selectmenu.js | 32 |
3 files changed, 91 insertions, 15 deletions
diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html index baf0dcf46..cf979a9ee 100644 --- a/tests/visual/selectmenu/disabled.html +++ b/tests/visual/selectmenu/disabled.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>jQuery UI Selectmenu - Default functionality</title> + <title>jQuery UI Selectmenu - Disable functionality</title> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.6.2.js"></script> <script src="../../../ui/jquery.ui.core.js"></script> diff --git a/tests/visual/selectmenu/events.html b/tests/visual/selectmenu/events.html new file mode 100644 index 000000000..0d5e3ee67 --- /dev/null +++ b/tests/visual/selectmenu/events.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Selectmenu - Event functionality</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.6.2.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.button.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script src="../../../ui/jquery.ui.selectmenu.js"></script> + <link rel="stylesheet" href="../../../demos/demos.css"> + <script> + $(function() { + var log = $("#log"); + var index = 0; + $('select').selectmenu({ + open: function(event, ui) { + $("<div/>").text( index++ + " Opened").prependTo(log); + }, + close: function(event, ui) { + $("<div/>").text( index++ + " Closed").prependTo(log); + }, + focus : function(event, ui) { + $("<div/>").text( index++ + " Focused: " + ui.item.label).prependTo(log); + }, + select: function(event, ui) { + $("<div/>").text( index++ + " Selected: " + ui.item.label).prependTo(log); + }, + change: function(event, ui) { + $("<div/>").text( index++ + " Changed to: " + ui.item.label).prependTo(log); + } + }); + }); + </script> + <style> + form { margin: 20px 0 0 0 } + fieldset { border: 0; } + select { width: 200px; } + .overflow ul { height: 200px; overflow: auto; } + </style> +</head> +<body> + +<div class="demo"> + + +<div class="ui-widget" style="float: left; margin-top:2em; font-family:Arial"> + Log: + <div id="log" style="height: 400px; width: 270px; overflow: auto;" class="ui-widget-content"></div> +</div> + +<form action="#"> + <fieldset> + <label for="speed">Select a speed:</label> + <select name="speed" id="speed"> + <option value="Slower">Slower</option> + <option value="Slow">Slow</option> + <option value="Medium" selected="selected">Medium</option> + <option value="Fast">Fast</option> + <option value="Faster">Faster</option> + </select> +</form> + +</div><!-- End demo --> + + + +</body> +</html> diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index 6d54fa248..38688b845 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -189,9 +189,9 @@ $.widget( "ui.selectmenu", { item.element = self.items[ item.index ]; self._trigger( "select", event, { item: item } ); - self.close( event, true); - if ( flag ) self._trigger( "change", event, { item: item } ); + + self.close( event, true); }, focus: function( event, ui ) { self._trigger( "focus", event, { item: ui.item.data( "item.selectmenu" ) } ); @@ -269,19 +269,21 @@ $.widget( "ui.selectmenu", { close: function( event, focus ) { var self = this, options = this.options; - - if ( options.dropdown ) { - self.newelement - .addClass( 'ui-corner-all' ) - .removeClass( 'ui-corner-top' ); + + if ( self.opened ) { + if ( options.dropdown ) { + self.newelement + .addClass( 'ui-corner-all' ) + .removeClass( 'ui-corner-top' ); + } + + self.listWrap.removeClass( self.widgetBaseClass + '-open' ); + this.opened = false; + + if (focus) self.newelement.focus(); + + self._trigger( "close", event ); } - - self.listWrap.removeClass( self.widgetBaseClass + '-open' ); - this.opened = false; - - if (focus) self.newelement.focus(); - - self._trigger( "close", event ); }, _renderMenu: function( ul, items ) { @@ -314,6 +316,8 @@ $.widget( "ui.selectmenu", { }, _move: function( key, event ) { + // TODO this focus is needed to make the select below work, + // but should be removed as its fires an unwanted focus event if ( !this.opened ) { this.list.menu( "focus", event, this._getSelectedItem() ); } |