如何将复杂样式应用于Select2组件的选择？-Java 学习之路

今天我在使用Select2插件时遇到了一个看似简单的样式任务，但似乎我想要实现的东西比我想象的要困难 . 这就是我想要做的事情：

用户应该能够从下拉菜单中选择联系人 . 每个联系人条目应显示为联系人's profile picture and some data next to it. When collapsed, the dropdown should display the selected contact (i.e. the selected contact'的 Profiles 图片及其旁边的一些数据），旁边有一个"dropdown triangle" . 在展开状态下，下拉列表还应显示其他联系人，每个联系人都有 Profiles 图片和数据 . 简而言之，我想按the select2 example page中"Templating"示例中的描述进行模板化，只需要更复杂的布局（左侧的轮廓图片以及图片旁边的三个叠加文本行） .

我设法通过使用 formatResult select2选项将所需的样式应用于 results ，使用格式化函数将图像和数据包装在样式化的div元素中（请注意，我使用Twitter Bootstrap 's ' media'css类进行样式化）：

function formatContactResult(item) {
 if(!item.id)
    return "No contact selected";

 var contact = JSON.parse(item.text);
 return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong>
" + contact.jobTitle + "</div></div>"
};

我的问题：我无法弄清楚如何将这样的复杂布局应用于 selection . 我知道 formatSelection 选项，但 formatSelection 函数的返回值包含在 span 元素中，该元素不适合复杂布局 . 虽然我知道这是无效的，但我尝试应用上面提到的相同的布局功能，但是这预期导致了奇怪的结果（所需的布局被推到了右边） .

有没有人知道我如何用select2实现所描述的布局？

如果有任何兴趣，我正在使用带有Knockout.js和Twitter Bootstrap的Select2插件 .

1 回答

2
我想通了 - 问题是 select2-choice 组件中包含的所有 div 元素都在 select2.css 中绝对定位和设置样式：
```
.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}
```
此样式用于呈现下拉框的"dropdown triangle"，恰好是 div 元素 . 不幸的是，三角形 div 没有自己的CSS类名，应该用它来设置它的样式 .

因此，作为一种解决方法，我创建了一个新的CSS类并将其应用于我想在 select2-choice 组件内部渲染的 div 元素 . 我们的想法是覆盖位置和宽度属性：
```
.innerDiv {
    position: relative !important; 
    width: auto !important;
}
```
回复于 2024-04-29T23:59:09+08:00

如何将复杂样式应用于Select2组件的选择？

1 回答

相关问题