Как получить TabIndex для текущей выбранной вкладки? - PullRequest
Новая
       5

Как получить TabIndex для текущей выбранной вкладки?

0 голосов
/ 04 февраля 2010

All

У меня есть вложенные вкладки пользовательского интерфейса JQuery. Я хочу реализовать функциональность reloadTab для вложенной вкладки. В настоящее время в следующем коде есть статические фрагменты для вложенных вкладок, но в конечном итоге они будут иметь URL-адреса, поэтому вкладки могут вести себя как вкладки ajax. Как мне достичь функциональности reloadTab? 

<html>
<head>
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                $(function() {
                        $('#tabContainer').tabs({ selected: 0 });
                        $('#fragment-1').tabs({ selected: 1 });
                });

        function reloadTab(tabindex)
        {
             var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
             $('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
             $('#fragment-1').tabs('load', tabindex);
        }
        </script>
</head>
<body> 
        <div id="tabContainer">
                <ul>
                        <li><a href="#fragment-1"><span>TAB1</span></a></li>
                        <li><a href="#fragment-2"><span>TAB2</span></a></li>
                        <li><a href="#fragment-3"><span>TAB3</span></a></li>
                </ul>
                <div id="fragment-1">
                        <ul class="innerNav" >
                                <li><a href="#fragment-1a"><span>INNERTAB1</span></a></li>
                                <li><a href="#fragment-1b"><span>INNERTAB2</span></a></li>
                        </ul>
                        <div id="fragment-1a" class="innerFragment">Content of inner tab 1</div>
                        <div id="fragment-1b" class="innerFragment">Content of inner tab 2 
                <br><a href="Javascript:reloadTab(1);">Reload tab content</a></div>
                </div>
                <div id="fragment-2"></div>
                <div id="fragment-3"></div> 
        </div>
</body>
</html>

Спасибо

1 Ответ

1 голос
/ 04 февраля 2010

Из документов : 

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

EDIT

Я скопировал ваш файл и внес следующие изменения:

  1. Измените ссылку перезагрузки, чтобы она выглядела следующим образом:

    href="#" id="reload"

(уценка продолжает преобразовывать мой якорный тег в ссылку)

  1. Измените jquery на это: 
       
$(function() {
    $('#tabContainer').tabs({ selected: 0 });
    $('#fragment-1').tabs({ selected: 0 });
    $('#reload').click(function(){
        var $tabs = $('#fragment-1').tabs();
        reloadTab($tabs.tabs('option', 'selected'));
    });
});

function reloadTab(tabindex) {
        //alert(tabindex); //un-comment for proof.
    var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
    $('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
    $('#fragment-1').tabs('load', tabindex);
}
...