[英]Create Dynamic tab in jquery-ui tab
I was doing a project on HTML and jQuery recently.我最近在做一个关于 HTML 和 jQuery 的项目。 Thing I want to achieve now is to create dynamic tab with particular data on a button click.
我现在想要实现的是在单击按钮时创建具有特定数据的动态选项卡。
My code for JQuery-UI tab is我的 JQuery-UI 选项卡代码是
$(document).ready(function() {
var $tabs = $("#container-1").tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
$('#add_tab').click( function(){
var label = 'New',
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = 'hi';
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabCounter++;
});
$('#new').click( function(){
$tabs.tabs('select', 2);
});
});
My HTML file我的 HTML 文件
<div id="container-1">
<ul>
<li><a href="#fragment-1">List</a></li>
</ul>
<div id="fragment-1">
</div>
</div>
<button id="add_tab">Add Tab</button>
When i click 'add' button in the console of firebug I'm get error:当我单击 firebug 控制台中的“添加”按钮时,出现错误:
ReferenceError: tabs is not defined
http://localhost:3000/
Line 38
I'm not so good with jquery-ui.我不太擅长 jquery-ui。 How do I fix this problem?
我该如何解决这个问题?
The problem is with your script.So try this问题出在你的脚本上。所以试试这个
$(document).ready(function() {
var tabs = $("#container-1").tabs();
var tabCounter = 1;
$('#add_tab').click( function(){
var ul = tabs.find( "ul" );
$( "<li><a href='#newtab'>New Tab</a></li>" ).appendTo( ul );
$( "<div id='newtab'>Name :<input type='text'></input></div>" ).appendTo( tabs );
tabs.tabs( "refresh" );
tabs.tabs('select', 1);
});
});
the only problem in your code was that you defined in the beginning $tabs
and later called for tabs
without the dollar sine.您的代码中唯一的问题是您在开头的
$tabs
定义,然后在没有美元正弦的情况下调用了tabs
。 I just removed the dollar sine and it works the way you expected (note the var tabs definition on second line) ... I aswel added code to the jsfiddle .我只是删除了美元正弦和它的作品您预期的方式(注意第二行的VAR标签定义)......我aswel添加代码到的jsfiddle 。
$(document).ready(function() {
var tabs = $("#container-1").tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
$('#add_tab').click( function(){
var label = 'New',
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = 'hi';
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
tabCounter++;
});
$('#new').click( function(){
$tabs.tabs('select', 2);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.