Thursday, January 26, 2012

jquery ui tab - add close icon to a dynamic added tab

I dynamically added tabs as the following way:


tabpgIndex++;
href="#tabpg"+tabpgIndex;
var title = 'New Tab-'+tabpgIndex;
$('#tabs').append('<div id="tabpg'+tabpgIndex+'">{content}</div>'); //you can add your content here, or any dynamic content you want after this body've been build.

$('#tabs').tabs( 'add', href, title);  //jquery ui tab method

$('#tabs ul li a span').last().prepend('<span id="closeicon-'+tabpgIndex+'" class="ui-icon ui-icon-circle-close" style="float:right; cursor: pointer;"></span>'); // prepend the close icon with an id, so it attached to the right of the tab title without a line break

//with the id I given, I managed a click event to it, like this:
$('#tabs ul li a').on('click','#closeicon-'+l_tabpgIndex,function(){
        alert('close icon clicked');
        //close this tab.
 });

I don't know whether it works for you or not in your case, but it works for me, and hope it will work for you too.

No comments: