Seitennavigation mit JavaScript

[ineedmny]

Hallo zusammen,

ich habe meine Webseite jetzt auf eine Seitennavigation mit JS umgebaut.

function showPage(page) {
    if(page == "kontakt")
    {
        $("#banner").html("<h2>Kontakt</h2>"),
        $("#content").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
        $("#content").load("pages/kontakt.html", function() {
            $("#content").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400)
        });
    });
    }
}

ich rufe diese Funktion folgendermaßen auf:

<a class="link" href="#!/kontakt" onclick="showPage('kontakt');">Kontakt</a>

Jetzt frage ich mich nur, wie ich weiter vorgehen soll. Die Navigation funktioniert soweit, aber wenn ich zurück gehe, wird nur die letzte URL in der Adresszeile angezeigt, aber die Seite wird nicht geladen.

Wie funktioniert sowas? Ich dachte mir, dass ich die URL beim zurückgehen auslesen könnte und dann den Namen der Seite in der URL wiederrum verwenden kann, um diese Seite zu laden.

Wie macht ihr das?

Und kann mir jemand sagen, wie das Bezeichnet wird? --> #!/kontakt
Hab das so aus einem Tutorial übernommen, wurde aber nicht weiter erklärt.

Danke schonmal!

 

[LeCub]

Ich kenne dein Projekt nicht aber wieso baust du nicht einfach einen Onepager mit einer ganz normalen Navigation?

 

[ineedmny]

Du meinst mit Sprungmarken? Ist mir bei der Größe der Webbseite zu unübersichtlich. Ich will den Inhalt lieber einzeln anzeigen.


Gesendet von iPad mit Tapatalk

 

[Tronjer]

Wie funktioniert sowas? Ich dachte mir, dass ich die URL beim zurückgehen auslesen könnte und dann den Namen der Seite in der URL wiederrum verwenden kann, um diese Seite zu laden.

Wie macht ihr das?

Das an die URL gehängte '/#/foo' soll ja verhindern, dass die komplette Seite neu geladen wird. Diese Notation verwenden SinglePage-Apps, die ihren Content per AJAX nachladen. Was du suchst ist:
https://angularjs.org/

ergänzend dazu:
https://material.angularjs.org/latest/#/

das liefert dir nicht nur ein responsives CSS-Framework, sondern auch deine Sidenavigation als Widget gleich mit.

 

[ineedmny]

Danke Tronjer! Genau das hat mir gefehlt. Der Begriff Routen war mir neu.
Ich bin jetzt letztendlich auf die Seite hier gekommen: https://angularjs.de/artikel/navigation-menu-bootstrap

Bootstrap verwende ich schon, also perfekt!

 

[Tronjer]

Wenn das für dich neu ist, solltest du den Artikel lieber zur Seite legen und dir das offizielle Tutorial anschauen. Dort wird das Thema Routing auf einfache Weise erklärt, während der Artikel die Navigation in einer Direktive kapselt. Was zwar durchaus sinnvoll ist, den Einstieg aber unnötig kompliziert.

Es reicht für den Anfang völlig aus, wenn du ein paar Routen mit den dazugehörigen Views in Angular erstellst und eine Bootstrap Navi mit normalen HTML-Links in die index.html einbindest. Auch das Hervorheben der aktiven Seite in der Navbar lässt sich mit drei Zeilen JavaScript innerhalb des Controllers bewerkstelligen.

 

[ineedmny]

Bin ganz gut damit klar gekommen. Ich hab die Navigation jetzt in meine Seite eingebaut und es funktioniert 1A!

Jetzt hab ich nur das Problem, dass beim Klick auf den Zurück-Button, die vorherige Seite angezeigt wird.
Ich hab auf einer Seite aber mehrere "Schritte", die mit einem "weiter"-Button durchlaufen werden müssen.
Wenn jetzt in einem Schritt der Zurück-Button geklickt wird, springt er auf die vorherige Seite.

Wie kann ich jetzt mit jQuery den Button abfangen?

Ich hab das hier gefunden:

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});

(http://stackoverflow.com/questions/18211984/how-to-control-back-button-event-in-jquery-mobile)

Die Funktion wird aber nicht ausgeführt. Kannst du mir da weiter helfen?

 

[Tronjer]

Ich hab auf einer Seite aber mehrere "Schritte", die mit einem "weiter"-Button durchlaufen werden müssen.

Definiere das mal näher.

 

[ineedmny]

    $('#bt_next_12').mousedown(function() {
        showStep(1, 2);
    });
  
    $('#bt_next_23').mousedown(function() {
        showStep(2, 3);
    });

    $('#bt_next_34').mousedown(function() {
        showStep(3, 4);
    });
  
    function showStep(from, to) {
            var from_step = '#step' + from;
            var to_step = '#step' + to;
          
            $(from_step).fadeOut(function(){
                $(to_step).fadeIn();
            });
    }

Wenn der jeweilige "weiter"-Button gedrückt wurde, wird die Funktion "showStep" aufgerufen und der Übergangseffekt startet.

Wenn ich jetzt den zurück-Button abfange und die Funktion "rückwärts" aufrufe, also von Schritt 2 zu 1, dann wird ja wieder das vorherige Div angezeigt!? :-/

 

[Tronjer]

Okay, also die gute Nachricht lautet, dass du jQuery in Angular weiterverwenden kannst, die schlechte, dass Angular eine andere Philosophie verfolgt. Du schreibst nicht reines HTML und stattest es anschließend mit Events aus, sondern legst Direktiven und Events direkt in HTML-Tags. Außerdem wird aus dem $('#foo') von jQuery ein angular.element('#foo').

Eine Route liefert genau eine Seite aus. Falls diese Seite unterschiedliche Zustände (Status) haben soll, kannst du diese per $scope-Variablen setzen und in die URL pushen:

Ein korrekter Ansatz mit Angular:

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="container" ng-controller="MyController">
      <button ng-click="clickMe('step_1')">Click Me</button>
      <p class="steps" ng-show="step_1">Step 1</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-route.js"></script>

    <script>
      var app = angular.module('myApp', []);

      app.controller('MyController', ['$scope', '$location', function($scope, $location){
        $scope.clickMe = function(step) {
          $scope[step] = true;
          $location.search('step', step);
        };
      }]);
    </script>
  </body>
</html>

p.steps wird nur angezeigt, wenn die Variable $scope.step_1 = true ist. Das Event ng-click() übergibt einen String, der dynamisch Variable und Query-Params für die URL erzeugt.

Ergänzend sei hinzugefügt, dass es als zusätzliche Plugin, um unterschiedliche Status (Stati?) innerhalb derselben Route abzufragen, den Angular-UI-Router gibt. Damit habe ich allerdings noch keine Erfahrungen gesammelt.

 

[ineedmny]

Danke nochmal! Hat mir wunderbar weiter geholfen.
Ich hab jetzt den ui-Router eingebaut und damit funktioniert es perfekt.
Beschäftige mich jetzt mit der Doku von Bootstrap.

Übrigens: Status ;-)