Question

我使用下面的jquery来控制在AjaxControlToolkit tabcontainer中单击选项卡时会发生什么。

如果隐藏文本输入（hdnFormSaved）的值为＆＃34; True＆＃34;，则单击的选项卡将设置为活动（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块中初始化一个模态而不是确认对话框。从这里开始，如果单击模式的“确定”按钮，我不确定如何继续将单击的选项卡设置为活动状态。可以/我应该在同一个区块中监听事件吗？

$(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按钮提供了#btn_okay的ID，并使用jquery＆＃39; s proxy将上下文传递给on匿名函数。

使用带Tabpanel的bootstrap模式来设置活动选项卡

1 个答案: