2

今天在使用Select2插件的时候遇到了一个看似简单的造型任务，但是好像我想要实现的东西比我想象的要难。这是我想要做的：

用户应该能够从下拉菜单中选择联系人。每个联系人条目都应显示为联系人的个人资料图片和旁边的一些数据。折叠时，下拉列表应显示所选联系人（即所选联系人的个人资料图片和旁边的一些数据），旁边有一个“下拉三角形”。在展开状态下，下拉菜单应另外显示其他联系人，每个联系人都有个人资料图片和数据。简而言之，我想按照select2 示例页面上的“模板”示例中所述进行模板化，只是布局更复杂（左侧的个人资料图片加上图片旁边的三个堆叠的文本行）。

我设法通过使用select2 选项将所需的样式应用于结果formatResult，使用格式函数将图像和数据包装在样式化的 div 元素中（请注意，我使用 Twitter Bootstrap 的“媒体”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><br />" + contact.jobTitle + "</div></div>"
};

我的问题：我不知道如何将这样的复杂布局应用于selection。我知道该formatSelection选项，但formatSelection函数的返回值被包装在一个span元素中，该元素不是复杂布局的合适包装器。虽然我知道它无效，但我尝试应用我上面提到的相同布局功能，但这会导致奇怪的结果（所需的布局被推到右边很远）。

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

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

4

1 回答 1

2

我想通了 - 问题是组件中div包含的所有元素select2-choice都绝对定位和样式select2.css：

.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}

该样式用于渲染下拉框的“下拉三角形”，恰好是一个div元素。不幸的是，三角形div没有自己的 CSS 类名，应该用来设置它的样式。

因此，作为一种解决方法，我创建了一个新的 CSS 类并将其应用于div我想要在组件内部呈现的select2-choice元素。这个想法是覆盖位置和宽度属性：

.innerDiv {
    position: relative !important; 
    width: auto !important;
}
于 2013-03-27T13:01:33.703 回答