Erstellen Paniermehl dynamisch auf client-Seite mit javascript

Ich will Paniermehl dynamisch auf client-Seite mit java-script. Die Semmelbrösel werden die Weg, gefolgt von Benutzer während der navigation:
Home > über uns > unsere Geschichte..

Den Anker-tags erzeugt werden, die auf jeder Seite in der Sequenz, in der der Benutzer navigieren.

Nun, kann ich diese breadcrumbs mit server-side-Technologie, die leicht, aber ich wollen, erzeugen Sie dynamisch auf jeder Seite auf der client-Seite.
Jetzt weiß ich nicht genau, wie es zu implementieren.

Einige Logik in mein Geist ist wie:

  1. Erstellen Sie eine - Objekt variable vom Typ in java-script mit einer Namen
    und Wert-paar wo Namen ist die name des aktuellen Seite
    und Wert ist die url dieser Seite.

  2. Nun übergeben Sie dieses Objekt
    Variablen, die mit query-string beim navigieren von einer Seite zur
    andere.

  3. Dann in die zweite Seite bekommen, die Objekt-Variablen aus dem query-string
    und extrahieren Sie die name-Wert-paar aus Objekt und dann mit
    das erstellen der Anker und fügen Sie es auf die gezielte div (Platzhalter).

  4. Wieder, wenn der Benutzer geht auf eine andere Seite fügen Sie die name-Wert-Paare
    für alle die vorherigen Seiten zusammen mit der name und Wert-paar für die aktuelle Seite die Letzte in der Objekt-variable und pass es auf der nächsten Seite
    mit query-string.

  5. Nun in der nächsten Seite das gleiche tun und anlegen Anker.

Einige was ähnliches hab ich hier mit html5 client-side storage:
html:

<ul id="navigation_links">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
</ul>

js:

$(document).ready(function(){
    bindEventToNavigation();
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(event.currentTarget).html());
            showBreadCrumb();
        });
    });
}


function breadcrumbStateSaver(text){
    //here we'll check if the browser has storage capabilities
    if(typeof(Storage) != "undefined"){
        if(sessionStorage.breadcrumb){
            //this is how you retrieve the breadcrumb from the storage
            var breadcrumb = sessionStorage.breadcrumb;
           sessionStorage.breadcrumb = breadcrumb + " >> "+text;
        } else {
           sessionStorage.breadcrumb = ""+text; 
        }
    }
    //if not you can build in a failover with cookies
}

function showBreadCrumb(){
     $("#breadcrumb").html(sessionStorage.breadcrumb);   
}
<div id="breadcrumb"></div>

aber hier anstatt Hyperlink-Anker ist die Erstellung von einfachen text, während ich möchte die breadcrumbs werden Anker und hyperlinks zu Ihren jeweiligen Seiten.

Ich bin neu in java script und weiß nicht, wie diese umzusetzen ist.
Wenn Sie irgendwelche bessere Logik und die Lösung für dieses bitte mir mitteilen.

vielen Dank im Voraus.

InformationsquelleAutor Saurabh Palatkar | 2013-09-25

Schreibe einen Kommentar