Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Selectmenu: implemented disable for option and optgroup, code cleanup

  • Loading branch information...
commit 35289489c4e6272fb6396e89f08a948df506099e 1 parent 1d9fac5
Felix Nagel fnagel authored
10 demos/selectmenu/default.html
@@ -41,7 +41,7 @@
41 41 <select name="speedA" id="speedA">
42 42 <option value="Slower">Slower</option>
43 43 <option value="Slow">Slow</option>
44   - <option value="Medium" selected="selected">Medium</option>
  44 + <option disabled="disabled" value="Medium" selected="selected">Medium</option>
45 45 <option value="Fast">Fast</option>
46 46 <option value="Faster">Faster</option>
47 47 </select>
@@ -60,8 +60,8 @@
60 60 <option value="8">8</option>
61 61 <option value="9">9</option>
62 62 <option value="10">10</option>
63   - <option value="11">11</option>
64   - <option value="12">12</option>
  63 + <option disabled="disabled" value="11">11</option>
  64 + <option disabled="disabled" value="12">12</option>
65 65 <option value="13">13</option>
66 66 <option value="14">14</option>
67 67 <option value="15">15</option>
@@ -75,12 +75,12 @@
75 75 <br />
76 76 <label for="filesC">Select a file:</label>
77 77 <select name="filesC" id="filesC">
78   - <optgroup label="scripts">
  78 + <optgroup disabled="disabled" label="scripts">
79 79 <option value="jquery">jQuery.js</option>
80 80 <option value="jqueryui">ui.jQuery.js</option>
81 81 </optgroup>
82 82 <optgroup label="Label with space">
83   - <option value="somefile">Some unknown file</option>
  83 + <option disabled="disabled" value="somefile">Some unknown file</option>
84 84 <option value="someotherfile">Some other file</option>
85 85 </optgroup>
86 86 </select>
1  themes/base/jquery.ui.selectmenu.css
@@ -12,6 +12,7 @@
12 12 .ui-selectmenu-menu .ui-menu { padding: 0; }
13 13 .ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; }
14 14 .ui-selectmenu-menu .ui-menu .ui-menu-item a.ui-state-focus { margin: -1px 0 -1px -1px; }
  15 +.ui-selectmenu-menu .ui-menu li.ui-state-disabled { margin: 0; padding: 0; }
