4

使用 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评论的升级指南。

4

1 回答 1

3

我采取的方法是设置hrefAJAX链接的，然后调用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 调用的选项卡。

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

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

So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.

于 2013-01-12T10:09:42.067 回答