0

AJAX コンテンツに基づいて jQueryUI タブを無効および有効にしたい。

<script>
        $(function () {
            $("#tabs").tabs({
                disabled: [1, 2,3],
                collapsible: true,
                fx: [{
                    opacity: 'toggle',
                    duration: 'slow',
                    height: 'toggle'
                }, 
                     {
                         opacity: 'toggle',
                         duration: 'slow',
                         height: 'toggle'
                     }],
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. ";
                    });
                }
            });
        });


    </script>

そしてHTMLコード：

<div id="tabs">
            <ul>
                <li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li>
                <li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li>
                <li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li>
                <li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li>

            </ul>
            <iframe id="iframe1" src="Default2.aspx" style="width: 100%;" height="900"></iframe>

            <iframe id="iframe2" src="Default3.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe3" src="Default2.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe4" src="Default3.aspx" style="width: 100%;"></iframe>
        </div>

たとえば、ユーザーが選択popular-tabすると、Default3.aspx ページが読み込まれます。すべてのページにNextボタンがあります。ユーザーがNextボタンをクリックしたときに、これと次のタブをユーザーが使用できるようにしたいのですが、前のタブは使用できません。たとえば、ユーザーがボタンrecent-tabをクリックして有効にした場合、無効になります。Nextrecent-tabpopular-tab

編集 01:私は4つの
ページと例page1.aspxを持っていますpage2.aspx、非アクティブな最近のタブとアクティブな人気のあるタブ。など、ページ2の次のボタンにこのコードを書くと機能しません。助けてくれてありがとうpage3.aspxpage4.aspxrecent-tabpage1.aspxpage2.aspxpage3.aspxpage4.aspxpopular-tabpage3.aspx

ありがとう。

4

1 に答える 1

1

「次へ」ボタンのクリック イベントで、前のタブを無効にする onclick 関数を使用できます。

たとえば、「recent-tab」で次のボタンをクリックすると、次のボタンは次のようになります。

<button onclick="$('.next-button').tabs({ disabled: [ 1, 2, 3 ] })">Next</button>

以下は、タブの無効化に関する公式ドキュメントです。

http://api.jqueryui.com/tabs/#option-disabled

于 2013-04-30T13:39:06.243 に答える