【发布时间】：2017-02-19 19:15:00
【问题描述】：
我是 jQuery 的新手。
我一直在试验和研究一种使用下拉菜单动态创建选项卡并对其进行分页的方法（不需要选项卡创建新行，如默认 jQuery 选项卡插件所示），但遇到了一些我不知道如何解决的问题。对于每个难度，我都将屏幕截图作为视觉辅助。
这里的界面相当简单，但将来其中使用的数据将是动态的。
以下是我目前由于缺乏技能而面临的问题。
1) 选项卡的标题是从下拉列表中选择的，但我不确定如何为创建的每个选项卡设置单独的内容。现在创建的每个选项卡都是空的，如下所示。
2) 我也想防止标签的重复。下拉列表中的每个选项都可以选择无数次。
3) 最后，我希望将删除按钮移动到每个选项卡旁边（浮动到右侧），就像在 Google Chrome/Firefox 选项卡上看到的那样。
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 >', prevButton: '< 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 html css pagination