web-dev-qa-db-fra.com

Rappelez-vous quel onglet était actif après l'actualisation

J'utilise des onglets jQuery sur une page Web et, lorsque la page est actualisée, elle perd le dernier onglet sur lequel je me trouvais et retourne au premier.

Quelqu'un at-il rencontré ce problème et sait comment le résoudre?

jqueryjquery-plugins
51
thegunner

Je suppose que vous utilisez les onglets de jQuery UI,

voici un exemple d'utilisation des onglets + cookies pour enregistrer le dernier onglet cliqué 

http://jqueryui.com/demos/tabs/#cookie

demo: ouvrez ce lien http://jqueryui.com/demos/tabs/cookie.html

la fermer et re l'ouvrir et vous verrez le même onglet cliqué

update: après 3 ans de cette réponse, jquery ui a déconseillé d'utiliser l'option cookie: http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option . 

mais vous pouvez quand même ajouter, jetez un coup d'œil ici si cela répond ou non à vos besoins https://stackoverflow.com/a/14313315/109217

21
tawfekov

Comme d’autres, j’ai eu du mal avec l’historique des cookies de ui-tabs dans jQueryUI 1.10 . Grâce à la solution de Harry et à une autre documentation en ligne que je mentionne dans le code ci-dessous, j’ai maintenant une solution sans cookie! J'ai pu tester dans Firefox 18.0.1 et IE 9.0.12. Selon mes ressources, Chrome, Firefox, Safari et IE8 et versions ultérieures prennent en charge le stockage de session.

  $(function() {
    //  jQueryUI 1.10 and HTML5 ready
    //      http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    //  Documentation
    //      http://api.jqueryui.com/tabs/#option-active
    //      http://api.jqueryui.com/tabs/#event-activate
    //      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/
    //
    //  Define friendly index name
    var index = 'key';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    //  Start magic!
    try {
        // getter: Fetch previous value
        var oldIndex = dataStore.getItem(index);
    } catch(e) {
        // getter: Always default to first tab in error state
        var oldIndex = 0;
    }
    $('#tabs').tabs({
        // The zero-based index of the panel that is active (open)
        active : oldIndex,
        // Triggered after a tab has been activated
        activate : function( event, ui ){
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            dataStore.setItem( index, newIndex ) 
        }
    }); 
    });
38
Arik

Une alternative plus simple que je viens de mettre en place:

$(".tabs").tabs({
    select: function(event, ui) {                   
       window.location.replace(ui.tab.hash);
    },
});

Cela ajoutera la valeur de hachage à l'URL, ce qui permettra à l'actualisation de recharger cet onglet. En utilisant location.replace plutôt que location.hash, nous ne complétons pas l'historique de l'utilisateur avec des étapes non souhaitées.

J'espère que cela pourra aider.

11
Hatcham

Maintenant que le cookie a disparu dans jQuery UI 1.10.0, j'ai mélangé l'approche de Gayathiri aux nouvelles options et événements:

// using cookie plugin from https://github.com/carhartl/jquery-cookie

var tabCookieName = "ui-tabs-1";
$(".tabs").tabs({
    active : ($.cookie(tabCookieName) || 0);
    activate : function( event, ui ) {
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        // my setup requires the custom path, yours may not
        $.cookie(tabCookieName, newIndex, { path: window.location.pathname });
    }
});
5
Harry

Utilisez cette méthode en utilisant localStorage :

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

Une façon de le faire spécifique à la présentation utilisant des attributs de données personnalisés (éventuellement utile si les valeurs d'attribut devaient être utilisées d'une autre manière ailleurs dans votre script).

jQuery UI:

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

Exemple de mise en page HTML:

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>
4
lifetimes

Lors de l'actualisation des pages Web, ils rechargent leur état à partir du serveur en demandant à nouveau la page.

Soit le serveur Web doit mémoriser l'état et fournir le fichier différemment du fichier par défaut ou vous pouvez utiliser des cookies ou le composant de hachage de l'URL et du jQuery pour stocker l'état, le lire au chargement et le restaurer.

Voir le plugin jquery.cookie ou SWFaddress , découvrez comment manipuler vous-même les valeurs de hachage ou le plugin jQuery History.

La méthode de hachage a un attrait particulier car elle réplique les modifications d'URL. Le copier/coller de l'URL fonctionne toujours, tout comme les signets.

2
Orbling

Voici une autre façon de permettre de mémoriser l'onglet ouvert par l'identifiant d'élément (pas d'index). Ceci est utile si vous utilisez ce code pour synchroniser les onglets ouverts sur deux pages différentes avec des éléments similaires (comme afficher et modifier une page).

var tabsid = "#tabs";
var cookieid = "tabs_selected2";

var activetabnr = 0;
if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) {
   activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index();
}

