References #68 - Support different theme disabled classes and added e…

…nableOption() method

demos/default.html

@@ -16,7 +16,7 @@
 <select id="test">
   <option value="Select a Month">Select a Month</option>
   <option value="January" disabled>January</option>
-  <option value="February">February</option>
+  <option value="February" disabled>February</option>
   <option value="March">March</option>
   <option value="April">April</option>
   <option value="May">May</option>

src/javascripts/jquery.selectBoxIt.core.js

@@ -123,6 +123,31 @@
             // Whether or not the dropdown list opens up or down (depending on how much room is on the page)
             self.flipped = false;
 
+            self.disabledClasses = (function() {
+
+                if(self.options.theme === "bootstrap") {
+
+                    return "disabled";
+
+                }
+                else if(self.options.theme === "jqueryui") {
+
+                    return "ui-state-disabled";
+
+                }
+                else if(self.options.theme === "jquerymobile") {
+
+                    return "ui-disabled";
+
+                }
+                else {
+
+                    return "selectboxit-disabled";
+
+                }
+
+            }());
+
             // Creates the div elements that will become the dropdown
             // Creates the ul element that will become the dropdown options list
             // Hides the original select box and adds the new plugin DOM elements to the page
@@ -411,10 +436,10 @@
             self.listItems.last().addClass("selectboxit-option-last");
 
             // Set the disabled CSS class for select box options
-            self.list.find("li[data-disabled='true']").not(".optgroupHeader").addClass("ui-state-disabled");
+            self.list.find("li[data-disabled='true']").not(".optgroupHeader").addClass(self.disabledClasses);
 
             // If the first select box option is disabled, and the user has chosen to not show the first select box option
-            if (self.currentFocus === 0 && !self.options["showFirstOption"] && self.listItems.eq(0).hasClass("ui-state-disabled")) {
+            if (self.currentFocus === 0 && !self.options["showFirstOption"] && self.listItems.eq(0).hasClass(self.disabledClasses)) {
 
                 //Sets the default value of the dropdown list to the first option that is not disabled
                 self.currentFocus = +self.listItems.not(".ui-state-disabled").first().attr("id");
@@ -1179,14 +1204,14 @@
                 "disable.selectBoxIt": function() {
 
                     // Adds the `disabled` CSS class to the new dropdown list to visually show that it is disabled
-                    self.div.addClass("ui-state-disabled");
+                    self.div.addClass(self.disabledClasses);
                 },
 
                 // `enable` event with the `selectBoxIt` namespace
                 "enable.selectBoxIt": function() {
 
                     // Removes the `disabled` CSS class from the new dropdown list to visually show that it is enabled
-                    self.div.removeClass("ui-state-disabled");
+                    self.div.removeClass(self.disabledClasses);
                 }
 
             });
@@ -1285,15 +1310,21 @@
 
                 "mouseenter.selectBoxIt": function() {
 
-                    // Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
-                    self.listItems.removeClass(focusClass);
+                    // If the currently moused over drop down option is not disabled
+                    if($(this).attr("data-disabled") === "false") {
+
+                        // Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
+                        self.listItems.not($(this)).removeClass(focusClass);
 
-                    $(this).addClass(hoverClass);
+                        $(this).addClass(hoverClass);
+
+                    }
 
                 },
 
                 "mouseleave.selectBoxIt": function() {
 
+                    // Removes the hover class from the previous drop down option
                     $(this).removeClass(hoverClass);
 
                 }

src/javascripts/jquery.selectBoxIt.disable.js

