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>

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

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

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中