根据在 ASP.Net 的列表框中选择的值动态创建选项卡

Question

有谁知道如何根据从列表框中选择的内容动态创建选项卡？

这是我的：

列表框:

    <asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px">
    <asp:ListItem Text="Apple" Value ="1"  />
    <asp:ListItem Text="Watermelon" Value ="2"  />
    <asp:ListItem Text="Kiwi" Value ="3"  />
    <asp:ListItem Text="Plum" Value ="4"  />
    <asp:ListItem Text="Pineapple" Value ="5"  />
</asp:ListBox>

检索按钮：

<asp:Button ID="RetrieveButton" runat="server" Text="Button" />

根据用户从列表框中选择的内容，当用户按下“检索”按钮时，将根据用户从列表框中选择的值的数量创建选项卡的数量。

例如：

假设用户从列表框中选择了 3 项 并单击按钮，3 选项卡 应创建在底部相同页面上的页面，选项卡名称与列表框项目文本相同。

输出：

+--------------------------------+

          ListBox

       RetrieveButton

+--------------------------------+

           Tabs:

Apple | Watermelon | Kiwi

+--------------------------------+

非常感谢任何帮助。谢谢！

Answer 1

代码将取决于您打算如何显示选项卡。使用 jqueryUI 动态选项卡可以通过添加 li 元素轻松添加。请参考下面的代码示例（我使用了 html select - 您可能必须使用列表框的相应客户端 ID）

$('document').ready(function(){
  $("div#tabs").tabs().hide();
  $("button#RetrieveButton").click(function (e) {
      e.preventDefault();

      $('#SelectionListBox option:selected').each(function () {
          var txt = $(this).text();

          $("div#tabs ul").append(
              "<li><a href='#tab" + txt + "'>#" + txt + "</a></li>");
          $("div#tabs").append(
              "<div id='tab" + txt + "'>#" + txt + "</div>");
          $("div#tabs").tabs("refresh");
      });

      if ($("div#tabs ul li").length) {
          $('div#tabs').show();
          $('button#RetrieveButton').prop('disabled', true);
      }

  });
};

演示：JsFiddle

Edit：以下代码尝试使用 JavaScript 执行相同的操作。请注意以下代码或多或少是未经测试的，并且是 "reinvent the wheel" 的尝试。建议使用 jQueryUI 或 bootstrap 选项卡。

aspx

<head runat="server">

    <title></title>

    <style type="text/css">
        .Initial
        {
            display: block;
            padding: 4px 18px 4px 18px;
            float: left;
            /*background: url("../Images/InitialImage.png") no-repeat right top;*/
            background-color: dimgray;
            color: Black;
            font-weight: bold;
        }
        .Initial:hover
        {
            color: White;
            /*background: url("../Images/SelectedButton.png") no-repeat right top;*/
            background-color: gray;
        }
        .Clicked
        {
            float: left;
            display: block;
            /*background: url("../Images/SelectedButton.png") no-repeat right top;*/
            background-color: blue;
            padding: 4px 18px 4px 18px;
            color: Black;
            font-weight: bold;
            color: White;
        }
        #tabs-content
        {
            float:left;
            clear:both;
        }
        #tabs-content div
        {
            display:none;
            border-style:double;
            border-width:2px;
            min-width: 600px;
            min-height:200px;
        }
</style>
<script type="text/javascript">
       function changeTab(ctrl) {
            var id = ctrl.getAttribute('data-tab');
            var allTabContents = document.getElementById('tabs-content').getElementsByTagName('div');
            var tabContent = document.getElementById(id);

            for (var i = 0; i < allTabContents.length; i++) {
                allTabContents[i].style.display = 'none';
            }
            tabContent.style.display = 'block';
        }

        function addTabs() {
            var top = document.getElementById('tabs-link');
            var bottom = document.getElementById('tabs-content');

            var allTabContents = document.getElementById('tabs-content').getElementsByTagName('div');
            var tabCount = 1;

            for (var i = 0; i < allTabContents.length; i++) {
                tabCount++;
            }

            var listBox = document.getElementById('SelectionListBox');
            for (var i = 0; i < listBox.options.length; i++) {
                if (listBox.options[i].selected) {
                    var newTab = document.createElement('div');
                    newTab.setAttribute('class', 'Initial');
                    newTab.setAttribute('data-tab', 'tab'+tabCount);
                    newTab.setAttribute('onclick', 'changeTab(this)');
                    newTab.innerText = listBox.options[i].text;
                    top.appendChild(newTab);

                    var newTabContent = document.createElement('div');
                    newTabContent.setAttribute('id', 'tab' + tabCount);
                    newTabContent.innerText = listBox.options[i].text;
                    bottom.appendChild(newTabContent);

                    tabCount++;
                }
            }
            return false;
        }

</script>
</head>
<body >
    <form id="form1" runat="server">
    <asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px">
            <asp:ListItem Text="Apple" Value ="1"  />
            <asp:ListItem Text="Watermelon" Value ="2"  />
            <asp:ListItem Text="Kiwi" Value ="3"  />
            <asp:ListItem Text="Plum" Value ="4"  />
            <asp:ListItem Text="Pineapple" Value ="5"  />
        </asp:ListBox>
        <asp:Button ID="RetrieveButton" runat="server" Text="Button" OnClientClick="return addTabs()" />
        <div id="tabs">
            <div id="tabs-link">

            </div>
            <div id="tabs-content">

            </div>
        </div>
    </form>
</body>

根据在 ASP.Net 的列表框中选择的值动态创建选项卡

Create Tabs Dynamically Based on Values Selected in Listbox in ASP.Net

asp.net

tabs

listbox