在第一个标签中显示20 div后动态创建标签。实际上我动态生成一个div，动态生成可能有100个div。我想在一个标签中显示20 div，如果有100个div，它会自动生成5个标签，每个标签中有20个div。
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">tab1</li>
<li class="TabbedPanelsTab" tabindex="0">tab2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
12345
</div>
<div class="contentdiv">
12345
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<div id="paginate1-slider1" class="pagination2">
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
在这里，我创建了一个jsFiddle，它根据contentDivs的数量动态生成标签：http://jsfiddle.net/Z6HN9/，它可以帮助您实现目标。
HTML代码：
<div id="tabs">
<ul id="tabLinks"></ul>
</div>
JavaScript代码：
$(function () {
var neededDivCount = 100; // number of contentDivs for test purposes
var divPerTab = 20; // number of contentDivs / tabs for test purposes
// create the conentDivs dynamically for test purposes
for (var i = 1; i <= neededDivCount; i++) {
$("body").append('<div class="contentDiv">div' + i + 'content</div>');
}
// create the tabs and tabLinks based on the number of contentDivs in the document
var neededTabCount = Math.floor(($(".contentDiv").length - 1) / divPerTab) + 1;
for (var i = 1; i <= neededTabCount; i++) {
$("#tabs").append('<div id="tab' + i + '"></div>');
$("#tabLinks").append('<li><a href="#tab' + i + '">tab' + i + '</a></li>');
}
// loop through the contentDivs and append them to the correct tab
$(".contentDiv").each(function (index) {
var appendToTabIndex = Math.floor(index / divPerTab) + 1;
$(this).appendTo($("#tab" + appendToTabIndex));
});
$("#tabs").tabs();
});
答案 1 :(得分：0)
你可以使用2个嵌套的转发器。孩子一个是从datatable生成的，返回你的内容记录（内容div），父一个是从匿名类型列表动态生成的。
<强> ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RP.aspx.cs" Inherits="RP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<%-- Tabs Links --%>
<asp:Repeater ID="TablLinkRepeater" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href="#Tab<%# Eval("TabIndex") %>">Tab
<%# Eval("TabIndex") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<%-- Tabs and Content --%>
<asp:Repeater ID="TabRepeater" runat="server">
<ItemTemplate>
<div id="Tab<%# Eval("TabIndex") %>">
<%-- Show TabIndex just for testing --%>
<h1>
Tab #
<%# Eval("TabIndex") %>
</h1>
<asp:Repeater ID="ContentRepeater" runat="server">
<ItemTemplate>
<div class="Content" id="ContentDiv" runat="server">
<%-- Some content--%>
<asp:Label ID="Name" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
<强> C＃
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
public partial class RP : System.Web.UI.Page
{
private const int ContentPerTab = 20;
private DataTable SomeDatatable;
protected void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
//1) Load SomeDatatable from Database somehow
// Just for testing : replace with query to DB
SomeDatatable = new DataTable("x");
SomeDatatable.Columns.Add(new DataColumn("ContentIndex", Type.GetType("System.Int32")));
SomeDatatable.Columns.Add(new DataColumn("Name", Type.GetType("System.String")));
for (int x = 1; x <= 50; x++)
{
SomeDatatable.Rows.Add(new object[] {
x,
"Content " + x
});
}
///////////////////
//2) Create a dummy data source for the tab repeater using a list of anonymous types
List<object> TabList = new List<object>();
for (int I = 0; I < Math.Ceiling((decimal)SomeDatatable.Rows.Count / (decimal)ContentPerTab); I++)
{
TabList.Add(new { TabIndex = I });
}
TabRepeater.ItemDataBound += TabRepeater_ItemDataBound;
TabRepeater.DataSource = TabList;
TabRepeater.DataBind();
TablLinkRepeater.DataSource = TabList;
TablLinkRepeater.DataBind();
}
}
protected void TabRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
{
int TabIndex = -1;
int.TryParse(DataBinder.Eval(e.Item.DataItem, "TabIndex").ToString(), out TabIndex);
//Copy Content Rows from SomeDatable that belong to this tab
DataTable Dt = SomeDatatable.Clone();
for (Int32 i = TabIndex * ContentPerTab; i <= (TabIndex + 1) * ContentPerTab - 1; i++)
{
if (i >= SomeDatatable.Rows.Count) break;
Dt.ImportRow(SomeDatatable.Rows[i]);
}
// Find the content repeater in this item and use the new datatable as source
Repeater ContentRepeater = (Repeater)e.Item.FindControl("ContentRepeater");
ContentRepeater.ItemDataBound += ContentRepeater_ItemDataBound;
ContentRepeater.DataSource = Dt;
ContentRepeater.DataBind();
}
}
//This handler might be needed for content repeater, included just for testing
protected void ContentRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
{
//Read coulmn from Datarow
int ContentIndex = -1;
int.TryParse(DataBinder.Eval(e.Item.DataItem, "ContentIndex").ToString(), out ContentIndex);
// Find some label
Label Name = (Label)e.Item.FindControl("Name");
Name.Text = "Content #" + ContentIndex;
}
}
}