| Autor | Zpráva | ||
|---|---|---|---|
| spacek145 Profil |
Dobrý den,
chtěl bych se zeptat, jak do tohoto scriptu Jquery UI tabs přidat to, že jakmile refreshnu stránku s aktuální vybranou záložkou, tak aby se po refreshi zachovala vybraná? $(function(){
$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function() {
$('#tab-wrapper li').removeClass('active');
$(this).parent().addClass('active');
var activeTab = $(this).attr('href');
$('#tab-body > div:visible').hide();
$(activeTab).show();
return false;
});
}); Demo: http://jsfiddle.net/f7bJF/47/ #tab-body > div reprezentuje oddíl s textem, který přísluší každé záložce |
||
| janbarasek Profil |
#2 · Zasláno: 8. 8. 2014, 19:52:39
spacek145:
Co jí třeba uložit do cookies s platností do zavření prohlížeče? |
||
| spacek145 Profil |
#3 · Zasláno: 8. 8. 2014, 20:39:50
To je hezké, ale jak na to? Kam mam co dopsat?
|
||
| janbarasek Profil |
#4 · Zasláno: 8. 8. 2014, 21:17:20
spacek145:
Do jQuery si to přepiš sám, ale obecně se v javascriptu takto vytvoří cookies: function set_cookies (names, values) {
document.cookie=names+'='+values;
return 0;
}
set_cookies ("test", 15); // vytvoří cookies "test" s hodnotou 15function get_cookies (cook_name) {
var set_cookies = new Array, search_cookies = new Array;
set_cookies = document.cookie.split("; ");
for (i in set_cookies) {
search_cookies = set_cookies[i].split("=");
if (search_cookies[0] == cook_name) return search_cookies[1];
}
}
get_cookies ("test"); // vrátí hodnotu cookies "test" |
||
| Str4wberry Profil |
#5 · Zasláno: 8. 8. 2014, 21:26:50
Raději bych to ukládal do URL, půjde potom na záložku i odkázat.
|
||
| Radek9 Profil |
janbarasek:
Pokud neumíš JS, nepiš ho prosím. V tvém kódu (pominu-li chyby v angličtině) je několik zásadních chyb a zbytečností. 1) Proč metoda set_cookie vrací 0?
2) Proč do proměnných set_cookies a search_cookies ukládáš prázdné pole (navíc zapsané tím nejukecanějším způsobem), když ho vzápětí přepíšeš novým?
3) Nikdy neprocházej pole for..in cyklem. Ten je určen k procházení vlastností objektů. Pro procházení polí použij klasický for.
4) Ve foru ti chybí var u proměnné i.
5) Jak u parsování, tak u ukládání cookies bys měl používat URI enkódování, respektive dekódování. spacek145: Jak poznamenal Str4wberry, nejlepší řešení by bylo použít adresu, která umožní i odkazování. Změnu adresy zajišťuje ono řešení samo o sobě pomocí kotvy (odmažeš-li return false;). Problém je však s tím, že při použití kotvy prohlížeč automaticky scrolluje na pozici elementu se stejným ID. Doporučuji použít k identifikaci těch tabů např. data atribut. Potom při načtení stránky stačí pouze (pokud je něco v kotvě) aktivovat příslušný tab:
var hash = window.location.hash;
if (hash.length > 1) {
// Nový výběr aktivního tabu
var activeTab = $("#tab-body > div[data-tab-id=" + hash.slice(1) + "]");
// Tady proběhně aktivace podobně jako ve funkci
}Pokud někoho napadá, jak to udělat se zachováním atributu id, budu jen rád, ale já osobně netuším, jak v tomto případě zakázat defaultní chování prohlížeče a přitom kotvu změnit.
Edit: Kompletní řešení tady, určitě to ještě jde nějak zkrátit, ale to nechám na tobě: <div id="tab-outer">
<ul id="tab-wrapper">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
<div id="tab-body">
<div data-tab-id="tab1">
<h2>Tab 1</h2>Lorem ipsum dolor sit amet
</div>
<div data-tab-id="tab2">
<h2>Tab 2</h2>Consectetuer adipiscing elit
</div>
<div data-tab-id="tab3">
<h2>Tab 3</h2>Sed diam nonummy nibh euismod tincidunt
</div>
<div data-tab-id="tab4">
<h2>Tab 4</h2>Ut laoreet dolore magna aliquam erat volutpat
</div>
</div>
</div>$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function() {
$('#tab-wrapper li').removeClass('active');
$(this).parent().addClass('active');
var activeTab = $(this).attr('href');
$('#tab-body > div:visible').hide();
$('#tab-body > div[data-tab-id=' + activeTab.slice(1) + ']').show();
});
var hash = window.location.hash;
if (hash.length > 1) {
$('#tab-wrapper li').removeClass('active');
$('#tab-wrapper a[href=' + hash + ']').parent().addClass('active');
$('#tab-body > div:visible').hide();
$("#tab-body > div[data-tab-id=" + hash.slice(1) + "]").show();
} |
||
|
Časová prodleva: 10 let
|
|||
0