js-tabs

Transforms tabs markup to a simple but beautiful tabs system

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
js-tabs
301.0.15 years ago5 years agoMinified + gzip package size for js-tabs in KB

Popular Searches

Readme

JS Tabs
Transforms tabs markup to a simple but beautiful tabs system: showing the corresponding content when clicking on a tab.

Live example

http://www.liran.co.uk/js-tabs

Features

- Supports multiple JS Tabs components on one page - Supports nesting JS Tabs inside one another - Has a tab marker out of the box, which also:
- is animated
- changes color based on the color of each tab
- resizes on window resize
- Exposes a destroy method to remove all js-tabs event listeners

Installation

npm install js-tabs

Usage

HTML

<div id="my-js-tabs">
  <nav class="js-tabs__nav">
    <ul class="js-tabs__tabs-container">
      <li class="js-tabs__tab active">Tab 1</li>
      <li class="js-tabs__tab">Tab 2</li>
      <li class="js-tabs__tab">Tab 3</li>
      <li class="js-tabs__tab">Tab 4</li>
    </ul>
    <div class="js-tabs__marker"></div>
  </nav>

  <ul class="js-tabs__content-container">
    <li class="js-tabs__content active">
      <p>Content 1</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 2</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 3</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 4</p>
    </li>
  </ul>
</div>

JS

import JsTabs from 'js-tabs'

const myTabs = new JsTabs({
  elm: '#my-js-tabs'
})
myTabs.init()

SCSS

Requires _js-tabs-base.scss to work properly. 
@import '~js-tabs/src/js-tabs-base';

Usage - ES5 and CSS

<head>
  <!-- ... -->
  <link rel="stylesheet" href="js-tabs/_js-tabs-base.css">
  <script src="js-tabs/index.js"></script>
</head>
<body>
  <!-- ... -->
  <script>
    var myTabs = new JsTabs.default({
      elm: '#my-js-tabs'
    })
    myTabs.init()
  </script>
</body>

Parameters

JsTabs takes an object with the following properties:
{
  elm,
  onClickHandlerComplete,
  shouldScrollTabIntoView
}

elm

Element/String, required The root element of the JS Tabs in the DOM. Can be either a reference to the element or a string representing a selector for the element.

onClickHandlerComplete

Callback function, optional If passed, will be called after the tab has changed.

shouldScrollTabIntoView

Boolean, optional, default: true Whether on not to scroll towards the tab when clicked (useful in small displays in which the tabs might not all fit on the screen)

Public methods

init()

Initialises the JS Tabs instance for the element specified

destory()

Removes all event listeners of the JS Tabs instance

CSS classes used

  • js-tabs__nav
  • js-tabs__tab
  • js-tabs__content-container
  • js-tabs__content
  • js-tabs__marker
  • js-tabs__no-marker (see below)
  • active

Removing the marker

If you want to implement the marker differently, you can remove the existing one like so:
...
<nav class="js-tabs__nav">
- <ul class="js-tabs__tabs-container">
+ <ul class="js-tabs__tabs-container js-tabs__no-marker">
    <li class="js-tabs__tab active">Tab 1</li>
    <li class="js-tabs__tab">Tab 2</li>
    <li class="js-tabs__tab">Tab 3</li>
    <li class="js-tabs__tab">Tab 4</li>
  </ul>
- <div class="js-tabs__marker"></div>
</nav>
...

Dependencies

None

Contributing

Feel free to submit issues and pull requests

Development

  • Run the following, which will serve the JS Tabs example on localhost:8081 and watch for changes.
npm start

  • Navigate to http://localhost:8081/example/ to view the output
  • Test the library in src/example:
index.html index.js js-tabs-custom.scss
  • Edit the library itself in src:
index.js js-tabs-base.scss

License

This project is licensed under the MIT License - see the LICENSE file for details