JQuery UI Tabs Dynamically Add Tab -
here's fiddle - http://jsfiddle.net/ttbzk/
i want click add tab button , have automatically add tab prechosen content without dialog window seen on jquery ui's manipulation example here - http://jqueryui.com/tabs/#manipulation
i don't know i'm doing wrong. appreciated.
jquery
$(function() { var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameborder="0">your browser not support iframe</iframe>'; var tabs = $("#tabs").tabs(); tabtemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>remove tab</span></li>", tabcounter = 2; function addtab() { var label = tabtitle.val() || "" + tabcounter, id = "tabs-" + tabcounter, li = $( tabtemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ), websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameborder="0">your browser not support iframe</iframe>'; tabs.find(".ui-tabs-nav").append(li); tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>"); tabs.tabs("refresh"); tabcounter++; } $("#add_tab").click(function() { addtab(); }); }); html
<div id="tabs"> <ul> <li><a href="#tabs-1">home</a> <span class="ui-icon ui-icon-close" role="presentation">remove tab</span></li> <li style="float:right;"><a id="add_tab">+</a></li> </ul> <div id="tabs-1"> <iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameborder="0"> browser not support iframe's </iframe> </div> </div> css
#tabs li .ui-icon-close { float:left; margin:0.4em 0.2em 0 0; cursor:pointer;} #add_tab { cursor:pointer;} div#tabs { position:absolute; top:0px; left:50%; width:98%; height:98%; margin-left:-49.5%;} div#tabs div { display:inline-block; padding:0px; width:100%; height:90%;}
in addtab function use line:
var label = tabtitle.val() || "" + tabcounter; but never declare variable name tabtitle
updated jsfiddle
changes:
<li> <a href="#tabs-1" id="tab_title">home</a> ... var tabtitle = $('#tab_title'); gave id testing purpose. declared variable.
tabs added dynamically. should of course change tab headings name. <a href> value use .text() , e.g. add tabcounter becomes home2 etc.
Comments
Post a Comment