SharePoint中Tab方式进行内容展现的WebPart

之前在给别人做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