Pamiętaj, która karta była aktywna po aktualizacji


Używam jquery of tabs na stronie internetowej i kiedy strona jest odświeżana, traci kartę, którą kiedykolwiek byłem i wraca do pierwszej karty.
Czy ktoś zetknął się z tym problemem i wie, jak go rozwiązać?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Podobnie jak inni, zmagałem się z interfejsem użytkownika - zakładkami, historią, plikami cookie w jQueryUI 1.10.
Dzięki rozwiązaniu Harry'ego i innej dokumentacji online, o której wspomniałem w poniższym kodzie, mam teraz działające rozwiązanie bez plików cookie! Udało mi się przetestować w przeglądarce Firefox 18.0.1 i IE 9.0.12. Według moich zasobów Chrome, Firefox, Safari i IE8 & amp; powyżej obsługuje przechowywanie sesji.
$(function() {
// jQueryUI 1.10 and HTML5 ready
// [url=http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option]http://jqueryui.com/upgrade-gu ... ption[/url]
// Documentation
// [url=http://api.jqueryui.com/tabs/#option-active]http://api.jqueryui.com/tabs/#option-active[/url]
// [url=http://api.jqueryui.com/tabs/#event-activate]http://api.jqueryui.com/tabs/#event-activate[/url]
// [url=http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/]http://balaarjunan.wordpress.c ... ider/[/url]
//
// 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 )
}
});
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zakładam, że używasz zakładek interfejsu użytkownika jQuery,
tutaj jest przykład użycia zakładek i plików cookie do zapisania ostatnio klikniętej karty
http://jqueryui.com/demos/tabs/# cookie
http://jqueryui.com/demos/tabs/#cookie
próbny:
Otwórz ten link

http://jqueryui.com/demos/tabs/cookie.html
http://jqueryui.com/demos/tabs/cookie.html
zamknij go i otwórz ponownie, a zobaczysz naciśniętą tę samą kartę

aktualizacja:

po 3 latach tej odpowiedzi jQuery ui wycofał opcję plików cookie:

http://jqueryui.com/upgrade-gu ... ption
http://jqueryui.com/upgrade-gu ... ption
.
ale nadal możesz dodać tutaj wygląd, jeśli odpowiada to Twoim potrzebom, czy nie

https://stackoverflow.com/a/14313315/109217
https://stackoverflow.com/a/14313315/109217
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Prostsza alternatywa, którą właśnie wdrożyłem:
$(".tabs").tabs({
select: function(event, ui) {
window.location.replace(ui.tab.hash);
},
});

Spowoduje to dodanie wartości skrótu do adresu URL, dzięki czemu odświeżenie strony spowoduje ponowne załadowanie karty, a przy użyciu
location.replace
zamiast
location.hash
nie zapełniamy pola historia użytkownika z niechcianymi krokami wstecz ...
Mam nadzieję że to pomoże.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Teraz, gdy pliki cookie zniknęły w interfejsie jQuery UI 1.10.0, połączyłem podejście Gayatiri z nowymi opcjami i wydarzeniami:
// using cookie plugin from [url=https://github.com/carhartl/jquery-cookievar]https://github.com/carhartl/jquery-cookievar[/url] 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 });
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Krótki, niezależny od układu sposób na zrobienie tego za pomocą

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

Specyficznym dla układu sposobem jest użycie niestandardowych atrybutów danych (być może przydatne, jeśli wartości atrybutów zostaną w jakiś sposób użyte w innym miejscu skryptu).

jQuery UI

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


Przykładowy układ HTML

:
<div id="tabs">
<div id="tabs-1" data-tab-index="0">
tab 1 stuff...

<div id="tabs-2" data-tab-index="1">
tab 2 stuff...

<div id="tabs-3" data-tab-index="2">
tab 3 stuff...

Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Gdy strony internetowe są odświeżane, ponownie ładują swój stan z serwera, ponownie wysyłając żądanie do strony.
Albo serwer WWW musi zapamiętać stan i dostarczyć plik w inny sposób niż domyślny, albo możesz użyć plików cookie lub komponentu hash url i niektórych jQuery do przechowywania stanu, odczytywania go podczas ładowania i przywracania.
Cm
... podłącz
http://plugins.jquery.com/project/Cookie
jquery.cookie lub

