DropKick select with images

Question

I want to create a drop down list that include images instead of text and i want the select tag to be fully customizable.

It is possible to use images instead of text on a drop down list using DropKick?

I try to modify for using images but i want to be able to use it for text too on the same page in an other dropkick element.

In the 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 a better solution using HTML5 data attributes. One must modify the code written in the jquery.dropkick-1.0.0.js file 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>'; /* << */

Furthermore, add the following line to the plugin's 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 following line within 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 might not be the best coding practice (monkeypatching), as the code may break when the icon data attribute is not set.

I advise you to add some code to check the value of the icon data attribute value, and create two templates: one for the option and another for the default dropdown. Then one can select which template to use. The same goes for the _build function, as with the monkeypatching it depends on the view.icon value (if it is defined or not).

Answer 2

I found a temporary solution, i don't know if it's the best, but it works for now:

DropKick replaces option tags with li tags that includes an a tag with an attribute "data-dk-dropdown-value". So, using javascript i replace the "a" value with an "img" element and the src attribute of the img is the value of the option (get if from "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 a quicker solution let me know.

(note: DropKick must be initialized before replacing the element)