0

我这里有点脑筋急转弯：

基本上，我要做的是呈现一个漂亮的、可搜索的复选框列表作为 select2 控件的替代 UI。基本上，我的用户点击“添加多个”按钮，弹出一个模式对话框，然后他们选择他们的选项。我正在使用带有我找到的敲除绑定处理程序的 jquery 多选小部件。它似乎运作良好，但我希望该框默认打开，使其看起来更像一个经典的.net复选框列表......所以，我将 autoOpen: true 传递给多选，但它在右上角打开dom 而不是与多选文本对齐。如果您单击多选文本，然后再次单击它，即刻更改 columbo oreo - 它会在正确的位置打开！

我相信正在发生的事情是，在加载时，我的盒子已经用模态框渲染了它刚刚离开屏幕。因此，当我打开模式时，它会移动到屏幕但位置不好，即按钮附近没有。

我认为我应该做的是调用类似的东西：

$('.selector').multiselect({ show: 'fadeIn' });

或者一旦模态已经加载，位置就会正确。但是，我不知道如何通过淘汰赛做到这一点。任何帮助将不胜感激——我已经通过在这个小提琴中煞费苦心地重现问题来匹配努力；）：

这是我的模态现在的样子以及指向我的小提琴的链接......

<div data-bind="modal: AddManyItem">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>

     <h3>Add Many</h3>
</div>
<div class="modal-body">
    <select data-bind="multiSelectCheck: $data.Opts, 
                            multiselectOptions: 
                            { autoOpen: true },
                            optionsCaption: 'Check one or more', 
                            selectedOptions: $data.Vals, 
                            optionsText: 'Text'" multiple="multiple"></select>
</div>
<div class="modal-footer"> <a href="#" class="btn btn-primary" >Save changes</a>

</div>
</div>

见 JSFiddle：http: //jsfiddle.net/valvemail/W7E5N/15/

还有一点需要注意——这是一个引导模式，如果这有所作为的话。

4

1 回答 1

0

为什么不使用选择器来触发按钮，该按钮将在模式加载后显示复选框。

见小提琴：http: //jsfiddle.net/mdcuesta/W7E5N/24/

<div class="modal-body" id="modal-checkbox">
    <select data-bind="multiSelectCheck: $data.Opts, 
                            multiselectOptions: 
                            { autoOpen: false },
                            optionsCaption: 'Check one or more', 
                            selectedOptions: $data.Vals, 
                            optionsText: 'Text'
                            " multiple="multiple"></select>
</div>

将 autoOpen 设置为 false 并将 Id 添加到您的模态正文

viewModel.NewAddManyItem = function (data, event) {
var self = this;
viewModel.AddManyItem({
    FilterText: ko.observable("stuff"),
    FilteredResults: ko.observable([]),
    IsGeo: false,
    Vals: ko.observableArray([]),
    Opts: ko.observableArray(viewModel.OptList())
    });    
    self.ShowSelect();
};

viewModel.ShowSelect = function(){
   $('#modal-checkbox .ui-multiselect').click();
};

在您的模型中添加一个方法，该方法将处理按钮单击以显示复选框

您的理论是正确的，下拉菜单在导致您的问题的模态之前已经呈现。

于 2013-04-02T09:09:33.933 回答