2014年11月 – Me & SharePoint

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

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

＊コレ↓です

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

ソースコードです。これをコンテンツエディタ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>

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

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

// これだとグルーピングしたビューではダメ $('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; } );

月: 2014年11月

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

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