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

bjghzly

　　当大量内容需要显示在页面上，超出了可见区域。用户就不得不滚动鼠标查看。这是应该避免的。滚动鼠标越少，意味着用户体验越好。
　　一个好办法是使用选项卡。选项卡允许将内容放在一个页面上，只需切换，不必滚动滚轮上下查看，方便了很多。
　　本文目标就是创建一个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.
　　代码片
本机效果图