How to individually target multiple dropdowns in CSS for Dropkick Plug-in

Question

Follow up to: How to get the output in relative units instead px by modifying this jQuery plugin of making custom style dropdown?

Referring to: http://jamielottering.github.com/DropKick/

Given the following JS:

    dropdownTemplate = [
  '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
    '<a class="dk_toggle">',
      '<span class="dk_label">{{ label }}</span>',
    '</a>',
    '<div class="dk_options">',
      '<ul class="dk_options_inner">',
      '</ul>',
    '</div>',
  '</div>'
].join(''),

How can I assign a custom ID or otherwise individually target each dk_toggle instance? I am creating multiple dropdowns, but the only way to modify the width (per linked question) is to target the dk_toggle class, which does not have an ID assigned to each instance.

Answer 1

Assigning a unique ID would be the job of the template parser. You don't mention which templating engine you're using. The general idea is that you pass the dropdown data, along with a reference to the template you defined above, to the template parser. The parser will inject the id values into the correct template element and then you're off to the races.

Answer 2

DropKick has themes, so you would do something like this:

$('select.a').dropkick({ theme: 'black' });
$('select.b').dropkick({ theme: 'white' });

and then in your styles:

.dk_theme_black { background:black; color:white;}
.dk_theme_white { background:white; color:black;}