Use jQuery UI tabs widget for tabbed fieldsets

Thomas Bruederli

2014-06-03 5cf77e1159b3aea337a08a9a8eef82c47b49bbd7

Use jQuery UI tabs widget for tabbed fieldsets

 skins/larry/styles.css

@@ -2764,26 +2764,18 @@

/*** fieldset tabs ***/

.tabsbar {
    margin-bottom: 12px;
    padding-top: 15px;
    height: 27px;
    white-space: nowrap;
.tabbed.ui-tabs {
    padding: 0;
    border: 0 !important;
    background: none;
}

.ui-tabs .tabsbar.ui-tabs-nav {
    margin-bottom: 10px;
}

.ui-dialog-content .tabsbar {
    margin-bottom: 0;
}

.tabsbar .tablink {
    padding: 15px 1px 15px 0;
    background: #f8f8f8;
    background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8));
    background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
    background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
    background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
    background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
}

.tabsbar .tablink:last-child {
@@ -2794,28 +2786,13 @@
    border-right: 0;
}

.tabsbar .tablink a {
    padding: 15px;
    color: #999;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
.ui-tabs .ui-tabs-nav li.tablink a {
    background: #fff;
    border-right: 1px solid #fafafa;
}

.tabsbar .tablink.selected a {
    color: #004458;
    background: #f6f6f6;
    background: -moz-linear-gradient(top, #fff 40%, #efefef 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef));
    background: -o-linear-gradient(top, #fff 40%, #efefef 100%);
    background: -ms-linear-gradient(top, #fff 40%, #efefef 100%);
    background: linear-gradient(top, #fff 40%, #efefef 100%);
}

fieldset.tab {
.ui-tabs fieldset.ui-tabs-panel {
    border: 0;
    padding: 0;
    margin-left: 0;
    background: none;
}

 skins/larry/ui.js

@@ -1053,47 +1053,35 @@
      content.attr('id', id);
    }

    // first hide not selected tabs
    current = current || 0;
    fs.each(function(idx) { if (idx != current) $(this).hide(); });

    // create tabs container
    var tabs = $('<div>').addClass('tabsbar').prependTo(content);
    var tabs = $('<ul>').addClass('tabsbar').prependTo(content);

    // convert fildsets into tabs
    fs.each(function(idx) {
      var tab, a, elm = $(this), legend = elm.children('legend');
      var tab, a, elm = $(this),
        legend = elm.children('legend'),
        tid = id + '-t' + idx;

      // create a tab
      a   = $('<a>').text(legend.text()).attr('href', '#');
      tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
        .click(function() { show_tab(id, idx); return false })
      a   = $('<a>').text(legend.text()).attr('href', '#' + tid);
      tab = $('<li>').addClass('tablink');

      // remove legend
      legend.remove();
      // style fieldset
      elm.addClass('tab');
      // style selected tab
      if (idx == current)
        tab.addClass('selected');

      // link fieldset with tab item
      elm.attr('id', tid);

      // add the tab to container
      tab.append(a).appendTo(tabs);
    });
  }

  function show_tab(id, index)
  {
    var fs = $('#'+id).children('fieldset');

    fs.each(function(idx) {
      // Show/hide fieldset (tab content)
      $(this)[index==idx ? 'show' : 'hide']();
      // Select/unselect tab
      $('#tab'+idx).toggleClass('selected', idx==index);
    // use jquery UI tabs widget to do the interaction and styling
    content.tabs({
      active: current || 0,
      heightStyle: 'content',
      activate: function(e, ui) {resize(); }
    });

    resize();
  }

  /**
@@ -1204,6 +1192,7 @@
    this.handle = $('<div>')
      .attr('id', this.id)
      .attr('unselectable', 'on')
      .attr('role', 'presentation')
      .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
      .appendTo(this.parent)
      .bind('mousedown', onDragStart);