Bootstrap navbar - menu bez przeładowania strony

Question

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> 

 

Answer 1

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/

Comments

tak, strony już mam. myślałem że bootstrap coś takiego obsługuje.

Dzięki za pomoc.

---

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?

---

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?

---

Heh, chciałem porównać, ale widzę, że zdjęli stronę :/