mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Selectmenu: improved events and added test file with callbacks
This commit is contained in:
parent
257067c81b
commit
9c43d64312
@ -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>
|
||||
|
72
tests/visual/selectmenu/events.html
Normal file
72
tests/visual/selectmenu/events.html
Normal file
@ -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>
|
32
ui/jquery.ui.selectmenu.js
vendored
32
ui/jquery.ui.selectmenu.js
vendored
@ -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() );
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user