文档物化芯片 http://materializecss.com/chips.html展示您可以用图像制作芯片:
<div class="chip">
<img src="images/yuna.jpg" alt="Contact Person">
Jane Doe
</div>
这工作得很好 - 当我们使用自动完成选项时,这也有效:
$('.chips-autocomplete').material_chip({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': 'images/juna.jpg'
},
limit: Infinity,
minLength: 1
}
});
由于我们已指定“images/juna.jpg”作为对象中“Google”属性的值,因此当我们开始输入“Goo”时,该图像会显示在自动完成下拉列表旁边。
然而,当选择这个下拉菜单项时,它只是添加一个显示“Google”的芯片,并带有关闭按钮,没有图像。创建芯片后是否可以将图像与文本一起显示?
就我而言,我使用了chip.add
输入芯片时显示图像的事件。基本上我必须复制传递给的数据autocompleteOptions
并使用了chip.tag
作为匹配正确图像的关键。
$('.chips').on('chip.add', function(e, chip){
var data = {
'Kyle Robinson': 'dist/images/user-01.jpg',
'Rebecca Smith': 'dist/images/user-02.jpg',
'Aaron Lloyd': 'dist/images/user-03.jpg'
} //same data passed to autocompleteOptions
var key = chip.tag;
$(this).children('.chip').append('<img src="' + data[key] + '">');
});
实例:jsFiddle https://jsfiddle.net/tnfdc4dt/1/
编辑:无需复制数据,您可以使用以下方式获取数据:
$('.chips-initial').material_chip('data');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)