SharePoint2010にコンテンツエリア拡大ボタンをつけてみた

SharePointのヘッダー部分や、サイドリンクバーって意外と場所をとりますよね。
なんで、コンテンツがもりだくさんのページの場合、もっと大きな画面で見せたい時があると思います。

そういうニーズを受けてかなのか、SharePoint2013なら、コンテンツエリアを拡大して見せるボタン(*)が標準であるのですが、残念ながら2010にはありません。

* コレ↓です
20141128

というわけで、自前で作ってみました。
動作イメージはこんな感じです。画面右下、「全画面」ボタンを押すとコンテンツエリアがぐぐっとひろがります。
20141128

ソースコードです。これをコンテンツエディタwebパーツでページにぺたっと貼ればOKです。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<style type="text/css">
  .screen-change
  {
      position: fixed;
      bottom: 20px;
      right: 80px;
  }

  .screen-change a
  {
      background: #666;
      text-decoration: none;
      color: #fff;
      width: 120px;
      padding: 8px 0;
      text-align: center;
      display: block;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      opacity: 0.8;
      filter: alpha(opacity=80); /* IE lt 8 */
      -ms-filter: "alpha(opacity=80)"; /* IE 8 */
  }

  .screen-change a:hover
  {
      text-decoration: none;
      background: #222;
  }
</style>
<script>
  $(function(){
    $(document.body).append('<p id="only-content-area" class="screen-change"><a href="#">全画面表示</a></p><p id="default-screen" class="screen-change"><a href="#">元に戻す</a></p>');
    $("#default-screen").hide();
    $(".screen-change").click(function() {
      $('#s4-titlerow, #s4-leftpanel, #RibbonContainer-TabRowLeft, .ms-cui-tts').toggle('slide', '', 500);
      var hide = $('#default-screen').css('display');
      if(hide == 'none'){
        $('.s4-ca').css('margin-left', '0px');
      } else {
        $('.s4-ca').css('margin-left', '155px');
      };
      $("#only-content-area, #default-screen" ).toggle();
    });
  });
</script>

リボンメニューが表示されている状態で拡大するとあやしい動きになってしまうので、リボンメニューを表示させられるツールバーのボタンやタブも軒並み隠してますが、それならいっそツールバー自体を隠しちゃってもよかったかも。
そのへんはお好みで調整してください。

ふと、思ったのですが、これ応用したら印刷用画面としても使えるかも・・・?

広告

ドキュメントライブラリのファイルがPDFだったら別窓で開く

ひさびさの更新になってしまいました。気が付けば、今年も残すところあと2か月、巷には早くもクリスマスのイルミが・・・という季節になってしまいました。早すぎるだろ。

さて、SharePoint2010のお話です。

ドキュメントライブラリでPDFを入れている場合、該当のファイル名をクリックするとブラウザの同じウィンドウ内で開いてしまいます。
(ブラウザでPDFを開く設定にしていれば、ですが。)
その時、うっかりタブを閉じたりすると元のライブラリに戻れなくなっちゃったりします。
地味に不便ですよね。

で、PDFファイルの場合だけ選択的に別窓で開かせるスクリプトを書いてみました。jQuery使ってます。

// これだとグルーピングしたビューではダメ
$('a[href$=".pdf"]').each(function(){
	$(this).removeAttr('onclick');
});
//無理やりだけど・・・
$(document).on('mouseover', 'a[href$=".pdf"]',
	function(eo) {
		$(eo.target).removeAttr('onclick');
	}
);
//クリックイベントを設定
$(document).on('click', 'a[href$=".pdf"]',
	function(eo) {
		window.open(eo.target.href, '_blank');
		return false;
   	}
);

ドキュメントライブラリのリストビューだと、クリック時 onclick属性に設定されてるファンクションが先に動いてしまうので、まずそいつを削除する、しかもmouseoverイベントで・・・という荒ワザをやっております。
こんなことしていいかよくわかりませんけど、よくない気もしますけど、もっといいやり方があったら教えていただけるとうれしいです。

また、グルーピングしたビューの場合アイテムが動的に追加されるため hoge.click(function… みたいな書き方は通用しません。
で、こちらなど参考にしつつ、
外部リンクを別窓で開くJavaScriptを改善した – rakugaki-box.net.
上記コードに落ち着きました。

リンクリストで、外部リンクは別窓で開かせたい!なんて場合にも応用できそうですね。