4

jQuery UI 1.9.2 (1.8.23 からアップグレード) を使用しており、これはアップグレード ガイドに記載されています。

非推奨の url メソッドと title 属性の使用。aria-controls 属性を使用する

(#7132) url メソッドは非推奨になり、リモート タブでも href 属性を変更しないままにしておくことが推奨されました。href 属性は実際のリソースを指し、 aria-controls 属性は関連するパネルを指します。これは、カスタム パネル ID の指定に title 属性が使用されなくなることを意味します。

私はこのコードを持っています:

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

私が取ったアプローチはhref、AJAX リンクの を設定してから、メソッドを呼び出し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 呼び出しを行う 1 つのタブのみで構成されていることに注意してください。

URL を変更するにclickは、ボタンのイベントを処理し、次hrefのajax-linkように変更してから再読み込みします。

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

したがって、これを機能させるには、変更したいリンクを ID とともに提供する必要があり、タブ ページが発生する位置を知る必要があります。

于 2013-01-12T10:09:42.067 に答える