Custom labels

index.html

@@ -4,6 +4,7 @@
     <title>jQuery selectBox (select replacement plugin)</title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="jquery.selectBox.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
     <link type="text/css" rel="stylesheet" href="jquery.selectBox.css"/>
 
     <style type="text/css">
@@ -18,6 +19,7 @@
             padding: 10px;
             float: right;
         }
+        .f32.f16 .flag{zoom: 0.5; -ms-zoom: 0.5; -moz-transform:scale(0.60); -moz-transform-origin: 0 0; padding-right: 5px }
     </style>
 
     <script type="text/javascript">
@@ -116,6 +118,35 @@
                 });
             });
 
+            $('SELECT#formatting-dropdown').selectBox({
+                // dynamically set the label instead of using the actual label from the option
+                setLabel: function (select, control, label, selected) {
+                    if (selected != null) {
+                        var labelText = (selected.val() || '\u00A0').trim();
+                        var flagClass = selected.attr('class').match(/(^|\s)flag_[a-zA-Z]{2}(\s|$)/)[0].replace(/\s+/, '');
+                        labelText = labelText.replace(/ \(.*\)$/, "");
+
+                        var country = flagClass.split(/_/)[1].toLowerCase();
+                        label.text(labelText + " (" + country.toUpperCase() + ")");
+
+                        var i = $('<i />');
+                        i.addClass('flag').addClass(country);
+                        label.prepend(i);
+                    } else {
+                        label.text("- please choose -");
+                    }
+                },
+                // change how options dropdowns are generated
+                generateOptions: function (self, options, a) {
+                    var li = a.parent();
+                    var flagClass = li.attr('class').match(/(^|\s)flag_[a-zA-Z]{2}(\s|$)/)[0].replace(/\s+/, '');
+                    var i = $('<i />');
+                    i.addClass('flag').addClass(flagClass.split(/_/)[1].toLowerCase());
+                    a.prepend(i);
+                },
+                customOptionsClass: 'f32 f16'
+            });
+
             $('select')
                     .selectBox({
                         mobile: true
@@ -133,6 +164,7 @@
                         $('#console')[0].scrollTop = $('#console')[0].scrollHeight;
                     });
 
+            $('SELECT#width-dropdown').data('selectbox-width', '400px');
         });
 
     </script>
@@ -335,6 +367,46 @@ <h1>$('select').selectBox();</h1>
         </select>
     </p>
 
+    <p>
+        <label for="width-dropdown">Custom dropdown width</label> <br/>
+        <select id="width-dropdown" name="width-dropdown" style="width: 200px">
+            <option value="1" class="test-class-1">Item 1</option>
+            <option value="2" class="test-class-2" selected="selected">Item 2</option>
+            <option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's
+                width
+            </option>
+            <option value="4" class="test-class-4">Item 4</option>
+            <option value="5" disabled="disabled">Item 5 (disabled)</option>
+            <option value="6">Item 6</option>
+            <option value="7">Item 7</option>
+            <option value="8">Item 8</option>
+            <option value="9">Item 9</option>
+            <option value="10">Item 10</option>
+            <option value="11">Item 11</option>
+            <option value="12">Item 12</option>
+            <option value="13">Item 13</option>
+            <option value="14">Item 14</option>
+            <option value="15">Item 15</option>
+            <option value="16">Item 16</option>
+            <option value="17">Item 17</option>
+            <option value="18">Item 18</option>
+            <option value="19">Item 19</option>
+            <option value="20">Item 20</option>
+        </select>
+    </p>
+
+    <p class="f32 f16">
+        <label for="formatting-dropdown">Custom label formatting</label> <br/>
+        <select id="formatting-dropdown" name="formatting-dropdown" style="width: 50px">
+            <option value="+1" class="flag_US" selected="selected">United States</option>
+            <option value="+44" class="flag_GB">United Kingdom</option>
+            <option value="+49" class="flag_DE">Germany</option>
+            <option value="+39" class="flag_IT" disabled="disabled">Italy</option>
+        </select>
+    </p>
+
+
+
     <hr align="left" style="height: 1px; background-color: #DDD; width: 40%; margin-top: 1.5em; border: 0;"/>
 
     <p>

jquery.selectBox.js

@@ -66,8 +66,14 @@
             , tabIndex = parseInt(select.prop('tabindex')) || 0
             , self     = this;
 
+        // Store data for later use and show the control
+        select
+            .addClass('selectBox')
+            .data('selectBox-control', control)
+            .data('selectBox-settings', settings)
+
         control
-            .width(select.outerWidth())
+            .width(settings.width ? settings.width : select.outerWidth())
             .addClass(select.attr('class'))
             .attr('title', select.attr('title') || '')
             .attr('tabindex', tabIndex)
@@ -158,8 +164,6 @@
             var label = $('<span class="selectBox-label" />'),
                 arrow = $('<span class="selectBox-arrow" />');
 
-            // Update label
-            label.attr('class', this.getLabelClass()).text(this.getLabelText());
             options = this.getOptions('dropdown');
             options.appendTo('BODY');
 
@@ -202,22 +206,22 @@
                 })
                 .insertAfter(select);
 
