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
spacek145:
Co jí třeba uložit do cookies s platností do zavření prohlížeče?
spacek145
Profil
To je hezké, ale jak na to? Kam mam co dopsat?
janbarasek
Profil
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
A takto se čtou hodnoty:
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
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_cookies 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();
}

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: