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

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -