curvy-tabs

See the demo.

Synopsis

<div class="curvy-tabs-container">
  <div style="background-color:lightblue" name="Tab A">
    Content for Tab A goes here.
  </div>
  <div style="background-color:lightgreen" name="Tab B">
    Content for Tab B goes here.
  </div>
</div>

As npm module:

var CurvyTabs = require('curvy-tab');

From CDN:

<script src="https://joneit.github.io/curvy-tabs/2.0.1/curvy-tabs.min.js">

The following instantiates the controller object, collecting all the content divs into a sub-div, and adds the tab bar (a canvas element) above it:

var container = document.querySelector('.curvy-tabs-container'); // or whatever
var tabBar = new CurvyTabs(container);
tabBar.paint();

The tabs are named after the content element names.

API

container property

The element that contains both the tab bar itself (a <canvas> element) and a <div> containing the content elements.

contents property

The <div> containing the content elements.

getTab method

Convenience method to get a content element by index or name.

For example, to get a reference to the 2nd tab’s content element:

var tab = tabBar.getTab(1); // by index (zero-based, so 1 means 2nd tab)
// or:
var tab = tabBar.getTab('Tab B'); // by name

selected property and select method

The first tab is selected by default. To programmatically specify some other tab, set selected to a specific content div, either of the following works:

var tabB = tabBar.contents.children[1];
// or:
var tabB = tabBar.contents.querySelector('[name="Tab B"]');
tabBar.selected = tabToSelect; // but see tabBar.select() method

To select an alternative tab on instantiation:

var tabBar = new CurvyTabs(container, tabB);

Or, use the select convenience method for setting selected property by tab index or name:

tabBar.select(1);
// or:
tabBar.select('Tab B');

Tab clear method

To "clear" (removes all child elements from) the 2nd tab’s content element:

tabBar.select(1); // by index
// or:
tabBar.select('Tab B'); // by name

Tab hide/show by index or name

To hide the 2nd tab, set 2nd content element’s display style:

• Declaratively, before instantiation: Use CSS (affects all instances):

  <style>
      .curvy-tabs-content > div > *:nth-child(1) { display: none } /* zero-based */
      /* or: */
      .curvy-tabs-content > div > *[name="Tab B"] { display: none }
  </style>
  

• _Programmatically, after instantiation, set the display style property of the content div:

  tabBar.contents.querySelector(1).style.display = 'none'; // default is 'block'
  // or:
  tabBar.contents.querySelector('[name="Tab B"]').style.display = 'none';
  tabBar.paint();
  

Or, use the hide, show, convenience methods to set a tab’s display property by index or name and call paint for you:

var indexOrName = 1; // by index
// or:
var indexOrName = 'Tab B'; // by name

// to hide:
tabBar.hide(indexOrName);
tabBar.toggle(indexOrName, false);

// to hide:
tabBar.show(indexOrName);
tabBar.toggle(indexOrName, true);

// to flip:
tabBar.toggle(indexOrName); // hides if visible or shows if hidden

Tab curviness property

To change the curviness of the tab outlines:

tabBar.curviness = 0; // no curves at all (looks exactly like Chrome's tabs)
tabBar.curviness = 0.5; // somewhat flattened curves
tabBar.curviness = 1; // full curviness (default)

Tab minWidth property

Tabs are sized proportional to their labels. To make all tabs the same width:

tabBar.minWidth = 100; // Tabs whose text exceeds 100 pixels are widened to accommodate

Tab font property

To change the tab font:

tabBar.font = '12pt cursive'; // accepts full CSS font spec

To set the size (i.e., height) of the tabs (for example to accommodate outsized fonts):

• Before instantiation: Reset the default tab size (initially 29 pixels):

  CurvyTabs.size = 40;
  

• After instantiation:

  tabBar.size = 40;
  

Container width and height property

The container must have a width and height. The default is 500 × 500 pixels.

• Declaratively, before instantiation: Use CSS to change the default (affects all instances):

  <style>
     .curvy-tabs-container { width: 750px; height: 1050px; }
  </style>
  

• Programmatically, after instantiation: An instance's container width and height can be set programmatically:

  tabBar.width = 750; // sets both the tab bar width and the container width
  tabBar.height = 1050;
  

css method

The tab bar’s background color, border color, and border width affect both the tab bar and content area and can be set as follows:

• Declaratively, before instantiation: Use CSS (affects all instances):

  <style>
     .curvy-tabs-container > div {
         border: 2x solid red;
         background-color: yellow;
      }
  </style>
  

• Programmatically, after instantiation: Such styles can be set programmatically using the css method (works like jQuery's css method):

  tabBar.css('borderColor', 'red'); // sets border color
  tabBar.css('borderColor'); // returns border color
  tabBar.css({ borderColor: 'yellow', backgroundColor: 'red' }); // sets both style properties
  tabBar.css(['borderColor', 'backgroundColor']); // returns style dictionary
  

(Note that the tab bar’s background color is only visible through transparent tabs; there is no point in setting this if all your tabs have defined colors.)

Tab contentCss method

To set styles on all the content divs at once:

• Declaratively, before instantiation: Use CSS (affects all instances):

  <style>
      .curvy-tabs-content > div > * { padding: 3px }
  </style>
  

• Programmatically, after instantiation: Use the contentCss method (also like jQuery's css method):

  tabBar.contentCss('padding', '2px');
  

Event Handlers

tabBar.onclick

If defined as a function, this event handler will be fired on every click of any tab. The event object contains content (a reference to the content element to be displayed, whose name attribute is used as the tab label), left (horizontal pixel location of left edge of tab, and width (width of tab). For example:

tabBar.onclick = function(event) {
    console.log('tab clicked:', event.content.getAttribute('name'));
};

event.preventDefault()

Calling event.preventDefault() from this handler will prevent the clicked tab from being selected. Therefore, this is a way of disabling all tabs.

tab.onclick

In addition, each tab may also define its own event handler, fired only when that tab is clicked on. For example:

var content = this.tabBar.container.querySelector('.curvy-tabs-content'); // eg, first tab
tabBar.tabs.get(content).onclick = function(event) { ... }; // tabs is a WeakMap

event.preventDefault()

As above, calling event.preventDefault() from within will prevent the tab from being selected. This is a way of disabling just this specific tab.

event.stopPropagation()

The event will be propagated to the tabBar.onclick handler (if defined) unless you call event.stopPropagation() from within.

Version History

• 1.0.0 — Initial version
• 2.0.0
  • Cleaner DOM structure
  • height is now size
  • containerHeight is now height
  • added contents, contentDivs, css, and contentCss`
• 2.0.1
  • Bump version numbers in README.md
• 2.1.0
  • Add & document getTab, select, and clear convenience methods
  • Tab visibility now respects content div's display prop
  • Document how to hide a tab by setting content div's display prop
  • Add & document hide, show, and toggle convenience methods