サイドリンクバーをアコーディオンメニューにする

前回に引き続き、SharePoint2013のサイドリンクバーのプチカスタマイズです。

サイドリンクバーもエントリ数や第2階層のリンクがふえてくると、画面から見切れてしまうことがあります。
そんなとき、第1階層でアコーディオンで開閉可能にできるといいですよね。

で、jQueryを使ってサイドリンクバーをアコーディオンにする以下のポストを見つけ、
Simple Expand/Collapse for the Quick Launch in SharePoint 2013 or SharePoint Online | Marc D Anderson’s Blog.

これでOK！と思ってたんですが、このコードだとサイドリンクバーのエントリをクリックして他ページに遷移すると、開閉状態がチャラになって全部閉じてしまうという・・・
ちょっと使い勝手がよくないです。

そこで、クッキーで開閉状態を覚えさせるようにしてみました。
クッキーの操作には、jquery.cookie.jsというプラグインを使用しています。

※jquery.cookie.jsの使い方などはこちらをご参考に・・・
jquery.cookie.jsの使い方と簡単なサンプルを紹介します｜Webpark.

ソースコードです。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style>
.ms-core-listMenu-verticalBox li > span.menu-item {
    cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
    var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > span, div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a");
    topLevelLinks.prepend("<span class='accordion'><i class='fa fa-caret-right'></i></span>");
    topLevelLinks.closest("li").find("> ul").hide();

    var idx = 0;
    var key;
    topLevelLinks.each(function () {
        key = "expandable" + idx;
        $(this).attr("id", key);
        if ($.cookie(key) == "open") {
            $(this).closest("li").find("> ul").show();
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-down'></i></span>");
        }
        idx = idx + 1;
    });

    topLevelLinks.click(function(e) {
        e.preventDefault();
        var childUl = $(this).closest("li").find("> ul");
        var isVisible = childUl.is(":visible");        
        if(isVisible) {  
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-right'></i></span>");
            childUl.slideUp();
            $.cookie($(this).attr('id'), "close", { path: '/' });
        } else {
            $(this).find(".accordion").replaceWith("<span class='accordion'><i class='fa fa-caret-down'></i></span>");
            childUl.slideDown();
            $.cookie($(this).attr('id'), "open", { path: '/' });
        }
    });
});
</script>

上記のコードを、スクリプトエディタでページに埋め込みます。
できあがりはこんな感じ。

参考にしていただけるとうれしいです♪

広告