+            // Update label, call this only after the label has been added to control
+            // label.attr('class', this.getLabelClass()).text(this.getLabelText());
+            this.setLabel();
+
             // Set label width
             var labelWidth =
                     control.width()
                   - arrow.outerWidth()
                   - (parseInt(label.css('paddingLeft')) || 0)
                   - (parseInt(label.css('paddingRight')) || 0);
 
-            label.width(labelWidth);
+            label.width(Math.max(labelWidth, 15));
             this.disableSelection(control);
         }
         // Store data for later use and show the control
-        select
-            .addClass('selectBox')
-            .data('selectBox-control', control)
-            .data('selectBox-settings', settings)
-            .hide();
+        select.hide();
     };
 
     /**
@@ -227,6 +231,8 @@
     SelectBox.prototype.getOptions = function (type) {
         var options;
         var select = $(this.selectElement);
+        var settings = select.data('selectBox-settings');
+        var customGenerateOptions = settings.generateOptions;
         var self   = this;
         // Private function to handle recursion in the getOptions function.
         var _getOptions = function (select, options) {
@@ -237,7 +243,7 @@
                     // Check for a value in the option found.
                     if ($(this).length > 0) {
                         // Create an option form the found element.
-                        self.generateOptions($(this), options);
+                        self.generateOptions($(this), options, customGenerateOptions);
                     } else {
                         // No option information found, so add an empty.
                         options.append('<li>\u00A0</li>');
@@ -257,6 +263,7 @@
         switch (type) {
             case 'inline':
                 options = $('<ul class="selectBox-options" />');
+                if(settings.customOptionsClass) { options.addClass(settings.customOptionsClass); }
                 options = _getOptions(select, options);
                 options
                     .find('A')
@@ -287,6 +294,7 @@
                 return options;
             case 'dropdown':
                 options = $('<ul class="selectBox-dropdown-menu selectBox-options" />');
+                if(settings.customOptionsClass) { options.addClass(settings.customOptionsClass); }
                 options = _getOptions(select, options);
 
                 options
@@ -333,7 +341,7 @@
                 if ('' !== classes) {
                     classes = classes.split(' ');
                     for (var i in classes) {
-                        options.addClass(classes[i] + '-selectBox-dropdown-menu');
+                        options.addClass(classes[i]); // why do this? + '-selectBox-dropdown-menu');
                     }
                 }
                 this.disableSelection(options);
@@ -367,15 +375,21 @@
      */
     SelectBox.prototype.setLabel = function () {
         var select = $(this.selectElement);
+        var settings = select.data('selectBox-settings');
         var control = select.data('selectBox-control');
         if (!control) {
             return;
         }
+        var selected = select.find('OPTION:selected');
+        var label = control.find('.selectBox-label');
 
-        control
-            .find('.selectBox-label')
+        if(settings.setLabel) {
+            settings.setLabel.call(this, select, control, label, selected);
+        } else {
+            label
             .attr('class', this.getLabelClass())
             .text(this.getLabelText());
+        }
     };
 
     /**
@@ -464,8 +478,8 @@
             , scrollPos = $(window).scrollTop()
             , heightToTop = pos.top - scrollPos
             , heightToBottom = $(window).height() - ( heightToTop + controlHeight )
-            , posTop = heightToTop > heightToBottom
-            , top = posTop 
+            , posTop = (heightToTop > heightToBottom) && (settings.keepInViewport == null ? true : settings.keepInViewport)
+            , top = posTop
                   ? pos.top - optionsHeight + borderTopWidth + topPositionCorrelation
                   : pos.top + controlHeight - borderBottomWidth - bottomPositionCorrelation;        
 
@@ -491,7 +505,7 @@
 
         // Menu position
         options
-            .width(control.innerWidth())
+            .width(select.data('selectbox-width') ? select.data('selectbox-width') : control.innerWidth())
             .css({
                 top: top,
                 left: control.offset().left
@@ -653,7 +667,8 @@
         }
 
         if (control.hasClass('selectBox-dropdown')) {
-            control.find('.selectBox-label').text(li.text());
+            // control.find('.selectBox-label').text(li.text());
+            this.setLabel();
         }
 
         // Update original control's value
@@ -1039,18 +1054,28 @@
      * @param {jQuery} self
      * @param {jQuery} options
      */
-    SelectBox.prototype.generateOptions = function (self, options) {
+    SelectBox.prototype.generateOptions = function (self, options, customGenerateOptions) {
         var li = $('<li />'), a = $('<a />');
         li.addClass(self.attr('class'));
         li.data(self.data());
-        a.attr('rel', self.val()).text(self.text());
         li.append(a);
+        a.attr('rel', self.val())
+        a.attr('data-tile', self.attr('title'));
+
+        var title = self.attr('title');
+        a.text(title ? title : self.text());
+
         if (self.attr('disabled')) {
             li.addClass('selectBox-disabled');
         }
         if (self.attr('selected')) {
             li.addClass('selectBox-selected');
         }
+
+        if(customGenerateOptions) {
+            customGenerateOptions.call(this, self, options, a);
+        }
+
         options.append(li);
     };
 
@@ -1092,6 +1117,7 @@
                     $(this).each(function () {
                         if (selectBox = $(this).data('selectBox')) {
                             selectBox.setValue(options);
+                            this.setLabel();
                         }
                     });
                     break;