Skocz do zawartości

Przełączenie strony w zakładkach menu bez odświeżania w Javascript


Mvrosking
 Udostępnij

Rekomendowane odpowiedzi

Cześć, tworzę stronę i chciałem pójść o krok do przodu i wprowadzić płynne przechodzenie stron. Chodzi mi o to że nie trzeba odświeżać strony, aby przechodzić pomiędzy zakładkami (na pewno wiecie o co chodzi). A więc wszystko wysłałem na stronę www i niestety nie działa. Cały kod na stronie; Nazwa strony - serwer RPG dla serwera

Odnośnik do komentarza
Udostępnij na innych stronach

NAGŁÓWEK I TREŚĆ

Przejście płynne

<head>
	<meta http-equiv="sposób" content="blendTrans(Duration=s)" />
</head>

Filtr graficzny

<head>
	<meta http-equiv="sposób" content="revealTrans(Duration=s,Transition=n)" />
</head>

sposób

  • "Page-Enter" - graficzne przejście nastąpi przy wchodzeniu na stronę
  • "Page-Exit" - przejście nastąpi przy wyjściu
  • "Site-Enter" - przejście przy wejściu z innej domeny (adresu)
  • "Site-Exit" - przejście przy wyjściu do innej domeny

s

czas trwania przejścia (w sekundach)

n

numer filtru graficznego (liczba od 0 do 23):

0 - Zmniejszający się prostokąt (Box in)

1 - Zwiększający się prostokąt (Box out)

2 - Zmniejszające się koło (Circle in)

3 - Zwiększające się koło (Circle out)

4 - "Wytarcie" w górę (Wipe up)

5 - "Wytarcie" w dół (Wipe down)

6 - "Wytarcie" w prawo (Wipe right)

7 - "Wytarcie" w lewo (Wipe left)

8 - Pionowa zasłona (Vertical blinds)

9 - Pozioma zasłona (Horizontal blinds)

10 - Szachownica w prawo (Checkerboard across)

11 - Szachownica w dół (Checkerboard down)

12 - Losowy rozkład (Random dissolve)

13 - Połączenie w pionie (Split vertical in)

14 - Rozłączenie w pionie (Split vertical out)

15 - Połączenie w poziomie (Split horizontal in)

16 - Rozłączenie w poziomie (Split horizontal out)

17 - "Wytarcie" w lewy-dolny róg (Strips left down)

18 - "Wytarcie" w lewy-górny róg (Strips left up)

19 - "Wytarcie" w prawy-dolny róg (Strips right down)

20 - "Wytarcie" w prawy-górny róg (Strips right up)

21 - Losowe poziome smugi (Random bars horizontal)

22 - Losowe pionowe smugi (Random bars vertical)

23 - Efekt losowy - jeden z powyższych (Random)

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
10 minut temu, markonafide napisał:

Cześć, tworzę stronę i chciałem pójść o krok do przodu i wprowadzić płynne przechodzenie stron. Chodzi mi o to że nie trzeba odświeżać strony, aby przechodzić pomiędzy zakładkami (na pewno wiecie o co chodzi). A więc wszystko wysłałem na stronę www i niestety nie działa. Cały kod na stronie; Nazwa strony - serwer RPG dla serwera

Poczytaj o Ajax lub zrób to na zwykłym CSS + zmiana aktywnej zakładki przez JS + update linka przez JS.

Ajax będzie na pewno bardziej odpowiednim wyjściem w tej sytuacji. Z wersją w CSS jest mniej roboty i też na pewno nie jest to złe wyjście, jeżeli dobrze się to rozwiąże.

Odnośnik do komentarza
Udostępnij na innych stronach

8 minut temu, arces napisał:

Nie masz tego pliku:

http://markmoto.com.pl/shopmc/scripts/js/jquery.ba-hashchange.min

Masz też załączony jQuery SLIM, który nie posiada wszystkich funkcji i to też może prowadzić do błędów.

Dobra, teraz plik jest, ale nadal nie działa to... w adresie strony pojawia się że zmieniono adres na ..../#shop.php, a strona nie wczytuje tych danych

Nazwa strony - serwer RPG dla serwera

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Domyślam się, że wersja jQuery Slim nie rozumie tego:

$mainContent.find(...).fadeOut is not a function

W konsoli masz też błąd dotyczący Internet Explorera:

Cannot read property 'msie' of undefined w pliku, który teraz dodałeś

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
23 minuty temu, BlackIce napisał:

A po co tu pchać jQ? Wyszukaj hasła 'tabs pure js' i znajdziesz to czego szukasz.

Tutaj można spokojnie samym CSSem pojechać + trochę JS, ale jak widać wyżej to proponowałem, to tylko napisał, że kod ma, ale mu nie działa, więc nie przegadasz @BlackIce

Odnośnik do komentarza
Udostępnij na innych stronach

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $(".container"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#main-content")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #main-content", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

zmienna $mainContent = $("#main-content");

Ale w 22 lini mamy $mainContent.find("#main-content") to jest bez sensu

Edytowane przez vader
zly opis
Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×