Question

我是jQuery的新手。

我一直在尝试使用下拉菜单来动态创建标签并对其进行分页（不需要标签创建新行，如默认的jQuery标签插件所示）但是已经遇到了几个问题，我不知道如何解决。对于每个难度，我都将屏幕截图作为视觉辅助。

这个界面非常简单，但将来其中使用的数据将是动态的。

enter image description here

现在，由于缺乏技能，我目前遇到的问题。

1）从下拉列表中选择标签的标题，但我不确定如何为每个创建的标签设置单独的内容。现在，每个创建的选项卡都是空的，如下所示。

enter image description here

2）我还想防止重复选项卡。下拉列表中的每个选项都可以无限次选择。

enter image description here

3）最后，我希望将移除按钮移到每个标签旁边（浮动到右侧），如Google Chrome / Firefox标签上所示。

enter image description here

4）我还试图创建一个禁用默认选项卡的选项

以下是代码。它可以按原样复制和粘贴，因为所有依赖项当前都存储在远程Web位置！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/reset-fonts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.seyfertdesign.com/jquery/css/base/ui.all.css" />
<style type="text/css">
h1 {
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 10px;
}
p {
    padding: 5px 0 5px 1em;
}
em {
    font-style: italic;
}
.example {
    margin: 0 1em;
    padding: 5px 0 0 0;
    margin: 5px 10px 20px 10px;
}
.ui-tabs-paging-next {
    float: right !important;
}
.ui-tabs-paging-prev, .ui-tabs-paging-next {
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 1px !important;
}
#example2 .ui-tabs-paging-prev, #example2 .ui-tabs-paging-next {
    font-weight: bold;
}
.ui-tabs-paging-prev a, .ui-tabs-paging-next a {
    display: block;
    position: relative;
    top: 1px;
    border: 0;
    z-index: 2;
    padding: 0;
    /* color: #444; */ 
    text-decoration: none;
    background: transparent !important;
    cursor: pointer;
}
.ui-tabs-paging-next a:hover, .ui-tabs-paging-next a:focus, .ui-tabs-paging-next a:active, .ui-tabs-paging-prev a:hover, .ui-tabs-paging-prev a:focus, .ui-tabs-paging-prev a:active {
    background: transparent;
}
.ui-tabs-paging-disabled {
    visibility: hidden;
}
</style>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.core.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://www.seyfertdesign.com/jquery/js/ui/extensions/ui.tabs.paging.js"></script>
<script type="text/javascript"> 
jQuery(document).ready(function() {
    // initialize tabs with default behaviors
    jQuery('#example1').tabs();
    jQuery('#example2').tabs({ cache: true });
    jQuery('#example3').tabs({ cache: true });
    jQuery('#example4').tabs({ cache: true, selectOnAdd: true });
    jQuery('#example4').tabs('select', 21);

    // initialize paging
    function init() {
        jQuery('#example1').tabs('paging');
        jQuery('#example2').tabs('paging', { cycle: true, nextButton: 'next &gt;', prevButton: '&lt; prev' });
        jQuery('#example3').tabs('paging', { follow: true, followOnSelect: true, tabsPerPage: 5 });
        jQuery('#example4').tabs('paging', { cycle: true, follow: true, followOnSelect: true, selectOnAdd: true });
    }
    init();
});
</script>
</head>
<body style="font-size: 75%;">
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script><script type="text/javascript"> 
function addTab(selector, index) {
    var myTabs = jQuery(selector);

    if (index == undefined)
        index = myTabs.tabs('length');

    tabId = '#tab' + (new Date).getTime();

    myTabs.tabs('add', tabId, $('#TAB_NAME').val());

    $(tabId).load('new_tab_data.txt');
}

function removeTab(selector, index) {
    var myTabs = jQuery(selector);

    if (index == undefined || index.length == 0)
        index = myTabs.tabs('length') - 1;
    else 
        index = parseInt(index);

    myTabs.tabs('remove', index)
}
</script>
<div class="example">
  <div>
  <br>
    <table>
      <tr>
        <td style="padding-left: 30px"><select id="TAB_NAME">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <button onclick="addTab('#example4');">Add</button>
          </p></td>
        <td style="padding-left: 30px" valign="top"><button onclick="removeTab('#example4', jQuery('#TAB_INDEX').val());">Remove</button></td>
      </tr>
      <tr></tr>
    </table>
</div>
  <div id="example4">
    <ul class="tabs">
      <li><a href="#example4-1">Tab 1</a></li>
    </ul>
    <div id="example4-1">Tab 1</div>
  </div>
</div>
</body>
</html>

Answer 1

您需要使用JQuery编写大量额外代码，以使选项卡适应您正在寻找的内容。这不是某人可以简单回答的问题。

初始化/实例化jquery选项卡后，您需要操作jquery在.tabs（）插件中完成的原始工作。

我会写另一个插件，例如。 .dynamicTabs（）并将.tabs（）插件作为基础...

这不是一个简单的解决方案：）

jQuery选项卡分页问题

1 个答案: