• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap navbar - menu bez przeładowania strony

Object Storage Arubacloud
+1 głos
1,106 wizyt
pytanie zadane 18 czerwca 2015 w JavaScript przez mowmiheniek Stary wyjadacz (11,900 p.)

Hej,
Zrobiłem menu strony przy pomocy navbar w bootstrapie.
Teraz chciałbym aby strony pokazywały się bez przeładowania. Nie umiem sobie z tym poradzić.
Czy jest to wogóle możliwe w bootstrapie? Czy muszę każdej stronie zrobić to samo menu z inną aktywną zakładką?

 <!-- Zakładki -->
                <nav class="navbar navbar-default">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                        <a class="navbar-brand" href="#home.php" data-toggle="tab"><span class="glyphicon glyphicon-header" aria-hidden="true"></span>ome</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                      <ul class="nav navbar-nav" role="tablist">
                          <li><a href="#admin_order" data-toggle="tab">Production</a></li>
                        <li><a href="#setup" data-toggle="tab">Setup</a></li>
                        <li><a href="#stock"  data-toggle="tab">Stock</a></li>
                        <li><a href="#raports"  data-toggle="tab">Raports</a></li>
                        <li><a href="#customer"  data-toggle="tab">Customer</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
                         <li><a href="logout.php">Log out</a></li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <div class="tab-content">
                  <div class="tab-pane active" id="home">home</div>
                  <div class="tab-pane" id="admin_order">produktion</div>
                  <div class="tab-pane" id="setup">setup</div>
                  <div class="tab-pane" id="stock">stock</div>
                  <div class="tab-pane" id="raports">raports</div>
                  <div class="tab-pane" id="customer">customer</div>
                </div>                    
         
        </div> 

 

1 odpowiedź

+3 głosów
odpowiedź 18 czerwca 2015 przez Comandeer Guru (602,560 p.)
wybrane 18 czerwca 2015 przez mowmiheniek
 
Najlepsza
I tak powinieneś te podstrony zrobić! W końcu gdzieś muszą istnieć. Samo przechodzenie bez przeładowania można zrobić przy pomocy np. pjaxa https://github.com/defunkt/jquery-pjax

Nie wiem czy nie prościej będzie w Twoim przypadku przygotować podstrony i zrobić przejścia jak tutaj: http://hotlab.pl/ przy pomocy tego skryptu: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
komentarz 18 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)
tak, strony już mam. myślałem że bootstrap coś takiego obsługuje.

Dzięki za pomoc.
komentarz 18 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)
Oglądam tą drugą metodę i naszły mnie pewne wątpliwości.
Matoda ta potrzebuje dołączenia plików styli i javascriptu, czy nie beda się gryzły z stylami i javascriptem z bootstrapa?
komentarz 18 czerwca 2015 przez mowmiheniek Stary wyjadacz (11,900 p.)

Porównując kod tej stony: http://hotlab.pl do mojego kodu który umieściłem w pytaniu, dochodzę do wniosku, że wystarczy w poszczególne DIV-y: 
<div class="tab-pane" id="">kod podstrony</div>
wklejć cały kod podston i będzie to samo.
Mam racje?

komentarz 18 czerwca 2015 przez Comandeer Guru (602,560 p.)
Heh, chciałem porównać, ale widzę, że zdjęli stronę :/

Podobne pytania

0 głosów
1 odpowiedź 332 wizyt
pytanie zadane 15 sierpnia 2019 w Nasze projekty przez suciorek Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 142 wizyt
pytanie zadane 7 listopada 2019 w HTML i CSS przez Avalansz Użytkownik (580 p.)
0 głosów
1 odpowiedź 165 wizyt
pytanie zadane 20 października 2019 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)

92,691 zapytań

141,603 odpowiedzi

320,103 komentarzy

62,051 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...