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

总结

以上是生活随笔为你收集整理的SharePoint中Tab方式进行内容展现的WebPart的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。