【问题标题】:Jquery tabs won't select from the indexJquery 选项卡不会从索引中选择
【发布时间】:2010-04-15 12:22:01
【问题描述】:

我正在使用带有更新面板和 Jquery UI 选项卡的 ASP.NET 页面。但是,我遇到了问题。当我点击一个按钮时,它应该设置一个隐藏字段的值,当页面回发时,它将选择新标签。

所以在文档 onload 中将选项卡设置为隐藏字段的初始化值:

$(function()
    {
        var loadTab = $("#<%= hidTabSelected.ClientID %>").val();

        $('#dvJqTabs').tabs( 
            { selected: loadTab ,   
              select: saveTab                    
            }
        )
    });

现在,当我想更改选项卡时,在 ASP.NET 页面按钮单击处理程序中,我进行了一些处理,最后设置 hidTabSelected = 1(以前为 0)。当页面因为我在 UpdatePanels 中而发布时,我不会获得文档就绪事件。因此,我拦截了 pageLoad() 并尝试再次设置选项卡:

function pageLoad()
    {
        alert('pageLoad()');
        var loadTab = $("#<%= hidTabSelected.ClientID %>").val();
        $('#dvJqTabs').tabs( { selected: loadTab } );
    }

标签没有被选中?如果我进入 firebug 控制台并检查 $("#hidTabSelected").val() 我得到 1。那么为什么不显示第二个选项卡?

【问题讨论】:

    标签: asp.net jquery jquery-ui


    【解决方案1】:

    请记住,pageLoad() 会在初始加载和回调期间的 PostBack 加载时调用。我认为你的问题是元素已经是一个选项卡,所以你只需要在回调之后调用一个方法就可以了:

    function pageLoad()
        {
           var loadTab = $("#<%= hidTabSelected.ClientID %>").val();
            $('#dvJqTabs').tabs( "select", loadTab } );
        }
    

    【讨论】:

    • 您好,我试过了,但是没有效果。我想知道当部分页面刷新发生时(因为更新面板)它是否失败?我放置了一个简单的 ASP.NET 按钮,其中 onclientclick 设置为测试功能,如下所示: $('#dvJqTabs').tabs( { "select": 1 } );并且页面刷新,我可以看到返回选项卡的项目符号点,但再次选择了第一个选项卡...
    • 这可能与 UpdatePanel 回调中的 DOM 更新有关。我会考虑使用 ScriptManager.RegisterClientScriptBlock 方法在 PostBack 事件处理程序期间注册您的 JavaScript。
    【解决方案2】:

    如果您将字符串传递给select function,它会尝试将其与选项卡锚点you can see the code for that here 的哈希值相匹配。来自文档:

    选择一个选项卡,就像单击它一样。第二个参数是要选择的选项卡的从零开始的索引或与选项卡关联的面板的 id 选择器(选项卡的 href 片段标识符,例如哈希,指向面板的 id)。

    相反,您希望按索引选择,因此它需要 不 是一个字符串。为此使用parseInt(),如下所示:

    function pageLoad()
    {
        var loadTab = parseInt($("#<%= hidTabSelected.ClientID %>").val(), 10);
        $('#dvJqTabs').tabs( { selected: loadTab } );
    }
    

    【讨论】:

      猜你喜欢
      • 2010-09-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-09-29
      • 1970-01-01
      • 1970-01-01
      • 2010-09-22
      相关资源
      最近更新 更多