Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Porada w sprawie skryptu jquery
Pozycjonowanie i Optymalizacja > Projektowanie stron > HTML i CSS
Szymon80
Witam.

Mam mały problem z zakładkami z tej strony

http://jqueryfordesigners.com/jquery-tabs/

Bardzo fanjny i prosty skrypt jquery, ale ma małą wadę. Po przełądowaniu strony nie zapamiętywało na której zakładce była ustawiona strona.
Ale znalazłem w komentarzach wersję która taką funkcję posiada:

KOD
  $(function () {
          var tabContainers = [];
          $('ul.tabs a').each(function () {
            // note that this only compares the pathname, not the entire url
            // which actually may be required for a more terse solution.
              if (this.pathname == window.location.pathname) {
                  tabs.push(this);
                  tabContainers.push($(this.hash).get(0));
              }
          });
          // sniff for hash in url, and create filter search
          var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
          tabs.click(function () {
              // hide all tabs
          tabContainers.hide().filter(this.hash).show();
              // set up the selected class
              $(tabs).removeClass('selected');
              $(this).addClass('selected');
              return false;
          }).filter(selected).click();
      });


Nie wiem dlaczego, ale teraz zakładki nie chcą się chować jedna pod drugą.
Poniżej podaje linki do skryptu orginalnego (tabs1) i z modyfikacją (tabs2)

Tabs1
http://dobry-katalog.cba.pl/x/tabs1.html

Tabs2
http://dobry-katalog.cba.pl/x/tabs2.html

Jak ktoś ma pomysł jak to naprawić to będę wdzięczny. Ja walcze z tym już kilka ładnych godzin i nie wpadłem na rozwiązanie.
A poniewąż js i jquery nie znam za bardzo to błądzę jak ślepy w ciemnościach.

Proszę o podpowiedz.
sorrow
OnClick ----> Setcookie TAB = [ Aktualna karta ]


Funkcja on Domready -> pobierz ciastko Getcookie TAB -> pokaz dana kartę


Taki koncept, 4 rano może jutro napisze kod smile.gif
Szymon80
mowisz o jakimś nowym kodzie/skrypcie ?
Mi bardziej zależy na naprawieniu tego z któego korzystam.
sorrow
Potrzebujesz jeszcze plugina JQuery Cookie http://plugins.jquery.com/project/cookie

<script type="text/javascript" charset="utf-8">
$(function () {
if ( $.cookie("tab") != 'undefined' ) {
zaznacz = $.cookie("tab");
$("a[href='"+ zaznacz +"']").addClass('selected');

} else zaznacz = ':first';


var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(zaznacz).show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$.cookie("tab", this.hash);

$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(zaznacz).click();
$(zaznacz).addClass('selected');
});
</script>
Szymon80
Dzięki wielkie, działa prawie dobrze. Problem teraz polega na tym że ktoś kto nie był jeszcze na danej stronie i nie mam cookie zapisanego u siebie to nie zobaczy zadnej zakładki.

przykład:
http://dobry-katalog.cba.pl/x/tabs3.html
dobrze by było aby domyślnie pokazywała się pierwsza zakładka.

Nie dało by się jednak tak przerobić tego skryptu z mojego pierwszego postu, aby można było skierować kogoś linkiem od razu na daną zakłądkę ? Czyli z odpowiednim parametrem na końcu adresu ?
sorrow
else zaznacz = ':first';

Zmień to na swoja wartość
Szymon80
ale ja mam właśnie wartość "first" więc powinno działać. Zresztą w przykładzie jest pokazane.
sorrow
KOD
if ( $.cookie("tab") != undefined || $.cookie("tab") != null  ) {
Szymon80
Ok wielkie dzięki za pomoc.

Szymon80
Jeszcze jedno pytanko.
@sorrow, Dzieki za pomoc w powyższym skrypcie, przyda się z pewnością na mojej stronie, jednak trochę przypadkiem udało mi się uzyskać taki sam efekt w skrypcie z pierwszego wątku poprzez małą modyfikację .

Teraz skrypt wygada tak:

KOD
$(function () {
          var tabContainers = [];
          $('ul.tabs a').each(function () {
              if (this.pathname == window.location.pathname) {
                  tabs.push(this);
                  tabContainers.push($(this.hash).get(4));
              }
          });
          var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
          var tabContainers = $('div.tabs > div');
          $('div.tabs ul.tabNavigation a').click(function () {
          tabContainers.hide();
                  tabContainers.filter(this.hash).show();
              $(tabs).removeClass('selected');
              $(this).addClass('selected');
              return false;
          }).filter(selected).click();
      });


Przykłąd działania można zobaczyć tutaj >>> http://dobry-katalog.cba.pl/x/tabs2.html
Co zmienić w powyższym skrypcie lub może w stylach (albo nawet w jquery w pliku jq132.js ) aby wyeleminować skakanie za każdym razem po wcisnięcu którejs zakładki ? Efekt taki jest na http://dobry-katalog.cba.pl/x/tabs1.html tam układ strony jest identyczny i problem pewnie tkwi w skrypcie.
Jeżeli ktoś dostrega gdzie może być problem to prosze o radę.

pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2012 Invision Power Services, Inc.