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 15 function 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 for u 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