Skip to content

A plugin that switches between tabs on desktop and select drop down on mobile/tablet.

License

Notifications You must be signed in to change notification settings

nashcheez/responsive-tabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contributors Forks Stargazers Issues MIT License LinkedIn


tabs-logo

Responsive Tabs

Responsive Tabs is a plugin that helps switch between tabs on desktop and a select drop down on a mobile/tablet.

View Demo · Report Bug · Request Feature

Table of Contents

About The Project

  • Desktop view
tabs-logo
  • Mobile view
tabs-logo

Tabs are user interface elements that allow you to navigate between multiple documents in a single window. Regular implementations don't support responsiveness and tabs don't look polished on a mobile device. This plugin helps you to resolve that.

Key Features

  • The Responsive Tabs application implements tabs with mutually exclusive content. Only one tab is active at a given time and the content corresponding to the active tab is only visible. Eg: http://liquidslider.com/

  • On mobile the tabs transform into a <select> drop down. The drop-down retains all the states from the desktop tabs and vice versa (e.g. The active tab becomes the selected option).

  • The app has an object oriented architecture implementing encapsulation and all the global variables & functions are attributed to a single tabSwitcher object in generateTabs.js.
  • The application developed here is fully responsive & the mobile view starts when the screen size is less than 769px.

Built With

The application has been developed using HTML, CSS, JavaScript and jQuery.

For more information about jQuery, please visit the official docs.

Getting Started

To run the application, just open index.html in your browser.

Installation

  1. Clone the repo
git clone https://github.com/nashcheez/responsive-tabs.git
  1. Open index.html

Usage

The code for the tabs plugin is implemented in tabSwitcher.js & tabSwitcher.css. To configure the tabs, please look into the demo Ihat is available in generateTabs.js & generateTabs.css. Entry point for the application is in index.html at the root.

API

A tabConfiguration option has been provided to configure the tabs. It includes the following API:

API Description
tabName defines all the tab names in an array
commonClass state a common class that is to be applied to all tabs
tabID unique ids of the tabs
tabClickRequestFunction click callback function for all tabs
customID main tab container that is defined in the HTML
defaultTab defines the tab that needs to be default on page load

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

@nashcheez - nashcheez@gmail.com

Project Link: https://github.com/nashcheez/responsive-tabs

Acknowledgements

About

A plugin that switches between tabs on desktop and select drop down on mobile/tablet.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published