Skip to content
Permalink
Browse files

Selectmenu: improved value option, added demo file

  • Loading branch information
fnagel committed Sep 27, 2011
1 parent 9c43d64 commit 4d56732195a9dd2e5e919b1a537a2f73dffa5c41
Showing with 81 additions and 17 deletions.
  1. +4 −4 tests/visual/selectmenu/disabled.html
  2. +62 −0 tests/visual/selectmenu/option.html
  3. +15 −13 ui/jquery.ui.selectmenu.js
@@ -121,12 +121,12 @@
<option value="someotherfile">Some other file</option>
</optgroup>
</select>
<br />
<button id="disable_select">Toggle disable select</button>
<button id="disable_option">Toggle disable option</button>
<button id="disable_optgroup">Toggle disable optgroup</button>
</fieldset>
</form>
<br />
<button id="disable_select">Toggle disable select</button>
<button id="disable_option">Toggle disable option</button>
<button id="disable_optgroup">Toggle disable optgroup</button>

</div><!-- End demo -->

@@ -0,0 +1,62 @@
<!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 mySelectmenu = $('select').selectmenu();

$("#value").click( function() {
mySelectmenu.selectmenu("option", "value", "Faster");
});

$("#dropdown").toggle( function() {
mySelectmenu.selectmenu("option", "dropdown", false);
}, function() {
mySelectmenu.selectmenu("option", "dropdown", true);
});
});
</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">

<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>
</fieldset>
</form>
<br />
<!-- <button id="dropdown">Toggle dropdown style</button> -->
<button id="value">Set option value = 'Faster'</button>

</div><!-- End demo -->



</body>
</html>
@@ -49,12 +49,15 @@ $.widget( "ui.selectmenu", {
// quick array of button and menu id's
self.ids = [ selectmenuId + '-button', selectmenuId + '-menu' ];

// get options
// save options
self.items = self.element.find( 'option' );

// set options
options.value = self.element[0].value;
options.disabled = ( self.element.attr( 'disabled' ) ) ? true : false;
// set current value
if ( options.value ) {
self.element[0].value = options.value;
} else {
options.value = self.element[0].value;
}

// catch click event of the label
self.element.bind( 'click.selectmenu', function() {
@@ -82,7 +85,8 @@ $.widget( "ui.selectmenu", {
primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
}
});


// wrap and insert new button
self.newelementWrap = $( options.wrapperElement )
.append( self.newelement )
.insertAfter( self.element );
@@ -167,6 +171,7 @@ $.widget( "ui.selectmenu", {
id: self.ids[1]
});

// wrap list
self.listWrap = $( options.wrapperElement )
.addClass( self.widgetBaseClass + '-menu' )
.css( "width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth )
@@ -176,6 +181,7 @@ $.widget( "ui.selectmenu", {
self._initSource();
self._renderMenu( self.list, options.source );

// init menu widget
self.list
.data( 'element.selectelemenu', self.element )
.menu({
@@ -185,7 +191,7 @@ $.widget( "ui.selectmenu", {

if ( item.index != self.element[0].selectedIndex ) flag = true;

self._setSelected( event, item );
self._setOption( "value", item.value );
item.element = self.items[ item.index ];
self._trigger( "select", event, { item: item } );

@@ -331,12 +337,6 @@ $.widget( "ui.selectmenu", {
return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this.element[0].selectedIndex );
},

_setSelected: function( event, item ) {
this.newelement.children( '.ui-button-text' ).text( item.label );
this.element[0].selectedIndex = item.index;
this.options.value = item.value;
},

_toggle: function( event ) {
if ( this.opened ) {
this.close( event );
@@ -347,11 +347,13 @@ $.widget( "ui.selectmenu", {

_setOption: function( key, value ) {
this._super( "_setOption", key, value );

if ( key === "appendTo" ) {
this.listWrap.appendTo( $( value || "body", this.element[0].ownerDocument )[0] );
}
if ( key === "value" && value) {
if ( key === "value" && value !== undefined ) {
this.element[0].value = value;
this.newelement.children( '.ui-button-text' ).text( this.items.eq( this.element[0].selectedIndex ).text() );
}
if ( key === "disabled" ) {
this.newelement.button( "option", "disabled", value );

0 comments on commit 4d56732

Please sign in to comment.
You can’t perform that action at this time.