jQuery Tabs 1.9 deprecated "url" - 如何为标签设置 URL？答案

【问题标题】：jQuery Tabs 1.9 deprecated "url" - How does one set URLs for tabs?jQuery Tabs 1.9 deprecated "url" - 如何为标签设置 URL？
【发布时间】：2013-01-02 21:24:30
【问题描述】：

使用 jQuery UI 1.9.2（从 1.8.23 升级），我在升级指南中看到了这一点；

不推荐使用 url 方法和使用 title 属性；使用 aria-controls 属性

(#7132) 不推荐使用 url 方法，以支持即使对于远程选项卡也不修改 href 属性。 href 属性将指向实际资源，而 aria-controls 属性将指向关联的面板。这意味着 title 属性将不再用于指定自定义面板 id。

我有这个代码：

var $t = $("#tabs");
$t.tabs("url", 0, url);           
$t.bind("tabsload", function (event, ui) {
    console.log('tabsload fired');
});
$t.tabs("load", 0);

我现在不知道如何为选项卡设置 url 值（当用户单击网格行并根据网格值重建 url 值时触发此代码），因为我不了解升级使用aria-controls 评论的指南。

【问题讨论】：

你还在做这个吗？我很想知道我的回答是否能解决问题。

标签： jquery-ui jquery-ui-tabs

【解决方案1】：

我采取的方法是设置AJAX链接的href，然后调用load方法重新加载内容。

我很欣赏这不使用 aria-controls 属性，但升级指南中的 sn-p 指出该属性指向面板 - 远程选项卡根据包含在 li 元素中的锚接收其内容，所以我想我应该可以使用这种方法。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
        rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabs').tabs();
            $('#change-button').click(function (event) {
                $('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
                $('#tabs').tabs('load', 0);
                event.preventDefault();
            });
        });
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="tabs">
        <ul>
            <li>
                <a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
            </li>
        </ul>
    </div>

    <button id="change-button">Change</button>
    </form>
</body>
</html>

我正在使用一个通用的 HTTP 处理程序（这是 AJAX 请求），它简单地回显它传递的文本，例如，Handler1.ashx?echo=some text to repeat。请注意，我的选项卡仅包含一个对该处理程序进行 AJAX 调用的选项卡。

要更改Url，我处理按钮的click 事件并像这样修改ajax-link 的href 然后重新加载：

$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
    + new Date().toTimeString());
$('#tabs').tabs('load', 0);

因此，要使其正常工作，您需要提供您希望使用 ID 更改的链接，并且您需要知道标签页出现在哪个位置。

【讨论】：

+1 用于提供足够的解决方法，尽管它只是绕过 api 来完成之前所做的事情（这本来就不应该改变）。我对 jQueryUI 的开发团队非常失望。为什么他们会破坏现有的网站进行简单的升级，这超出了我的理解。使用 aria-controls 来标识面板，然后进行单独的 ajax 调用以使用检索到的 data\html 填充它，这将不必要地使我的代码复杂化，因为它需要 2 种填充选项卡面板的方法。更不用说，让未来的维护更加混乱。他们在想什么？
感谢您的工作，我同意 Richard B 的观点，因为我认为 jQuery UI 团队将其删除并且不提供有效、简单的示例是非常短板的。