jQuery 选项卡分页问题

标签 jquery html css pagination

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 6 年前。

Improve this 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>

最佳答案

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

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

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

这不是一个简单的解决方案:)

关于jQuery 选项卡分页问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5074100/