Question

我有一个服务器端方法，可能需要很长时间。我决定显示一个加载过程模式，为此我使用了这个tutorial。它工作正常，但我的问题如下。

我在同一页面上使用jQuery UI / Tab，它包含两个选项卡。在回发时，所有UI都会丢失样式。据我所知，问题出在UpdatePanel，建议的解决方案是使用函数pageLoad()。但它部分地解决了我的问题，因为最后选择的选项卡不会在回发时保留。

在实现加载模型过程之前它运行良好，我使用了以下内容：

$(function() {
    $("#tabs").tabs({
        show: function() {
            var sel = $('#tabs').tabs('option', 'selected');                                               
            $("#<%= hidLastTab.ClientID %>").val(sel);
            $( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );                         
        },
        selected: <%= hidLastTab.Value %>     
    }); 
});

有没有解决方案？

Answer 1

我遇到了类似的问题，并使用以下方法进行了整理：

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
    load_lazyload();
}

function load_lazyload() {
    //here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
    //i.e.
    $(function () {
        $(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
    });
}

希望这有帮助，

更新：对于您的具体情况，可能会是这样的：

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
    load_lazyload();
}

function load_lazyload() {
    $(function() {
        $("#tabs").tabs({
            show: function() {
                var sel = $('#tabs').tabs('option', 'selected');                                               
                $("#<%= hidLastTab.ClientID %>").val(sel);
                $( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );                         
            },
            selected: <%= hidLastTab.Value %>     
        }); 
    });
}

Answer 2

您需要注册一个ClientSideScript，用于在回发期间执行的任何事件/方法中选择当前选项卡。

UpdatePanel和JQuery UI / Tabs选中选项卡

2 个答案: