类似浏览器的选项卡-Jquery UI选项卡定位
我正在使用jQueryUI选项卡添加/删除功能 我的html是类似浏览器的选项卡-Jquery UI选项卡定位,jquery,jquery-ui,jquery-tabs,Jquery,Jquery Ui,Jquery Tabs,我正在使用jQueryUI选项卡添加/删除功能 我的html是 <div id="dialog" title="Tab data"> <form> <fieldset class="ui-helper-reset"> <label for="tab_title">Title</label> <input type="text" name="tab_title
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
</ul>
</div>
标题
内容
添加选项卡
我的JQuery是
$(function() {
var $tab_title_input = $( "#tab_title"),
$tab_content_input = $( "#tab_content" );
var tab_counter = 2;
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" );
}
});
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var $dialog = $( "#dialog" ).dialog({
autoOpen: true,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
open: function() {
$tab_title_input.focus();
},
close: function() {
$form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var $form = $( "form", $dialog ).submit(function() {
addTab();
$dialog.dialog( "close" );
return false;
});
// actual addTab function: adds new tab using the title input from the form above
function addTab() {
var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
tab_counter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
$dialog.dialog( "open" );
});
// close icon: removing the tab on click
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});
});
$(函数(){
var$tab_title_input=$(“#tab_title”),
$tab_content_input=$(“#tab_content”);
var tab_计数器=2;
//tabs init,带有自定义选项卡模板和填充内容的“添加”回调
var$tabs=$(“#tabs”).tabs({
选项卡模板:“删除选项卡” ”,
添加:功能(事件、用户界面){
var tab_content=$tab_content_input.val()| |“tab”+tab_counter+“content.”;
$(ui.panel)。追加(“”+选项卡内容+””;
}
});
//模态对话框初始化:自定义按钮和“关闭”回调重置表单内部
var$dialog=$(“#dialog”).dialog({
自动打开:对,
莫代尔:是的,
按钮:{
添加:函数(){
addTab();
$(此).dialog(“关闭”);
},
取消:函数(){
$(此).dialog(“关闭”);
}
},
打开:函数(){
$tab_title_input.focus();
},
关闭:函数(){
$form[0].reset();
}
});
//addTab表单:在提交时调用addTab函数并关闭对话框
var$form=$($form“,$dialog).submit(函数(){
addTab();
$dialog.dialog(“关闭”);
返回false;
});
//实际addTab函数:使用上面表单中输入的标题添加新选项卡
函数addTab(){
var tab_title=$tab_title_input.val()| |“tab”+tab_计数器;
$tabs.tabs(“添加”、“#tabs-”+选项卡计数器、选项卡标题);
tab_计数器++;
}
//addTab按钮:只需打开对话框
$(“#添加#选项卡”)
.按钮()
。单击(函数(){
$dialog.dialog(“打开”);
});
//关闭图标:单击删除选项卡
$(“#选项卡span.ui图标关闭”).live(“单击”,函数(){
var index=$($li',$tabs).index($(this.parent());
$tabs.tabs(“删除”,索引);
});
});
我想要的是自动切换到新创建的标签页,并且像我们现在在浏览器中所做的那样,在标签页旁边放置add“newtab”按钮
我尝试将“添加选项卡”按钮插入选项卡中,但选项卡无法正常工作
任何帮助都将不胜感激
更新
以下是工作解决方案:
我改变了两件事。在添加选项卡后,我添加了一个“选择”方法。我还将您的现场活动更改为代表活动。以下是:
您需要对add
事件上的选项卡重新排序,以使add
选项卡成为最新的选项卡
更新到工作版本嘿,Samich,谢谢你的回答,但是新创建的选项卡没有显示内容。。。我的意思是,第一个创建的选项卡显示内容,但2,3,4。。。。无法显示内容。我猜“+”周围的锚标记有问题。如果删除锚标记,内容将完全加载。是的!谢谢你的时间和努力!我将您和Alistair的答案结合起来,以实现我的目标。这里是嘿,我已经更新了问题的标题,以便于搜索。