it-swarm.com.de

jQuery-Registerkarten - neu ausgewählten Index abrufen

Ich habe zuvor jquery-ui tabs extension verwendet, um Seitenfragmente über ajax zu laden und verborgene divs innerhalb einer Seite zu verbergen oder sichtbar zu machen. Beide Methoden sind gut dokumentiert und ich hatte dort keine Probleme.

Jetzt möchte ich jedoch etwas anderes mit Tabs machen. Wenn der Benutzer eine Registerkarte auswählt, sollte die Seite vollständig neu geladen werden. Der Grund dafür ist, dass der Inhalt der einzelnen Registerkartenabschnitte etwas teuer ist. Daher möchte ich sie nicht alle auf einmal senden und die normale Methode verwenden von "display: none" umzuschalten.

Mein Plan ist, das select -Ereignis der Registerkarten abzufangen und die Seite mit der Funktion neu laden zu lassen, indem Sie document.location bearbeiten.

Wie erhalte ich im select-Handler den neu ausgewählten Tabulatorindex und das zugehörige html-LI-Objekt?

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

Gibt es ein Attribut des Ereignis- oder UI-Objekts, das ich lesen kann, das den Index, die ID oder das Objekt des neu ausgewählten Tabs oder des Ankertags darin enthält? 

Oder gibt es eine bessere Möglichkeit, Tabs zu verwenden, um die gesamte Seite neu zu laden?

26
Matt Hucke

Ich würde mir die events for Tabs anschauen. Folgendes ist den jQuery-Dokumenten entnommen:

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

Sieht aus wie ui.tab ist der Weg zu gehen.

37
imjoevasquez

in der jQuery-Benutzeroberfläche - v1.9.2

ui.newTab.index()

um einen Index der Basis 0 der aktiven Registerkarte zu erhalten

7
aorlando
select: function(e, ui){var index=ui.index;}

funktioniert gut für mich. siehe: http://api.jqueryui.com/tabs/#events

5
user376026

danke, jobscry - das 'ui.tab', auf das Sie hingewiesen haben, gab mir den angeklickten Anker-Tag, aus dem ich Klasse, ID, Href usw. extrahieren kann. Mein letzter tabs () - Aufruf sieht folgendermaßen aus:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});
0
Matt Hucke

Ich habe zwei Wege gefunden, um diese Anforderung zu erfüllen. Da es schwierig ist, Code hier zu platzieren, können Sie ihn unter http://ektaraval.blogspot.com/2011/09/calling-javascript betrachten -when-jquery-ui-tab.html

Hoffe das hilft jemandem ..

0
Ekta

in meiner Implementierung funktioniert es wie folgt:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});
0
Klaus Albert

Oder eine andere Option, die ich für meine Website verwendet habe, ist diese. Es ist ein grundlegendes UL/Div Tab-Navigationssystem. Der Schlüssel zum Auslösen des korrekten Registers beim Klicken auf einen Link zu einer anderen Seite mit angehängtem Hash-Kennzeichen besteht darin, einfach durch Ihren UL nach dem #example zu filtern, das dem entspricht, was mit dem Browser passiert. Es ist so.

Hier ist das Beispiel-HTML:

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

Und die Jquery, um es möglich zu machen:

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.Push(this);
            tabContainers.Push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

Das sollte sich um Sie kümmern. Ich weiß, dass dies nicht der sauberste Code ist, aber es wird dich dahin bringen.

0
Wes

Ein kurzer Blick in die Dokumentation gibt uns die Lösung: 

$('#edit_tabs').tabs({ selected: 2 }); 

Die obige Anweisung aktiviert die dritte Registerkarte.

0
Yasser