1

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

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

4

1 回答 1

6

（另请参阅我的 FIDDLE 示例以查看此操作，）

在此处输入图像描述

以下内容基于 'pdlove' 的最初想法，用于在这个出色的 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 文件，现在图像将出现在多选下拉列表中。使用“multSelktrImg”类值通过更改 css 文件中类的像素大小来控制显示的图像大小。

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

于 2014-03-08T20:05:06.677 回答