SWFaddress
http://www.asual.com/swfaddress/, dowiedz się, jak samodzielnie manipulować wartościami skrótu lub za pomocą wtyczki historii jQuery.
Metoda haszowania ma szczególne znaczenie, ponieważ replikuje zmiany adresu URL, więc kopiowanie/wklejanie adresów URL nadal działa jak zakładki.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli używasz kart bootstrap 3 lub 4, możesz użyć pamięci lokalnej do przechowywania identyfikatora bieżącej karty, a następnie ustawić wyświetlanie go podczas ładowania strony.
Najpierw zablokujesz domyślną metodę otwierania karty, a następnie zapisz identyfikator linku otwartej karty w zdarzeniu open tab.
<pre class="lang-js prettyprint-override">
$('a[data-toggle="tab"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
}); $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href");
localStorage.setItem('selectedTab', id)
}); var selectedTab = localStorage.getItem('selectedTab'); if (selectedTab != null) {
$('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}

U mnie to zawsze działa świetnie.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz spróbować czegoś takiego, jest to całkiem łatwe.
# 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
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Włącz wtyczkę plików cookie jquery:
<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script>

zadeklaruj nazwę ciasteczka wewnątrz $. function ({.. lub document.ready like
var cookieName = "mycookie";$("#tabs").tabs({
selected : ($.cookies.get(cookieName) || 0),
select : function(e, ui) {
$.cookies.set(cookieName, ui.index);
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto alternatywny sposób zapamiętania otwartej karty według identyfikatora elementu (nie indeksu). Jest to przydatne, jeśli używasz tego kodu do synchronizowania otwartych kart na dwóch różnych stronach z podobnymi elementami (np. Pokaż i edytuj stronę).
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'));
}
});

Działa z interfejsem jQuery UI 1.10.
Pamiętaj o uwzględnieniu

podłącz
https://github.com/carhartl/jquery-cookie
jquery.cookie !
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Inną opcją jest użycie repozytorium html 5. Zobacz tutaj przykład:

http://www.w3schools.com/html/ html5_webstorage.asp
http://www.w3schools.com/html/html5_webstorage.asp
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

możesz użyć

Wtyczka jQuery History
http://plugins.jquery.com/project/history
tutaj

próbny
http://nix.lv/history/demo.html#2
-wersja (wgraj kolejny link do demo i spróbuj zaktualizować)
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Czy myślisz, że możesz dodać tę samą funkcję w poniższym kodzie?
$(".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;});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

$(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");
});
});

Używałem go w roku
ASP.NET
i działa świetnie. Mam też przycisk w drugiej zakładce, aby pokazać jakieś okno dialogowe i działa idealnie.
Puja Dhingra
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Moja firma blokuje pliki cookie, więc znalazłem obejście. Po prostu podążaj za zakładką, używając ukrytego pola i przekaż tę wartość z powrotem, gdy tylko żądanie zostanie zakończone. Nie jest zbyt ładna, ale spełnia swoje zadanie.
<% if(request.getAttribute("tab")==null) { %>
$("#tabs").tabs();
<% } else { %>
$("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>});
<% } %>

Na końcu ustawiam tylko atrybut
request.setAttribute("tab", f.get("tab").toString());

Mam nadzieję że to pomoże.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Niedawno miałem ten sam problem i przyglądałem się

docs dla widgetu JQuery UI Tabs
https://api.jqueryui.com/tabs/... Skończyło się na tym, że korzystałem z wydarzeń
activate
https://api.jqueryui.com/tabs/#event-activate
i
create
https://api.jqueryui.com/tabs/#event-create
dla JQuery UI 1.10, a także localStorage, aby zapisać bieżącą kartę przed odświeżeniem strony.
$( ".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')
});
}
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Rozwiązałem to samo pytanie w następujący sposób

blog
https://www.sitepoint.com/comm ... 39684
.

Zakładka HTML

<ul class="tabs clear-fix">
<li class="">[url="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; ">[/i]JAVA[/url]<span></span>[/*]
<li class="">[url="#tab=js" id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;">[/i]JAVA SCRIPT[/url]<span></span>[/*]
[*][url="#tab=c" id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;">[/i]C[/url]<span></span>[/*]
[*][url="#tab=c2" id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;">[/i]C++[/url]<span></span>[/*]
[*][url="#tab=jQ" id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;">[/i]jQuery[/url]<span></span>[/*]
[/list]
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");
}

U mnie zadziałało, sugestia została doceniona.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się