MOSS2007页面UI定制（无代码上手）

一、 问题需求：

公司同仁使用MOSS2007平台，觉得MOSS的界面不够友好，

主要有一下几个方面：

<1> 查看网站所有内容时候，左边的Menu区域不要显示。

<2> 查看清单信息时候，左边的Menu区域不要显示。

<3> 查看文件库信息时候，左边的Menu区域不要显示。

<4> 新建网站内容时候，左边的蓝色区域不要显示。

<5> 新建清单Item时候，左边的Menu区域不要显示。

<6> 新建清单Item时候，输入栏目区域的宽度width要设置为100%。

二、解决办法：

方法1：js方法

操作步骤：

<1> 在网站设置界面settings.aspx中，找到“网站集合功能”Site Collection Features,

选择项目Smart js ..选项，并将起激活active。

<2> 使用MOSS207 Designer，编辑default.master模版页面，

在头结点<headers></header>中 (注意添加core.js文件的引用，web server extensions\12\TEMPLATE\LAYOUTS\2052和1028等路径，都要放入相应的core.js文件)，加入如下代码：

<script type="text/javascript">
     $(document).ready(function){
        // 设置清单Item的width为100%
         $('#onetIDListForm').css('width','100%');
        $('.ms-formbody').css('width','100%');
        
        //
         $('btnHide').show();
        $('btnShow').hide();
       
        var isHide = false;
        $('.ms-pagemargin').click(
            function(){
               if(!isHide)
               {
                   // "查看网站所有内容"左边Mene边框，单击事件：可以打开、收起Menu
                   $('.ms-navframe').fadeOut('faset');
                   $('#btnHide').hide();
                   $('#btnShow').show();
                  
                   // 收起清单打开后的左边的Menu
                      $('#TitleAreaImageCell').css('display','none');
                   $('#LeftNavigationAreaCell').css('display','none');
                  }
                
               if(isHide)
               {
                   //"查看网站所有内容"左边Mene边框，单击事件：可以打开、收起Menu
                      $('.ms-navframe').fadeOut('slow');
                   $('#btnHide').show();
                   $('#btnShow').hide();
                  
                   // 显示清单打开后的左边的Menu
                      $('#TitleAreaImageCell').css('display','block');
                   $('#LeftNavigationAreaCell').css('display','block');               }
            }
       
        )
         
     }
</script>

方法2：修改core.css文件

操作步骤：

<1>  找到该MOSS2007网站对应的服务场Farm的所有web server，

找到对应资源路径，比如C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\2052\STYLES\，找到对应的core.css文件。

<2>  编辑修改core.css文件，修改内容如下，最后保存内容（注意：其他内容不要随意变更）。

#TitleAreaImageCell
{
  /* 作用：消除"查看网站内容时候，左面的上半部分的Menu信息" */
  /*  修改者：田东 */
  /*  修改时间：2010.12.25  20.01 */
  display:none;
}

#LeftNavigationAreaCell
{
  /* 作用：消除"查看网站内容时候，左面的下半部分的Menu信息" */
  /*  修改者：田东 */
  /*  修改时间：2010.12.25  20.01 */
  display:none;
}
#ms-navframe
{
  /* 作用：消除"查看清单信息时候，左面的Menu信息" */
  /*  修改者：田东 */
  /*  修改时间：2010.12.25  20.01 */
  display:none;
}
#onetIDListForm
{
  /* 作用：打开清单信息，创建清单Item时候，将清单的宽度设置为100% */
  /*  修改者：田东 */
  /*  修改时间：2010.12.25  20.01 */
  width:100%;
}

三、变更前后的效果：

<1> 查看网站所有内容时候，左边的Menu区域不要显示

修改前：

修改后：

 
<2> 查看清单信息时候，左边的Menu区域不要显示

修改前：

修改后：

<3> 查看文件库信息时候，左边的Menu区域不要显示

 

修改前：

修改后：

<4> 新建网站内容时候，左边的蓝色区域不要显示

 

 

修改前：

修改后：

<5> 新建清单Item时候，左边的Menu区域不要显示

 

 

修改前：

修改后：

<6> 新建清单Item时候，输入栏目区域的宽度width要设置为100%

 

 

修改前：

修改后：