ddslick/dist/jquery.ddslick.min.js

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){function d(e,d){var i=e.find(".dd-option-value[value= '"+d+"']").parents("li").prevAll().length;t(e,i)}function t(d,t,i){var o=d.data("ddslick"),s=d.find(".dd-selected"),l=d.find(".dd-options"),r=s.siblings(".dd-selected-value"),c=d.find(".dd-option").eq(t),p=o.settings,f=o.settings.data[t];if(d.find(".dd-option").removeClass("dd-option-selected"),c.addClass("dd-option-selected"),l.attr("aria-activedescendant",c.attr("id")),o.selectedIndex=t,o.selectedItem=c,o.selectedData=f,p.showSelectedHTML){var u=e("<div>");f.imageSrc&&u.append(e("<img>").addClass("dd-selected-image"+("right"===p.imagePosition?" dd-image-right":"")).attr("src",f.imageSrc)),f.text&&u.append(e("<label>").addClass("dd-selected-text").text(f.text)),f.description&&u.append(e("<small>").addClass("dd-selected-description dd-desc"+(p.truncateDescription?" dd-selected-description-truncated":"")).text(f.description)),s.html(u.html())}else s.html(f.text);r.val(f.value),o.original.val(f.value),d.data("ddslick",o),n(d),d.find(".dd-selected").focus(),a(d),i&&"function"==typeof p.onSelected&&p.onSelected.call(this,o)}function i(d){var t=d.find(".dd-select"),i=d.find(".dd-selected"),n=t.siblings(".dd-options"),a=t.find(".dd-pointer"),s=n.is(":visible"),r=l[d.attr("data-settings-id")];e(".dd-click-off-close").not(n).slideUp(r.animationTime),e(".dd-pointer").removeClass("dd-pointer-up"),t.removeClass("dd-open"),i.attr("aria-expanded","false"),n.attr("aria-hidden","true"),s?(n.slideUp(r.animationTime),a.removeClass("dd-pointer-up"),t.removeClass("dd-open"),i.attr("aria-expanded","false"),n.attr("aria-hidden","true")):(t.addClass("dd-open"),n.slideDown(r.animationTime),a.addClass("dd-pointer-up"),i.attr("aria-expanded","true"),n.attr("aria-hidden","false").focus()),o(d)}function n(e){var d=l[e.attr("data-settings-id")];e.find(".dd-select").removeClass("dd-open"),e.find(".dd-selected").attr("aria-expanded","false"),e.find(".dd-options").slideUp(d.animationTime).attr("aria-hidden","true"),e.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}function a(e){var d=e.find(".dd-select").css("height"),t=e.find(".dd-selected-description"),i=e.find(".dd-selected-image");t.length<=0&&i.length>0&&e.find(".dd-selected-text").css("lineHeight",d)}function o(d){d.find(".dd-option").each(function(){var t=e(this),i=t.css("height"),n=t.find(".dd-option-description"),a=d.find(".dd-option-image");n.length<=0&&a.length>0&&t.find(".dd-option-text").css("lineHeight",i)})}e.fn.ddslick=function(d){return s[d]?s[d].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof d&&d?void e.error("Method "+d+" does not exists."):s.init.apply(this,arguments)};var s={},l={},r={data:[],keepJSONItemsOnTop:!1,animationTime:50,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:!0,imagePosition:"left",showSelectedHTML:!0,clickOffToClose:!0,embedCSS:!0,onSelected:function(){}},c=!1,p="<div class='dd-select'><input class='dd-selected-value' type='hidden' /><button type='button' class='dd-selected'></button><span class='dd-pointer dd-pointer-down'></span></div>",f="<ul class='dd-options'></ul>",u="<style id='css-ddslick' type='text/css'>.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }.dd-selected{ position:relative; overflow:hidden; display:block; padding:10px; font-weight:bold; width:100%; text-align:left;}.dd-selected:focus { z-index:2001; }.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}.dd-selected:focus + .dd-pointer{ z-index:2002; }.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}.dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:visible;}.dd-options:focus{ outline:0; }.dd-option{ padding:10px; display:block; width:100%; text-align:left; border-bottom:solid 1px #ddd; overflow:visible; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; box-sizing:border-box;}.dd-options > .dd-option:last-child { border-bottom:none;}.dd-option:hover, .dd-option:active, .dd-option:focus{ background:#f3f3f3; color:#000; z-index:2001;}.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }.dd-option-selected { background:#f6f6f6; }.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}.dd-image-right { float:right; margin-right:15px; margin-left:5px;}.dd-container{ position:relative;}​ .dd-selected-text { font-weight:bold}​</style>";s.init=function(d){var a=e.extend({},r,d);return e("#css-ddslick").length<=0&&a.embedCSS&&e(u).appendTo("head"),this.each(function(){var a=e.extend({},r,d),o=e(this),s=o.data("ddslick");if(!s){var u=[];o.find("option").each(function(){var d=e(this),t=d.data();u.push({text:e.trim(d.text()),value:d.val(),selected:d.is(":selected"),description:t.description,imageSrc:t.imagesrc})}),a.keepJSONItemsOnTop?e.merge(a.data,u):a.data=e.merge(u,a.data);var h=o,g=e("<div>").attr("id",o.attr("id"));o.replaceWith(g),o=g;var m="ID_"+(new Date).getTime();e(o).attr("data-settings-id",m),l[m]={},e.extend(l[m],a),o.addClass("dd-container").append(p).append(f),o.find("input.dd-selected-value").attr("id",e(h).attr("id")).attr("name",e(h).attr("name"));var v=o.find(".dd-options");u=o.find(".dd-select");var x=o.find(".dd-selected");x.attr("aria-haspopup","listbox"),x.attr("aria-expanded","false"),x.attr("aria-controls","dd-options-"+m),v.attr("id","dd-options-"+m),v.attr("role","listbox"),v.attr("tabindex","-1"),v.attr("aria-label","select options"),v.attr("aria-hidden","true"),v.css({width:a.width}),u.css({width:a.width,background:a.background}),o.css({width:a.width}),null!==a.height&&v.css({height:a.height,overflow:"auto"}),e.each(a.data,function(d,t){t.selected&&(a.defaultSelectedIndex=d);var i=e("<li role='option'>").addClass("dd-option").attr("id","dd-option-"+m+"-"+d);t.value&&i.append(e("<input>").addClass("dd-option-value").attr("type","hidden").val(t.value)),t.imageSrc&&i.append(e("<img>").attr("src",t.imageSrc).addClass("dd-option-image"+("right"===a.imagePosition?" dd-image-right":""))),t.text&&i.append(e("<label>").addClass("dd-option-text").text(t.text)),t.description&&i.append(e("<small>").addClass("dd-option-description dd-desc").text(t.description)),v.append(i)}),v.keydown(function(d){var i=e(this);if("false"==i.attr("aria-hidden")){var a="dd-option-selected",s=[],l=e("."+a,i);switch(d.key){case"ArrowLeft":case"ArrowUp":return l.length?l.is(":first-child")||(s=l.removeClass(a).prev().addClass(a),i.attr("aria-activedescendant",s.attr("id"))):(s=e(".dd-option:first-child"),s.addClass(a),i.attr("aria-activedescendant",s.attr("id"))),!1;case"ArrowRight":case"ArrowDown":return l.length?l.is(":last-child")||(s=l.removeClass(a).next().addClass(a),i.attr("aria-activedescendant",s.attr("id"))):(s=e(".dd-option:first-child"),s.addClass(a),i.attr("aria-activedescendant",s.attr("id"))),!1;case"Enter":case" ":return l.length&&t(o,l.index(),!0),n(o),x.focus(),!1;case"Escape":return n(o),x.focus(),!1}}});var b={settings:a,original:h,selectedIndex:-1,selectedItem:null,selectedData:null};if(o.data("ddslick",b),a.selectText.length>0&&null===a.defaultSelectedIndex)o.find(".dd-selected").html(a.selectText);else{var k=null!=a.defaultSelectedIndex&&a.defaultSelectedIndex>=0&&a.defaultSelectedIndex<a.data.length?a.defaultSelectedIndex:0;t(o,k,!1)}o.find(".dd-select").on("click.ddslick",function(){i(o)}),o.find(".dd-option").on("click.ddslick",function(){t(o,e(this).index(),!0)}),o.find(".dd-options").on("focusout.ddslick",function(){setTimeout(function(){0==o.find(".dd-options").has(document.activeElement).length&&n(o)},50)}),a.clickOffToClose&&(v.addClass("dd-click-off-close"),o.on("click.ddslick",function(e){e.stopPropagation()}),c||(c=!0,e("body").on("click",function(){e(".dd-open").removeClass("dd-open"),e(".dd-selected").attr("aria-expanded","false"),e(".dd-click-off-close").slideUp(a.animationTime).attr("aria-hidden","true").siblings(".dd-select").find(".dd-pointer").removeClass("dd-pointer-up")})))}})},s.select=function(i){return this.each(function(){void 0!==i.index&&t(e(this),i.index),void 0!==i.value&&d(e(this),i.value),void 0!==i.id&&d(e(this),i.id)})},s.open=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&i(d)})},s.close=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&n(d)})},s.destroy=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");if(t){var i=t.original;d.removeData("ddslick").unbind(".ddslick").replaceWith(i)}})}});