前回に引き続き、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>
上記のコードを、スクリプトエディタでページに埋め込みます。
できあがりはこんな感じ。
参考にしていただけるとうれしいです♪
広告
基本な質問ですみませんが、スクリプトエディタはどうやって開きますか?
こんにちは、コメントありがとうございます!
スクリプトエディタはwebパーツの一種なので、あらかじめページに設置しておく必要があります。
スクリプトエディタ webパーツの設置方法は、以下のページなどをご参考にしてください。
http://sharepointmaniacs.com/archives/5227