SharePoint 2010 At Work--SharePoint 2010 Tab Page 创建选项卡页面

        当大量内容需要显示在页面上,超出了可见区域。用户就不得不滚动鼠标查看。这是应该避免的。滚动鼠标越少,意味着用户体验越好。

        一个好办法是使用选项卡。选项卡允许将内容放在一个页面上,只需切换,不必滚动滚轮上下查看,方便了很多。

        本文目标就是创建一个Tab页面,能够做到:

1. 使用很少或不滚动即可查看页面。

2. 提供2-8个选项卡选项。

3. 启用cookies,这样刷新后用户仍然看到最后查看的选项卡。

4. 允许在一个选项卡中放置多个web部件。

        最终效果:



1. 下载页面并加载到SharePoint 2010实例中。

2. 添加web部件到页面,选择HTML表单Web部件。

3. 添加代码到HTML表单Web部件自定义选项卡。

步骤一:下载并加载页面。

        页面可以添加到任何文档库,所以部署起来比较灵活。也可以加载到根网站的页面布局哭中,在网站集所有网站中可用。基于本次讨论目的,不在讲述添加到页面布局库的过程。

        下一步要么输入本章末尾代码到空白.aspx页,要么解压缩.zip文件内容上载到文档或页面库中。

步骤二:添加Web部件

1. 打开你选作Tabs页的页面,网站操作--编辑页面,寻找Tab节。


2. 添加Web部件。


        为什么使用HTML表单Web部件呢,而不是内容编辑器Web部件?SharePoint 2010改变了内容编辑器的工作方式;更容易编辑内容,但是它会无理由的删除代码。所以使用HTML表单Web部件,因为它不评估你的代码。

步骤三:自定义Tabs

1. 编辑HTML表单Web部件,打开源编辑器输入下面代码:


        你需要决定选项卡的数目。通过添加<!--和-->注释掉选项卡。


        决定是否需要Tab页面帮助链接。如果不需要:


jQuery应用

        这个解决方案使用jQuery,因此必须加载jQuery。如果没有加载jQuery,则远程调用jQuery。确保站点拥有jQuery,这Tab页面才能工作。如果网站集母版页中已经有加载jQuery,Tab页面的脚本将检查是否加载。如果已经加载了,脚本不会加载另一个版本或拷贝。下面代码片评估站点的jQuery状态:


Tab页面布局代码

下面链接有完整的页面布局代码。有标准的SharePoint 页面布局代码,能布局并记忆最后浏览选项卡的脚本,以及CSS.

代码片

本机效果图


原文地址:https://www.cnblogs.com/crazygolf/p/3856824.html