Choosing DropKick with Images

Question

I want to create a drop-down list containing images instead of text, and I want the select tag to be fully customizable.

Can I use images instead of text in a dropdown with DropKick?

I am trying to change to use images, but I want to be able to use it for text too on the same page in another dropkick element.

In code:

i change

optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>', 

to

 optionTemplate = '<li class="{{ current }}"><img src="images//{{ value }}.png" /></li>', 

Answer 1

Here is the best solution using HTML5 data attributes . You need to change the code written in the jquery.dropkick-1.0.0.js as follows (line numbers apply only to v1.0.0 ):

 // Line 39 -- Add "<img>" // HTML template for the dropdowns dropdownTemplate = [ '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">', '<a class="dk_toggle">', '<span class="dk_label">{{ label }}<img src="{{ icon }}"/></span>', /* << */ '</a>', '<div class="dk_options">', '<ul class="dk_options_inner">', '</ul>', '</div>', '</div>' ].join(''), // Line 51 -- Add "<img>" (string broken down here for readability) // HTML template for dropdown options optionTemplate = '<li class="{{ current }}">' + '<a data-dk-dropdown-value="{{ value }}">{{ text }}' + '<img src="{{ icon }}"/></a></li>'; /* << */ 

Also add the following line to the plugin options

  // Line 98 -- add "data.icon" // Don't do anything if we've already setup dropkick on this element if (data.id) { return $select; } else { data.settings = settings; data.tabindex = tabindex; data.id = id; data.$original = $original; data.$select = $select; data.value = _notBlank($select.val()) || _notBlank($original.attr('value')); data.label = $original.text(); data.options = $options; /* Add this attribute */ data.icon = $original.data('icon'); /* << */ } 

Before the next line inside the _build function

 // Line 318 if (view.options && view.options.length) { 

Add the following line:

 // Line 317. To be placed after other "template = template.replace" statements template = template.replace('{{ icon }}', view.icon); 

Finally, inside the loop after

 // Line 321 var // ... oTemplate = optionTemplate ; 

Add the following line

 // To be placed after other "oTemplate = oTemplate.replace" statements oTemplate = oTemplate.replace('{{ icon }}', view.icon); 

This may not be the best monkeypatching practice, as the code may break if the icon attribute is not set.

I advise you to add code to check the attribute value of the icon attribute and create two templates: one for the parameter and the other for the default drop-down list. Then you can choose which template to use. The same can be said about the _build function, since when using monkeypatching it depends on the value of view.icon (if it is defined or not).

Answer 2

I found a temporary solution, I do not know if it is the best, but it works now:

DropKick replaces parameter tags with li tags that contain a tag with the attribute "data-dk-dropdown-value". Thus, using javascript, I replace the value of “a” with the element “img”, and the src attribute for img is the parameter value (get if from the data-dk-dropdown-value attribute).

Here is an example:

 channel = document.getElementById('dk_container_channels-menu').getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li').getElementsByTagName('a')[0].innerHTML = "<img src=\"images/channels/" + channel + ".png\">"; 

If you find a better or faster solution, let me know.

(note: DropKick must be initialized before replacing an item)