Question

使用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值（当用户点击网格行并且基于网格值重建网址值时会触发此代码）现在我不明白使用aria-controls评论的升级指南。

Answer 1

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

我感谢这不使用aria-controls属性，但升级指南中的代码段指出此属性指向面板 - 远程标签根据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调用的选项卡。

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

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

因此，要使用此功能，您需要使用ID提供要更改的链接，并且您需要知道标签页发生在哪个位置。

不推荐使用jQuery Tabs 1.9“url” - 如何设置标签的URL？

1 个答案: