如何使标签成为创建它?出现"标签栏",但要向他们展示内容,您必须单击它。我进行了此菜单调用以打开jQuery选项卡:
<a href="#" onClick="addTab('Expedi...','dialogs/grid_expedition.html','1100')"> Expedition</a>
这会创建选项卡,但不会使其活跃。
这是tabs.js:
//Global Variables
var tabTitle = null; //Title should start null
var tabs = null;
tabCounter = 1; //Counter of tab
//Function responsible to create a new Tab and insert the content loaded
function addTab(title, content, indexx) {
var count = $("#tabs-"+indexx).length;
var currentTab = indexx-1;
if(count > 0 ){
alert('Working tab');
}else{
var label = tabTitle.val() || title,
id = "tabs-" + indexx,
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>" + content + "</p></div>");
//to load data
$.post( content, function( data ) {
$( '#' + id ).html( data );
});
tabs.tabs("refresh");
/* to Close the tab */
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
//tabs.tabs("refresh");
});
tabCounter++;
}
}
// Function to initialize the tabs
function init() {
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>";
tabs = $('#tabs').tabs({ selected: -1});
addTab('Principal', 'dialogs/features.html');
tabs.tabs("refresh");
}
$('document').ready(init);
另外,当您关闭选项卡时,最后一个也不活跃。
以编程选择您可以使用的当前有效的选项卡:
tabs.tabs('option', 'active', 0);
最后一个选项是正确选项卡的索引(基于0)。