我正在开发一个自定义解决方案,所以我想问问社区是否有人在此之前使用过jQuery Tabs。jQuery Tabs,只有一个面板的多个选项卡
想法是这样的:我有一个主面板,一个输入表单。有多个选项卡基本上可以识别不同的记录。所有的记录都会使用这个表单,这就是为什么我只想加载一次,而不是每个标签。
我举了一个我想去的方向的基本例子。正如你可以看到有3个标签,但只有一个面板。我想动态加载内容到the_input
取决于我点击哪个标签。所以我甚至不想切换面板,只需在每次点击时选中选项卡。
我在想我需要赶上beforeActivate
(http://api.jqueryui.com/tabs/#event-beforeActivate)事件,确定选择了哪个选项卡,并相应地动态更改1可视化面板。
的代码是不是真的工作
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if (selector == 1) {
$('#the_input').val(1);
}else if (selector == 2) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#bol_new">New</a></li>
<li><a href="#bol_1">record 1</a></li>
<li><a href="#bol_2">record 2</a></li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
你可以只添加适当的类的元素,使其具有的外观和感觉标签,然后将自己的'click'回调绑定到选项卡。 – Twisty