之前在给别人做POC的时候,有开发过一个类似于Tab标签形式的WebPart,给大家分享一下。

具体的样式如下:

下面来说一下具体的实现思路:

在前台的时候定义三个div,然后通过Jquery来控制每一个div的显示和隐藏(具体的也可以到网上搜索一些Tab的效果样式,然后自己按着自己的方式修改一下就好了)。

前台代码:

Code

1 <div >
2             <div id="btn1" class="tab-box-btn active" ref="content1">本日</div>
3             <div id="btn2" class="tab-box-btn" ref="content2">本周</div>
4             <div id="btn3" class="tab-box-btn" ref="content3">本月</div>
5             <div style="clear:both"></div>
6 </div>

说明:
ref="content1" 中的content1也是一个div,这个div就是我们看到的下面展示数据的那个部分(在这里定义数据展示控件,并在后台给其绑定数据)。其他也是一样的。

后台代码:

Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Data;
 6 using System.Web.UI;
 7 using System.Web.UI.WebControls;
 8
 9 namespace POC.Tab
10 {
11     public partial class _Default : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15             // 在这里进行数据的绑定
16         }
17
18         /// <summary>
19         /// 本日 数据
20         /// </summary>
21         /// <returns></returns>
22         private DataTable GetBRData(string p_value)
23         {
24             DataTable p_dt = new DataTable();
25             p_dt.Columns.Add("ImageUrl");
26             p_dt.Columns.Add("DataTitleUrl");
27             p_dt.Columns.Add("DataContent");
28             p_dt.Columns.Add("FullContent");
29
30             for (int i = 0; i <= 4;i++)
31             {
32                 DataRow p_dr = p_dt.NewRow();
33                 p_dr["ImageUrl"] = "Img/sz.PNG";
34                 p_dr["DataTitleUrl"] = p_value + i.ToString();
35                 p_dr["DataContent"] = p_value + i.ToString();
36                 p_dr["FullContent"] = p_value + i.ToString();
37                 p_dt.Rows.Add(p_dr);
38             }
39             return p_dt;
40         }
41     }
42 }

到此我们工作就做完了,如果一切都没有问题话,我们将会看到上面那样的一个效果,当然样式的话我们可以让美工来进行调的好看一点,在这里只是想给大家一个实现的思路....毕竟思路很重要不是....

转载于:https://www.cnblogs.com/yx-bolg/archive/2012/08/11/2626938.html

SharePoint中Tab方式进行内容展现的WebPart相关推荐

  1. java中读取properties文件内容五种方式

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

  2. 五种方式让你在java中读取properties文件内容不再是难题

    2019独角兽企业重金招聘Python工程师标准>>> 方式1.通过context:property-placeholder加载配置文件jdbc.properties中的内容 < ...

  3. 【转】SharePoint 中的编程模型

    可以通过多种方式开发针对 SharePoint 平台的应用程序.可以基于以下各项将这些应用程序划分下列组中:用于创建应用程序的工具.用于开发应用程序的编程模型.打包和部署应用程序的方法.将应用程序投入 ...

  4. 在sharepoint中添加视频播放

    年初的时候想把公司举办的春晚发布在sharepoint中供大家观看,但是视频文件太大了,放到文档库中存储到数据库中是一个不切实际的办法,后来就搁置了. 其实也一直在想优酷等视频网站的发布方式,但没能得 ...

  5. python中tab键_python中tab键是什么意思

    对于程序员来说,其实Tab和空格远远不只是"立场"问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格 ...

  6. python tab键_python中tab键是什么意思

    对于程序员来说,其实Tab和空格远远不只是"立场"问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格 ...

  7. SharePoint 中关于event receivers的讨论

    今天一早,跟几个小伙伴在群里讨论了有关事件触发器的东西,感觉收获颇多,拿出来和大家分享.讨论的内容,主要就是关于事件触发器的同步/异步的设置以及作用. 其实接触SharePoint颇久,对于事件触发器 ...

  8. vue中tab切换前端实现_使用vue实现tab操作

    tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...

  9. 一步一步SharePoint 2007之三十七:在SharePoint中实现Workflow(3)——运行Workflow

    下面将记录每一步的操作过程. 1.首先打开我的网站,依次点击Document Center.Announcements,进入Announcements列表页面. 2.在Announcements列表界 ...

最新文章

  1. define的多行定义
  2. Java学习笔记(三)--Java主类结构
  3. java集合:ArrayList
  4. J2EE dynamic web工程搭建 struts2
  5. SAP Spartacus的用户登录页面设计
  6. 易语言添加ctrl c键,易语言操作快捷键汇总
  7. 玩玩机器学习3——TensorFlow基础之Session基本运算、占位符和变量的使用
  8. IDEA快捷代码添加/补全技巧
  9. Java数组及二维数组初始化与赋值方法总结
  10. OneNote 2013 快捷键
  11. 【LeetCode】剑指 Offer 55 - II. 平衡二叉树
  12. HDOJ 2795 Billboard
  13. c语言数据结构学习心得——栈
  14. ubuntu20.04 安装、美化、办公环境搭建及深度学习开发环境搭建
  15. mysql2000数据库四合一_sql2000四合一版下载|microsoft sql server2000 简体中文4合一版附sql 2000 sp4 补丁_ - 极光下载站...
  16. Java Web程序设计——JSP技术(一)
  17. 支付宝免费领取7天优酷黄金会员 1.88元购买1个月优酷黄金会员
  18. react-navigation goBack()传值
  19. 江西省2021年工业互联网安全技术技能大赛
  20. 获取具体日期N个月前(后)的自然月时间戳

热门文章

  1. 深入理解建造者模式 ——组装复杂的实例
  2. hdu 5095 Linearization of the kernel functions in SVM(模拟,分类清楚就行)
  3. 年度回顾:2018年的AI/ML惊喜及预测19年的走势(一)...
  4. 10.27T2 线性DP+拆分
  5. Django 的操作
  6. H3C S5560交换机风扇反转告警
  7. 7 ArcMap能复制,不能粘贴
  8. Select 子句后的别名,在where条件中不能使用
  9. 数据库中文乱码问题的解决
  10. zend studio 9.0汉化