5

java script を使用して、クライアント側でブレッドクラムを動的に作成したいと考えています。ブレッドクラムは、次のようにナビゲーション中 にユーザーがたどるパスになります:ホーム > 私たちについて > 私たちの歴史..

アンカー タグは、ユーザーがナビゲートする順序で各ページに生成されます。

サーバー側のテクノロジーを使用してこれらのブレッドクラムを簡単に作成できるようになりましたが、クライアント側の各ページで動的に生成したいと考えています。今、私はそれを実装する方法を正確に知りません。

私の頭の中のいくつかの論理は次のとおりです。

  1. 名前 と値のペアを使用して Java スクリプトでオブジェクト型変数を作成します。名前は現在のページの名前で、値はそのページの URL です。

  2. あるページから別のページに移動するときに、クエリ文字列を使用してこのオブジェクト変数を渡します。

  3. 次に、2番目のページで、クエリ文字列からそのオブジェクト変数を取得し、そのオブジェクトから名前と値のペアを抽出し、それを使用してアンカーを作成し、ターゲットの div (プレースホルダー) に追加します。

  4. 再びユーザーが別のページに移動すると、オブジェクト変数の最後に現在のページの名前と値のペアとともに、前 のすべてのページの名前と値のペアを追加し、クエリ文字列を使用して次のページに渡します。

  5. 次のページで同じことを行い、アンカーを作成します。

html5クライアント側ストレージを次のように使用して、 ここで得た類似のもののいくつか: 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>

ただし、ここではハイパーリンク付きのアンカーを作成する代わりに、単純なテキストを作成していますが、ブレッドクラムをアンカーにして、それぞれのページにハイパーリンクする必要があります。

私はJavaスクリプトが初めてで、これを実装する方法がわかりません。これに対するより良いロジックと解決策があれば教えてください。

前もって感謝します。

4

2 に答える 2

2

ブレッドクラムにアイテムを追加するときは、リンクとして追加するのではなく、テキストを追加するだけであり、li 要素にバインドしたクリック イベントは渡されません。最後に、これらのブレッドクラムを使用するためのいかなる種類の href も提供していません。

このようなものを試して、それらのリンクと各ページのスクリプト ファイルを含む 4 ページに配置します。

<div id="breadcrumb"></div>
<ul id="navigation_links">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

JS

$(document).ready(function(){
    bindEventToNavigation();
    showBreadCrumb(); //Show the breadcrumb when you arrive on the new page
});

function bindEventToNavigation(){
    $.each($("#navigation_links > li > a"), function(index, element){
        $(element).click(function(event){
            breadcrumbStateSaver($(this).attr('href'), $(this).text());
            showBreadCrumb();
        });
    });
}

function breadcrumbStateSaver(link, text) {
    if (typeof (Storage) != "undefined") {
        if (sessionStorage.breadcrumb) {
            var breadcrumb = sessionStorage.breadcrumb;
            sessionStorage.breadcrumb = breadcrumb + " >> <a href='" + link + "'>" + text + "</a>";
        } else {
            sessionStorage.breadcrumb = "<a href='" + link + "'>" + text + "</a>";
        }
    }
}

これは、最初のページの後のページにのみリンクを配置します。したがって、代わりに使用できます

$(document).ready(function () {
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

各ページの上部にあり、クリックする代わりにパンくずリストに自動的に追加します。他の関数/イベントを実行するためにクリックが必要な場合は、アンカーを使用する代わりに、イベントをバインドできる ID を持つ span/li/div タグを使用できます。

最後に、これはパンくずの重複を止めるものではないため、リンクとテキストを配列に保存し、そこからパンくずを作成することを検討することをお勧めします。

于 2013-11-12T22:46:23.663 に答える
1

@Lukeが言ったように、パンくずリストがナビゲートするためのリンクを追加していません。次のようにテキストとリンクを保存する必要があります。

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
        sessionStorage.locations = sessionStorage.locations + ";" + link; //use any delim you prefer
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

テキストとリンクの両方を 1 つのストレージ変数に追加し、区切り文字で分割して抽出するだけです!

クリック時にリンクをキャプチャする代わりに、ページが からロードされたときに実際にリンクを取得できますdocument.location.href。テキストはdocument.title、サーバーで設定される属性から取得できます。だから、document.ready

$(document).ready(function(){
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

内のブレッドクラムを更新するには<ul>:

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    for(let index in crumbs)
        $("#navigation_links").append($("<li><a href="+links[index]+">"+ crumbs[index] +"</a></li>"));
}

このようにして、ユーザーが Web サイトをナビゲートするたびに記録されます。ユーザーがパンくずリストをナビゲートして、パンくずリストをクリックして元のページに戻るようにする場合は、上記のコードを次のように変更します。

function showBreadCrumb(){
    let crumbs = sessionStorage.breadcrumb.split(";");
    let links = sessionStorage.locations.split(";");
    let crumbindex = parseInt(sessionStorage.crumbindex);
    for(let index in crumbs){
        $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbindex ? "active" : "") + "' href='"+links[index]+"' data-node='"+index+"'>"+ crumbs[index] +"</a></li>")); //data-node will help in retrieving the index and class will be set to active for selected node
    }
}

また、次を追加します。

$(document).ready(function(){
    $('#navigation_links').on('click', 'li a.crumb', function(){
        if (typeof (Storage) != "undefined") {
            sessionStorage.crumbindex = $(this).data('node');
            sessionStorage.navlinkclicked = "true"; //This will prevent from adding breadcrumb again
        }
    });
    breadcrumbStateSaver(document.title, document.location.href);
    showBreadCrumb();
});

ノード インデックスを使用すると、次のようにブレッドクラムを挿入できます。

function breadcrumbStateSaver(link, text) {
if (typeof (Storage) != "undefined") {
    if (sessionStorage.breadcrumb) {
        if (sessionStorage.navlinkclicked && sessionStorage.navlinkclicked=="true") {
            sessionStorage.navlinkclicked = "false"; //prevent changes or you can remove the rest of the crumbs from sessionStorage.breadcrumb and locations using a for loop
        }
        else {
            if(sessionStorage.crumbindex && sessionStorage.crumbindex!=-1) {
                let crumbs = sessionStorage.breadcrumb.split(";");
                let links = sessionStorage.locations.split(";");
                let crumbindex = parseInt(sessionStorage.crumbindex);
                sessionStorage.breadcrumb = crumbs[0];
                sessionStorage.locations= links[0];
                for(let index in crumbs){
                    if(index==0) continue;
                    sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + crumbs[index];
                    sessionStorage.locations= sessionStorage.locations + ";" + links[index];
                    if(index==crumbindex) break;
                }
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //insert the new link after crumbindex location
                sessionStorage.crumbindex = -1;
            }
            else{
                sessionStorage.breadcrumb = sessionStorage.breadcrumb + ";" + text;
                sessionStorage.locations = sessionStorage.locations + ";" + link; //keep appending
            }
        }
    }
    else {
        sessionStorage.breadcrumb = text;
        sessionStorage.locations = link;
    }
}

ユーザーのトラバーサルを記録するのではなく、単にナビゲーション用のブレッドクラムが必要な場合は、window.location.pathname. ページがインデックス ページを含む適切な階層に格納されている場合は、URL パスを分割し、それに応じて showBreadCrumb() を更新するだけです。セッションストレージを使用する必要はありません!

    function showBreadCrumb(){
        let crumbs = window.location.pathname.split("/");
        for(let index=0; index<crumbs.length-1; index++){
            let text = crumbs[index];
            if(index==0) text = "Home";
            $("#navigation_links").append($("<li><a class='crumb"+ (index==crumbs.length-2? "active" : "") +"' href='"+buildRelativeLink(crumbs.length-index)+"'>"+ text +"</a></li>"));
        }
    }
    function buildRelativeLink(level)
    {
        level = level - 1;
        let link="";
        for (let i=1; i<level; i++)
        {
            link=link+ "../"; //Used to navigate one level up towards parent
        }
        return link;
    }
于 2020-07-02T01:00:18.120 に答える