6

我想创建一个包含图像而不是文本的下拉列表，并且我希望选择标签是完全可定制的。

可以使用 DropKick 在下拉列表中使用图像而不是文本吗？

我尝试修改以使用图像，但我希望能够在其他 dropkick 元素的同一页面上将其用于文本。

在代码中：

我改变

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

至

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

2 回答 2

5

这是使用 HTML5 的更好解决方案data attributes。必须将文件中编写的代码修改jquery.dropkick-1.0.0.js如下（行号仅适用于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>'; /* << */

此外，将以下行添加到插件的选项中

  // 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'); /* << */
  }

在_build函数中的以下行之前，

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

添加以下行：

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

最后，在循环内部之后

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

添加以下行

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

这可能不是最佳编码实践（monkeypatching），因为icon未设置数据属性时代码可能会中断。

我建议您添加一些代码来检查icon数据属性值的值，并创建两个模板：一个用于选项，另一个用于默认下拉列表。然后可以选择要使用的模板。函数也是如此_build，与monkeypatching 一样，它取决于view.icon值（是否已定义）。

于 2013-05-25T16:16:44.717 回答
2

我找到了一个临时解决方案，我不知道它是否是最好的，但它现在有效：

DropKick 将选项标签替换为 li 标签，其中包含一个带有属性“data-dk-dropdown-value”的标签。所以，使用javascript我用“img”元素替换“a”值，img的src属性是选项的值（如果从“data-dk-dropdown-value”属性中获取）。

这是一个例子：

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\">";

如果您找到更好或更快的解决方案，请告诉我。

（注意：DropKick 必须在替换元素之前初始化）

于 2012-10-25T14:15:37.543 回答