使用带有 Tabpanel 的引导模式来设置活动选项卡答案

【问题标题】：Using bootstrap modal with Tabpanel to set active tab使用带有 Tabpanel 的引导模式来设置活动选项卡
【发布时间】：2016-05-23 10:05:14
【问题描述】：

我正在使用下面的 jquery 来控制在 AjaxControlToolkit 选项卡容器中单击选项卡时发生的情况。

如果隐藏文本输入 (hdnFormSaved) 的值为“True”，则将单击的选项卡设置为活动 (this.get_owner().set_activeTab(this))，否则会创建确认对话框。只有在通过对话框确认后，单击的选项卡才会设置为活动状态。

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    if (confirm('Do you want to change tab?'))
                        this.get_owner().set_activeTab(this);
                    else
                        return false;
                }
        };
});

此解决方案完美运行。但是，我想用引导模式替换确认对话框。

<div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to change tab?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我已经在 else 块中初始化了一个模式，而不是一个确认对话框。从这里开始，如果单击模态的 OK 按钮，我不确定如何继续将单击的选项卡设置为活动状态。我可以/应该在同一个 else 块中监听事件吗？

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    $('#myModal').modal();
                }
        };
});

欢迎任何建议。谢谢。

【问题讨论】：

标签： javascript jquery asp.net twitter-bootstrap ajaxcontroltoolkit

【解决方案1】：

解决如下：

$(function () {
    Sys.Extended.UI.TabPanel.prototype._header_onclick =
        function (e) {
            this.raiseClick();
                if ($("[id$=hdnFormSaved]").val() == "True") {
                    this.get_owner().set_activeTab(this);
                } else {
                    obj = this;
                    $('#myModal').modal();
                        $("#btn_okay").on("click", $.proxy(function () {
                            this.get_owner().set_activeTab(this);
                        }, this));
        }
    };
});

我为模态OK 按钮提供了#btn_okay 的ID，并使用jquery 的proxy 将上下文传递给on 匿名函数。

【讨论】：