Dynamic jQueryUI tabs

by rosenfeld

HTML

<input id=position type=text />
<button id=add-tab>Add tab</button>
<div id=tabs>
    <button class=scroll-left>&lt;</button>
    <button class=scroll-right>&gt;</button>
    <div id=navigator>
        <ul></ul>
    </div>
</div>

CSS

#navigator, #navigator > ul { height: 48px; }
#navigator { overflow: hidden; }
#navigator span.ui-icon-close { float: right; }

#tabs > button.scroll-left {float: left}
#tabs > button.scroll-right {float: right}

JavaScript

var tabs = $('#tabs').tabs({activate: onActivate}), nav = $('#tabs').find('.ui-tabs-nav'), count=0,
    closeButtonTemplate = ' <span class="ui-icon ui-icon-close" role=presentation>Remove Tab</span>';
$('#add-tab').click(addTab);

function addTab() {
    count++;
    var position = $('#position').val(),
        content = $('<div/>').attr('id', 'main-tab-' + count).text('Loading ' + count).appendTo('#tabs'),
        li = $('<a href="#main-tab-' + count + '"/>')
    .text('Title ' + count).wrap('<li/>').parent().append(closeButtonTemplate).data({content: content, url: 'http://www.bing.com/search?q=' + count});
    
    if (position) nav.find('li:eq(' + position + ')').before(li);
    else nav.append(li);
    refresh()
}

function refresh() {
    tabs.tabs('refresh');
    toggleScrollers();
}
addTab();addTab();addTab();addTab();addTab();addTab();
tabs.tabs('select', 0);

tabs.on('click', '.ui-icon-close', closeTab);

function closeTab() {
    var li = $(this).closest('li');
    li.data('content').remove();
    li.remove();
    refresh();
}

function onActivate(_, ui){
    console.log(ui, ui.newTab.data('url'));
    var url = ui.newTab.data('url');
    if (!url) return;
    ui.newTab.removeData('url');
    ui.newPanel.html($('<iframe width="100%"/>').attr({src: url, height: '150px'}))
}

$('button.scroll-left').click(scrollLeft);
$('button.scroll-right').click(scrollRight);

function scrollLeft(){scrollOffset(100);}
function scrollRight(){scrollOffset(-100);}
function scrollOffset(offset){
    var curr = parseInt(nav.css('margin-left')),
        newpos = Math.min(0, curr + offset);
    nav.css('margin-left', newpos + 'px');
    toggleScrollers()
}

function toggleScrollers(){
    var tw = 0,
        marginLeft = parseInt(nav.css('margin-left'));
    $('.scroll-left').toggle(marginLeft < 0);
    nav.children('li').each(function(){
        tw += $(this).outerWidth()
    });
    $('.scroll-right').toggle((tw + marginLeft) > $('#navigator').outerWidth())
}