15 16 .ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; }
16 17 .ui-selectmenu-open { display: block; }
17 18
60 ui/jquery.ui.selectmenu.js
@@ -74,7 +74,7 @@ $.widget( "ui.selectmenu", {
74 74 })
75 75 .addClass( self.widgetBaseClass + '-button' )
76 76 .button({
77   - label: self.items.eq( self.element[ 0 ].selectedIndex ).text(),
  77 + label: self.items.eq( this.element[0].selectedIndex ).text(),
78 78 icons: {
79 79 primary: ( options.dropdown ? 'ui-icon-triangle-1-s' : 'ui-icon-triangle-2-n-s' )
80 80 }
@@ -128,6 +128,7 @@ $.widget( "ui.selectmenu", {
128 128 return ret;
129 129 });
130 130
  131 + // built menu
131 132 self.refresh();
132 133
133 134 // document click closes menu
@@ -143,7 +144,8 @@ $.widget( "ui.selectmenu", {
143 144
144 145 open: function( event ) {
145 146 var self = this,
146   - options = this.options;
  147 + options = this.options,
  148 + currentItem = self._getSelectedItem();
147 149
148 150 // close all other selectmenus
149 151 $( '.' + self.widgetBaseClass + '-open' ).not( self.newelement ).each( function() {
@@ -155,9 +157,7 @@ $.widget( "ui.selectmenu", {
155 157 .addClass( 'ui-corner-top' )
156 158 .removeClass( 'ui-corner-all' );
157 159 }
158   -
159   - var currentItem = self._getCurrenItem();
160   -
  160 +
161 161 self.listWrap.addClass( self.widgetBaseClass + '-open' );
162 162 self.list.focus().menu( "focus", null, currentItem );
163 163
@@ -197,7 +197,7 @@ $.widget( "ui.selectmenu", {
197 197
198 198 self.listWrap = $( options.wrapperElement )
199 199 .addClass( self.widgetBaseClass + '-menu' )
200   - .css("width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth)
  200 + .css( "width", ( options.dropdown ) ? self.element.width() : self.element.width() - options.iconWidth )
201 201 .append( self.list )
202 202 .appendTo( options.appendTo );
203 203
@@ -208,19 +208,12 @@ $.widget( "ui.selectmenu", {
208 208 .data( 'element.selectelemenu', self.element )
209 209 .menu({
210 210 select: function( event, ui ) {
211   - var item = ui.item.data( "item.selectmenu" );
212   - console.log(item);
213   -
214   - self.newelement.children( 'span.ui-button-text' ).text( item.label );
215   - self._index( item.index );
  211 + var item = ui.item.data( "item.selectmenu" );
  212 + self._setSelected( item );
216 213 self.close( event, true);
217 214 },
218 215 focus: function( event, ui ) {
219   - var item = ui.item.data( "item.selectmenu" );
220   - if ( !self.opened ) {
221   - self.newelement.children( 'span.ui-button-text' ).text( item.label );
222   - self._index( item.index );
223   - }
  216 + if ( !self.opened ) self._setSelected( ui.item.data( "item.selectmenu" );
224 217 }
225 218 })
226 219 .bind( 'mouseenter.selectelemenu', function() {
@@ -259,7 +252,9 @@ $.widget( "ui.selectmenu", {
259 252
260 253 $.each( items, function( index, item ) {
261 254 if ( item.optgroup != currentOptgroup ) {
262   - ul.append( "<li class='ui-selectmenu-optgroup'>" + item.optgroup + "</li>" );
  255 + var optgroup = $( '<li class="ui-selectmenu-optgroup">' + item.optgroup + '</li>' );
  256 + if ( $( self.items[ item.index ] ).parent( "optgroup" ).attr( "disabled" ) ) optgroup.addClass( 'ui-state-disabled' );
  257 + ul.append( optgroup );
263 258 currentOptgroup = item.optgroup;
264 259 }
265 260 self._renderItem( ul, item );
@@ -268,6 +263,7 @@ $.widget( "ui.selectmenu", {
268 263
269 264 _renderItem: function( ul, item) {
270 265 return $( "<li />" )
  266 + .addClass( ( item.disabled ) ? 'ui-state-disabled' : '' )
271 267 .data( "item.selectmenu", item )
272 268 .append( $( "<a />", {
273 269 text: item.label,
@@ -280,17 +276,23 @@ $.widget( "ui.selectmenu", {
280 276 },
281 277
282 278 _previous: function() {
283   - this.list.menu( "focus", null, this._getCurrenItem() );
  279 + this.list.menu( "focus", null, this._getSelectedItem() );
284 280 this.list.menu("previous");
285 281 },
286 282
287 283 _next: function() {
288   - this.list.menu( "focus", null, this._getCurrenItem() );
  284 + this.list.menu( "focus", null, this._getSelectedItem() );
289 285 this.list.menu("next");
290 286 },
291 287
292   - _getCurrenItem: function() {
293   - return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this._index() );
  288 + _getSelectedItem: function() {
  289 + return this.list.find( "li" ).not( '.ui-selectmenu-optgroup' ).eq( this.element[0].selectedIndex );
  290 + },
  291 +
  292 + _setSelected: function( item ) {
  293 + this.newelement.children( '.ui-button-text' ).text( item.label );
  294 + this.element[0].selectedIndex = item.index;
  295 + this.options.value = item.value;
294 296 },
295 297
296 298 _toggle: function( event ) {
@@ -315,28 +317,22 @@ $.widget( "ui.selectmenu", {
315 317 if ( !$.isArray( this.options.source ) ) {
316 318 var data = [];
317 319 $.each( this.items, function( index, item ) {
318   - var option = $( item );
  320 + var option = $( item ),
  321 + optgroup = option.parent( "optgroup" );
319 322 data.push({
320 323 index: index,
321 324 value: option.attr( 'value' ),
322 325 label: option.text(),
323   - optgroup: option.parent("optgroup").attr("label") || false
  326 + optgroup: optgroup.attr("label") || false,
  327 + disabled: optgroup.attr( "disabled" ) || option.attr( "disabled" )
324 328 });
325 329 });
  330 + console.log( data );
326 331 this.options.source = data;
327 332 }
328 333 },
329 334
330 335 _destroy: function() {
331   - },
332   -
333   - _index: function( newIndex ) {
334   - if ( arguments.length ) {
335   - this.element[0].selectedIndex = newIndex;
336   - self.options.value = this._getCurrenItem().attr( "value" );
337   - } else {
338   - return this.element[0].selectedIndex;
339   - }
340 336 }
341 337 });
342 338

0 comments on commit 3528948

Please sign in to comment.
Something went wrong with that request. Please try again.