0

Create tab dynamically after showing 20 div in first tab.Actually I am generating a div dynamically,there may be 100 div generated dynamically.I want to show 20 div in one tab and if there are 100 div there it will automatically generate 5 tabs with 20 div in each tabs.

<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>
4

2 回答 2

1

在这里，我创建了一个 jsFiddle，它根据 contentDiv 的数量动态生成选项卡：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();
});
于 2013-08-20T06:45:53.667 回答
0

您可以使用 2 个嵌套转发器。子节点是从数据表生成的，返回您的内容记录（内容 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;
        }
    }
}
于 2013-08-20T21:28:52.837 回答