![](/img/trans.png)
[英]jQuery UI tabs example - opening new tab = adding unique script to each tabs
[英]when opening new tabs, it should open the new tab diretly in jquery ui tabs
我正在使用jquery-UI创建动态选项卡面板。当我单击添加选项卡按钮时,正在创建新的选项卡。 但是该标签面板没有直接打开。 当单击该选项卡面板时,只有它正在打开。
$(function() {
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabCounter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
dialog.dialog( "open" );
});
// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
});
tabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
});
这是我在我的网站[ http://jqueryui.com/tabs/#manipulation]中使用的jquery UI选项卡面板的url。
如何直接打开这个新添加的标签?
在您的addTab()函数中添加以下代码
var lastChildIndex = $(".ui-tabs-nav").children().length - 1;
$("div#tabs").tabs({active: lastChildIndex});
它的作用是获取选项卡列表的最后一个子项(刚添加的子项)的索引并将其设置为活动状态。
示例: http : //jsfiddle.net/ujUu2/818/
编辑:看到您的代码中已经有一个tabCounter,您可以将其用作将最后一个选项卡设置为活动的索引,而不是我建议的var lastChildIndex。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.