我想创建一个包含图片而不是文本的下拉列表,我希望select标签可以完全自定义。
使用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>',
答案 0 :(得分: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
值(如果已定义或未定义)。
答案 1 :(得分:2)
我找到了一个临时解决方案,我不知道它是否是最好的,但它现在有效:
DropKick用li标签替换选项标签,li标签包含一个属性为“data-dk-dropdown-value”的标签。因此,使用javascript我将“a”值替换为“img”元素,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)