$(tabsid).tabs({
   active: $(tabsid).tabs({ active: activetabnr }),
   beforeActivate: function (event, ui) {
        $.cookie(cookieid, "#"+ui.newPanel.attr('id'));
   }
});

Fonctionne avec jQuery UI 1.10 . N'oubliez pas d'inclure le plugin jquery.cookie !

<script type="text/javascript" src="/js/jquery.cookie.js"></script>
1
Jeff

Une autre option consiste à utiliser le stockage HTML 5. Voir ici pour un exemple: http://www.w3schools.com/html/html5_webstorage.asp

1
Maurizio In denmark

Inclure le plugin jquery cookies: 

<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script>

déclarer un nom de cookie dans $ .function ({.. ou document.ready en tant que

var cookieName = "mycookie";

$("#tabs").tabs({
    selected : ($.cookies.get(cookieName) || 0),
    select : function(e, ui) {
        $.cookies.set(cookieName, ui.index);
    }
        });
1
Poppy

Vous pouvez essayer quelque chose comme ça, c'est assez facile à faire.

# Set selected_tab to the correct index based on the current url anchor hash
selected_tab = 0
if matches = /#(\w+)/.exec(window.location.hash)
  # find the index of the tab with the given id
  selected_tab = $('#' + matches[1]).index() - 1

# Initialize the tabs and set 'selected' to equal the selected_tab variable we just set
$('.tabable').tabs
  selected: selected_tab,  # this is where the magic happens
  select: (evt, ui) ->
    window.location.hash = ui.panel.id  # set an anchor tag in the url with the tab id
1
Ryan

Mon entreprise a bloqué les cookies et j'ai donc trouvé une solution de contournement. Suivez simplement l'onglet en utilisant un champ caché et renvoyez cette valeur une fois la demande terminée. Ce n'est pas joli mais ça fait le travail.

<% if(request.getAttribute("tab")==null) { %>
    $("#tabs").tabs();
<% } else { %>
    $("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>});
<% } %>

À l'arrière je viens de définir l'attribut

request.setAttribute("tab", f.get("tab").toString());

J'espère que cela t'aides.

0
bmoran

J'ai récemment eu le même problème et j'ai passé beaucoup de temps à regarder la documentation pour Widget Onglets de l'interface utilisateur JQuery . J'ai fini par utiliser les événements activate et create pour JQuery UI 1.10 ainsi que localStorage pour stocker l'onglet actuel avant l'actualisation de la page.

$( ".selector" ).tabs({                                                 
    activate: function( event, ui) {
        //when tab is activated store it's index in activeTabIndex
            var activeTabIndex = $('.tabs').tabs('option','active');
        //add activeTabIndex to localStorage and set with key of 'currentTab'  
            localStorage.setItem('currentTab', activeTabIndex); 
                        },
        create: function( event, ui ) {
            $(".tabs").tabs({       
        //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
        //after getItem from localStorage
        active: localStorage.getItem('currentTab')
    });
    }

});

0
increda_jaw

Vous pouvez utiliser le plugin jQuery History , voici un demo (chargez un autre lien dans la démo et essayez d'actualiser)

0
Josh Stodola
   $(function () {

        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        //$(function () {
            $("#tabs").tabs({
                    select: function (event, ui) {                       
                    document.location.href = ui.tab.href;                        
                }
            }).show();

        //});

                    $("#MainContent_button1").click(function (event) {                           
                        event .preventDefault();
                         $("#dialog").dialog("open");                           
                    });
    });

Je l'ai utilisé dans ASP.NET et cela fonctionne bien pour moi. J'ai également un bouton dans le deuxième onglet pour afficher une boîte de dialogue et cela fonctionne parfaitement.

Pooja Dhingra

0
Pooja Dhingra

Pensez-vous que vous pouvez ajouter la même fonction sur le code ci-dessous?.

$(".menu > li").click(function(e){
    $(".content." + $(".menu > .active").attr("id")).fadeOut("fast", function() {
        $(".content." + e.target.id).fadeIn();
        $(".menu > #" + e.target.id).addClass("active");
    });

    $(".menu > .active").removeClass("active");

    return true;

});
0
Sahbas Has

Je suis résolu le même problème avec l'aide de suivre blog .

Onglet HTML

 <ul class="tabs clear-fix">
     <li class=""><a href="#tab=Java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>Java</a><span></span></li>
     <li class=""><a href="#tab=js"  id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>Java SCRIPT</a><span></span></li>
     <li><a href="#tab=c"  id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li>
     <li><a href="#tab=c2"  id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li>
     <li><a href="#tab=jQ"  id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li>
    </ul>

Javascript

 var selectedTab =  window.location.href.split("#tab=")[1] ;
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('id');

    if (typeof selectedId === "undefined") {
         $('#tab1-tab').trigger("click");
    }
    else{
        $('#'+selectedId).trigger("click");
    }

Pour moi cela a fonctionné, suggestion appréciée.

0
light_ray