带图像的jQuery UI Multiselect小部件(Eric Hynds版)

Question

优秀的下拉jQuery UI Multiselect小部件,通过jQuery UI支持样式Themeroller仍然不支持在下拉行中包含图像.

Stackoverflow中我没有看到这个问题的任何答案,但它似乎经常被问到互联网的各个方面,所以我给出了下面这个问题的答案.

Answer 1

(另请参阅我的 FIDDLE 示例以查看此操作,)

以下是基于'pdlove'的初步想法,用于在这个优秀的UI Multiselect for jQuery中引入图像的使用.

通过设置选择器选项行html,可以为复选框文本区域中的行项添加图像支持:

<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
    normal visible text
</option>

我还要在样式表css文件中添加一个类控件,以设置在下拉列表的选项行项中呈现的图像大小,以及图像,标签和跨度文本的几个位置设置.在这个例子中,我使用类名'multSelktrImg',因此在css文件中它看起来像这样:

.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
    display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}

现在更改src/jquery.multiselect.js文件

在第130行周围搜索以下匹配代码(取决于您使用的脚本的版本ID):

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
            parent = this.parentNode,
            title = this.innerHTML,
            description = this.title,
            ....

在"title = this.innerHTML"上面添加以下行:

image = this.getAttribute("image");

所以它看起来像这样:

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
        parent = this.parentNode,
        image = this.getAttribute("image");
        title = this.innerHTML,
        description = this.title,

现在在第180行搜索以下匹配代码:

// add the title and close everything off
    html += ' /><span>' + title + '</span></label></li>';
    ....

用以下代码替换代码行以允许渲染图像:

// add the title and close everything off
    html += ' /><span>';
            if (image != null) {
                html += '<img src="'+image+'" class="multSelktrImg">';
            }
            html += title + '</span></label></li>';

保存脚本src/jquery.multiselect.js文件的新版本,现在图像将出现在multiselect下拉列表中.使用'multSelktrImg'类值可通过更改css文件中类的像素大小来控制显示的图像大小.

在FIDDLE版本中,我更改了jQuery脚本的最小化版本,并创建了Select对象的初始化.