dding in the ability to disable an option by passing in the particular index of the...

e. This change is backwards compatible, so if you don't want to use this feature it will not affect any of your existing code or coding practices.

Enhancements include:
* Ability to disable an option
* Key events correctly skip disabled option
* Styling for disabled options
* Change and select events ignore disabled option
* index function correctly ignores disabled option
* disable and enable function call _setOption, keeping code modular

diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css
index 15c0e3237d5988f88450b1dd60fb0fed5fbd3f60..781527111cf14089eb5566801056249b0b75ef6a 100644 (file)
--- a/themes/base/jquery.ui.selectmenu.css
+++ b/themes/base/jquery.ui.selectmenu.css
@@ -14,6 +14,9 @@
 .ui-selectmenu-status { line-height: 1.4em; }
 .ui-selectmenu-open li.ui-selectmenu-item-focus a {  }
 .ui-selectmenu-open li.ui-selectmenu-item-selected { }
+/* Disabled option styling */
+.ui-selectmenu-menu li.disabled { border: 1px solid transparent; }
+.ui-selectmenu-menu li.disabled a { cursor: default; color: #A9ACAF; background: #EBEBEC; }
 .ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
 .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
 .ui-selectmenu-menu li .ui-selectmenu-item-content {  }
@@ -21,4 +24,4 @@
 /*for optgroups*/
 .ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
 .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding:.6em .5em 0; font-weight: bold; }
-.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
\ No newline at end of file
+.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }

diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js
index d3633cd904262e4e5f08343c60905e21da5c4b5d..4301688e2326c03f8ac7c874edf19f4eba5b1a78 100644 (file)
--- a/ui/jquery.ui.selectmenu.js
+++ b/ui/jquery.ui.selectmenu.js
@@ -427,10 +427,12 @@ $.widget("ui.selectmenu", {
                }
        },
        change: function(event) {
-               this.element.trigger('change');
+               if (this._disabled(event.currentTarget)) { return false; }
+                this.element.trigger('change');
                this._trigger("change", event, this._uiHash());
        },
        select: function(event) {
+                if (this._disabled(event.currentTarget)) { return false; }
                this._trigger("select", event, this._uiHash());
        },
        _closeOthers: function(event){
@@ -471,10 +473,19 @@ $.widget("ui.selectmenu", {
                if(newIndex > this._optionLis.size()-1){
                        newIndex =  this._optionLis.size()-1;
                }
-               var activeID = this.widgetBaseClass + '-item-' + Math.round(Math.random() * 1000);
+                //Occurs when a full loop has been made
+                if (newIndex === recIndex) { return false; }
+
+                var activeID = this.widgetBaseClass + '-item-' + Math.round(Math.random() * 1000);
                
                this._focusedOptionLi().find('a:eq(0)').attr('id','');
-               this._optionLis.eq(newIndex).find('a:eq(0)').attr('id',activeID).focus();
+                if (this._optionLis.eq(newIndex).hasClass('disabled')) {
+                        //if option at newIndex is disabled, call _moveFocus, incrementing amt by one
+                        (amt > 0) ? amt++ : amt--;
+                        this._moveFocus(amt, newIndex);
+                } else {
+                        this._optionLis.eq(newIndex).find('a:eq(0)').attr('id',activeID).focus();
+                }
                this.list.attr('aria-activedescendant', activeID);
        },
        _scrollPage: function(direction){
@@ -495,8 +506,35 @@ $.widget("ui.selectmenu", {
                                        .attr("aria-disabled", value);
                }
        },
+        disable: function(optionIndex){
+                //if options is not provided, call the parents disable function
+                (!optionIndex)? this._setOption('disabled', true) : this._disableOption(optionIndex);
+        },
+
+        enable: function(optionIndex) {
+                //if options is not provided, call the parents enable function
+                (!optionIndex)? this._setOption('disabled', false) : this._enableOption(optionIndex);
+        },
+
+        _disableOption: function(index) {
+                var optionElem = this._optionLis.eq(index);
+                if (optionElem) {
+                       optionElem.addClass('disabled');
+                }
+        },
+
+        _enableOption: function(index) {
+                var optionElem = this._optionLis.eq(index);
+                if (optionElem) {
+                       optionElem.removeClass('disabled');
+                }
+        },
+
+        _disabled: function(elem) {
+                return $(elem).hasClass('disabled');
+        },
        index: function(newValue) {
-               if (arguments.length) {
+               if (arguments.length && !this._disabled($(this._optionLis[newValue]))) {
                        this.element[0].selectedIndex = newValue;
                        this._refreshValue();
                } else {