使用 bootstrap 模态与 Tabpanel 设置活动选项卡

Question

我正在使用下面的 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;
                }
        };
});

这个解决方案非常有效。但是，我想用 bootstrap 模式替换确认对话框。

<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 块中初始化了一个模态，而不是一个确认对话框。从这里开始，如果单击模式的确定按钮，我不确定如何继续将单击的选项卡设置为活动状态。 Can/should 我在同一个 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();
                }
        };
});

欢迎任何建议。谢谢。

Answer 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 按钮一个 ID #btn_okay 并使用 jquery 的 proxy 将上下文传递给 on 匿名函数.

使用 bootstrap 模态与 Tabpanel 设置活动选项卡

Using bootstrap modal with Tabpanel to set active tab

javascript

jquery

asp.net

twitter-bootstrap

ajaxcontroltoolkit