@@ -67,7 +67,7 @@ $(function() {
             self.listItems.eq(index).attr("data-disabled", "true").
 
             // Applies disabled styling for the drop down option
-            addClass("ui-state-disabled");
+            addClass(self.disabledClasses);
 
             // If the currently selected drop down option is the item being disabled
             if(self.currentFocus === index) {

src/javascripts/jquery.selectBoxIt.enable.js

@@ -20,8 +20,8 @@ $(function() {
             self.div.attr("tabindex", 0)
 
             // Disable styling for disabled state
-            .removeClass("selectboxit-disabled");
-
+            .removeClass(self.disabledClasses);
+                
             $.Widget.prototype.enable.call(self);
 
             // Provide callback function support
@@ -34,4 +34,42 @@ $(function() {
 
         };
 
+    // Enable Option
+    // -------------
+    //      Disables a single drop down option
+
+    $.selectBox.selectBoxIt.prototype.enableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, currentIndex = 0, hasNextEnabled, hasPreviousEnabled;
+
+        // If an index is passed to target an individual drop down option
+        if(typeof index === "number") {
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            currentIndex = self.options["showFirstOption"] ? index: ((index - 1) >= 0 ? index: 0 );
+
+            // Triggers a `disable-option` custom event on the original select box
+            self.selectBox.trigger("enable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.removeAttr("disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "false").
+
+            // Applies disabled styling for the drop down option
+            removeClass(self.disabledClasses);
+
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
 });

src/javascripts/jquery.selectBoxIt.js

@@ -123,6 +123,31 @@
             // Whether or not the dropdown list opens up or down (depending on how much room is on the page)
             self.flipped = false;
 
+            self.disabledClasses = (function() {
+
+                if(self.options.theme === "bootstrap") {
+
+                    return "disabled";
+
+                }
+                else if(self.options.theme === "jqueryui") {
+
+                    return "ui-state-disabled";
+
+                }
+                else if(self.options.theme === "jquerymobile") {
+
+                    return "ui-disabled";
+
+                }
+                else {
+
+                    return "selectboxit-disabled";
+
+                }
+
+            }());
+
             // Creates the div elements that will become the dropdown
             // Creates the ul element that will become the dropdown options list
             // Hides the original select box and adds the new plugin DOM elements to the page
@@ -411,10 +436,10 @@
             self.listItems.last().addClass("selectboxit-option-last");
 
             // Set the disabled CSS class for select box options
-            self.list.find("li[data-disabled='true']").not(".optgroupHeader").addClass("ui-state-disabled");
+            self.list.find("li[data-disabled='true']").not(".optgroupHeader").addClass(self.disabledClasses);
 
             // If the first select box option is disabled, and the user has chosen to not show the first select box option
-            if (self.currentFocus === 0 && !self.options["showFirstOption"] && self.listItems.eq(0).hasClass("ui-state-disabled")) {
+            if (self.currentFocus === 0 && !self.options["showFirstOption"] && self.listItems.eq(0).hasClass(self.disabledClasses)) {
 
                 //Sets the default value of the dropdown list to the first option that is not disabled
                 self.currentFocus = +self.listItems.not(".ui-state-disabled").first().attr("id");
@@ -1179,14 +1204,14 @@
                 "disable.selectBoxIt": function() {
 
                     // Adds the `disabled` CSS class to the new dropdown list to visually show that it is disabled
-                    self.div.addClass("ui-state-disabled");
+                    self.div.addClass(self.disabledClasses);
                 },
 
                 // `enable` event with the `selectBoxIt` namespace
                 "enable.selectBoxIt": function() {
 
                     // Removes the `disabled` CSS class from the new dropdown list to visually show that it is enabled
-                    self.div.removeClass("ui-state-disabled");
+                    self.div.removeClass(self.disabledClasses);
                 }
 
             });
@@ -1285,15 +1310,21 @@
 
                 "mouseenter.selectBoxIt": function() {
 
-                    // Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
-                    self.listItems.removeClass(focusClass);
+                    // If the currently moused over drop down option is not disabled
+                    if($(this).attr("data-disabled") === "false") {
+
+                        // Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
+                        self.listItems.not($(this)).removeClass(focusClass);
 
-                    $(this).addClass(hoverClass);
+                        $(this).addClass(hoverClass);
+
+                    }
 
                 },
 
                 "mouseleave.selectBoxIt": function() {
 
+                    // Removes the hover class from the previous drop down option
                     $(this).removeClass(hoverClass);
 
                 }
@@ -1735,7 +1766,7 @@ $(function() {
             self.listItems.eq(index).attr("data-disabled", "true").
 
             // Applies disabled styling for the drop down option
-            addClass("ui-state-disabled");
+            addClass(self.disabledClasses);
 
             // If the currently selected drop down option is the item being disabled
             if(self.currentFocus === index) {
@@ -1914,8 +1945,8 @@ $(function() {
             self.div.attr("tabindex", 0)
 
             // Disable styling for disabled state
-            .removeClass("selectboxit-disabled");
-
+            .removeClass(self.disabledClasses);
+                
             $.Widget.prototype.enable.call(self);
 
             // Provide callback function support
@@ -1928,6 +1959,44 @@ $(function() {
 
         };
 
+    // Enable Option
+    // -------------
+    //      Disables a single drop down option
+
+    $.selectBox.selectBoxIt.prototype.enableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, currentIndex = 0, hasNextEnabled, hasPreviousEnabled;
+
+        // If an index is passed to target an individual drop down option
+        if(typeof index === "number") {
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            currentIndex = self.options["showFirstOption"] ? index: ((index - 1) >= 0 ? index: 0 );
+
+            // Triggers a `disable-option` custom event on the original select box
+            self.selectBox.trigger("enable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.removeAttr("disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "false").
+
+            // Applies disabled styling for the drop down option
+            removeClass(self.disabledClasses);
+
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
 });
 $(function() {