SharePoint 2010 At Work--SharePoint 2010 Tab Page 创建选项卡页面
2014-04-18 18:32
519 查看
当大量内容需要显示在页面上,超出了可见区域。用户就不得不滚动鼠标查看。这是应该避免的。滚动鼠标越少,意味着用户体验越好。
一个好办法是使用选项卡。选项卡允许将内容放在一个页面上,只需切换,不必滚动滚轮上下查看,方便了很多。
本文目标就是创建一个Tab页面,能够做到:
1. 使用很少或不滚动即可查看页面。
2. 提供2-8个选项卡选项。
3. 启用cookies,这样刷新后用户仍然看到最后查看的选项卡。
4. 允许在一个选项卡中放置多个web部件。
最终效果:
1. 下载页面并加载到SharePoint 2010实例中。
2. 添加web部件到页面,选择HTML表单Web部件。
3. 添加代码到HTML表单Web部件自定义选项卡。
下一步要么输入本章末尾代码到空白.aspx页,要么解压缩.zip文件内容上载到文档或页面库中。
2. 添加Web部件。
为什么使用HTML表单Web部件呢,而不是内容编辑器Web部件?SharePoint 2010改变了内容编辑器的工作方式;更容易编辑内容,但是它会无理由的删除代码。所以使用HTML表单Web部件,因为它不评估你的代码。
你需要决定选项卡的数目。通过添加<!--和-->注释掉选项卡。
决定是否需要Tab页面帮助链接。如果不需要:
代码片
一个好办法是使用选项卡。选项卡允许将内容放在一个页面上,只需切换,不必滚动滚轮上下查看,方便了很多。
本文目标就是创建一个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.代码片
本机效果图
相关文章推荐
- SharePoint 2010 At Work--SharePoint 2010 Tab Page 创建选项卡页面
- 使用TabPageIndicator创建tab页面
- sharepoint 2010 页面添加logo banner方法 custom banner for sharepoint 2010 master page
- SharePoint 2010 master page 控件介绍(3) :页面主体内容
- 关于easyui在使用tab组件创建选项卡时href方式载入页面遇到的问题
- SharePoint 2010 master page 控件介绍(3) :页面主体内容
- 为SharePoint 2010中的FBA创建自定义登录页面
- 关于easyui在使用tab组件创建选项卡时href方式载入页面遇到的问题
- SharePoint 2010 技巧系列: 定制化历史版本页面(Version History page)
- 为SharePoint 2010中的FBA创建自定义登录页面
- 为SharePoint 2010中的FBA创建自定义登录页面
- sharepoint 2010 用contenttype自定义表单显示页面 custom displayForm page by contenttype
- 为SharePoint 2010创建Application Page
- 如何在SharePoint 2010中创建自定义字段类型
- C#中用鼠标右键选中tabpage选项卡 并且弹出右键菜单,实现选项卡的关闭
- 一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
- sharepoint 访问page 下面的页面突然404
- SharePoint 2013 创建web应用程序报错"This page can’t be displayed"
- 创建与SharePoint 2010风格一致的下拉菜单 (续) 整合Feature Custom Action框架
- sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback