Adds description to LI

index.html

@@ -3,8 +3,8 @@
   <meta charset="utf-8">
   <link type="text/css" rel="stylesheet" href="./src/stylesheets/jquery.selectBoxIt.css" />
   <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
-  <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/ui-darkness/jquery-ui.css" />
-  <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
   <!--<link type="text/css" rel="stylesheet" href="css/jqm.css" /> -->
   <style>
   .testing {
@@ -360,9 +360,32 @@
     <option value="3">DM-Dealer Action Required</option>
     <option value="8">DM-Pending</option>
   </select>
+
+
+  <br /><br /><br /><br />
+
+  <select name="test" id="select-with-description">
+ 	 <option value="SelectBoxIt themes:" data-iconurl="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/256/themes-icon.png">
+    SelectBoxIt themes:
+    </option>
+    <option value="Contact Enhanced" data-iconurl="https://idealextensions.com/images/extensions/com_contactenhanced/ce-logo-150px.png"
+    	data-content='<p><a href="https://idealextensions.com/joomla-extensions/component-contact-enhanced.html" target="_blank">Contact Enhanced</a> is a contact component manager created to replace Joomla! core contacts component and add lots of advantages and new features (see <strong>Features</strong> tab below) and it offers many plugins and modules for several different purposes,</p>'
+    	data-price="U$49"
+    	data-selectedtext="Contact Enhanced - U$50"
+    	rel="popover" title="Product Description"
+   	>
+    Contact Enhanced
+    </option>
+    <option value="0" data-icon="icon-search">0</option>
+    <option value="a jQuery Plugin" data-icon="icon-ok">a jQuery Plugin</option>
+    <option value="a Select Box Replacement" data-icon="icon-ok">a Select Box Replacement</option>
+    <option value="a Stateful UI Widget" data-icon="icon-ok">a Stateful UI Widget</option>
+  </select>
 </form>
-
-<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+<script src="./src/javascripts/jquery.selectBoxIt.js"></script>
 
 <script>
 jQuery(function($) {
@@ -372,7 +395,9 @@
 
   //var select = $("select").selectBoxIt({ populate: '<option value="test">test</option>' }).data('selectBox-selectBoxIt').remove(0);
 
-  $('select').selectBoxIt({ });
+  jQuery('select').selectBoxIt({descriptionTrim:20 });
+  jQuery(".selectboxit-container [rel='popover']").popover({ trigger: "hover", container: "body", html : true, 
+        });
 
   // $('form').removeClass('hidden');
 
@@ -419,4 +444,4 @@
 });
 </script>
  </body>
-</html>
+</html>

src/javascripts/jquery.selectBoxIt.js

@@ -25,7 +25,7 @@
     $.widget("selectBox.selectBoxIt", {
 
         // Plugin version
-        VERSION: "3.8.1",
+        VERSION: "3.8.2",
 
         // These options will be used as defaults
         options: {
@@ -123,7 +123,10 @@
             "dynamicPositioning": true,
 
             // **hideCurrent**: Determines whether or not the currently selected drop down option is hidden in the list
-            "hideCurrent": false
+            "hideCurrent": false,
+
+            // **descriptionTrim**: Determines whether or not to trim the description and the number of characters. Set to 0 to ignore setting
+            "descriptionTrim":	50,
 
         },
 
@@ -487,7 +490,13 @@
                     "tabindex": -1
 
                 }),
-
+
+                descriptionText,
+
+                extraLIclassWhenDescription,
+
+                price,
+
                 currentDataSelectedText,
 
                 currentDataText,
@@ -530,12 +539,18 @@
                 iconUrlClass = iconUrl ? "selectboxit-option-icon-url": "";
 
                 iconUrlStyle = iconUrl ? 'style="background-image:url(\'' + iconUrl + '\');"': "";
+
+                descriptionText = currentOption.attr("data-content") || "";
+
+                price = currentOption.attr("data-price") || "";
 
                 currentDataSelectedText = currentOption.attr("data-selectedtext");
 
                 currentDataText = currentOption.attr("data-text");
 
                 currentText = currentDataText ? currentDataText: currentOption.text();
+
+                extraLIclassWhenDescription = descriptionText ? ' selectboxit-option-with-description' : '';
 
                 parent = currentOption.parent();
 
@@ -556,7 +571,14 @@
                 currentOption.attr("value", this.value);
 
                 // Uses string concatenation for speed (applies HTML attribute encoding)
-                currentItem += optgroupElement + '<li data-id="' + index + '" data-val="' + this.value + '" data-disabled="' + dataDisabled + '" class="' + optgroupClass + " selectboxit-option " + ($(this).attr("class") || "") + '"><a class="selectboxit-option-anchor"><span class="selectboxit-option-icon-container"><i class="selectboxit-option-icon ' + iconClass + ' ' + (iconUrlClass || self.theme["container"]) + '"' + iconUrlStyle + '></i></span>' + (self.options["html"] ? currentText: self.htmlEscape(currentText)) + '</a></li>';
+                currentItem += optgroupElement + '<li data-id="' + index + '" data-val="' + this.value + '" data-disabled="' + dataDisabled + '" class="' + optgroupClass + extraLIclassWhenDescription + " selectboxit-option " + ($(this).attr("class") || "") 
+                				+ '"><a class="selectboxit-option-anchor"><span class="selectboxit-option-icon-container"><i class="selectboxit-option-icon ' + iconClass + ' ' + (iconUrlClass || self.theme["container"]) + '"' + iconUrlStyle 
+                				+ '></i></span>' 
+                				+ (price ? '<span class="selectboxit-option-price">'+price+'</span>' : '')
+                				+ (self.options["html"] ? currentText: self.htmlEscape(currentText))+ ' '
+                				+ (descriptionText ? '<small class="text-muted">'+ (self.options["descriptionTrim"] ? $('<div>'+descriptionText+'</div>').text().slice(0,self.options["descriptionTrim"]) : descriptionText) +'</small>' : '')
+
+                				+ '</a></li>';
 
                 currentDataSearch = currentOption.attr("data-search");
 
@@ -3256,4 +3278,4 @@ selectBoxIt._destroySelectBoxIt = function() {
         return self;
 
     };
-})); // End of all modules
+})); // End of all modules

src/stylesheets/jquery.selectBoxIt.css

@@ -275,4 +275,24 @@
 
 .selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {
   color: #999999;
-}
+}
+
+/**
+* @added by machadoug
+*/
+
+span.selectboxit-option-price {
+  float: right;
+  font-size: 150%;
+}
+.selectboxit-container small.text-muted {
+  display: block;
+}
+.selectboxit-container .selectboxit-option-with-description span, .selectboxit-container .selectboxit-options a {
+  height: 60px;
+}
+
+.selectboxit-option-with-description .selectboxit-option-icon-url {
+  width: 32px;
+  background-size: 32px 32px;
+}

src/stylesheets/jquery.selectBoxIt.sass

@@ -237,3 +237,12 @@
 
 .selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor 
   color: #999999
+
+// Added by machadoug
+span.selectboxit-option-price
+  float: right
+  font-size: 150%
+.selectboxit-container small.text-muted
+  display: block
+.selectboxit-container .selectboxit-option-with-description span, .selectboxit-container .selectboxit-options a
+  height: 60px