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
- Desktop view
![tabs-logo](https://user-images.githubusercontent.com/2913308/62655109-f7726d00-b97e-11e9-8378-ca0c7b58d654.png)
- Mobile view
![tabs-logo](https://user-images.githubusercontent.com/2913308/62656815-a9f7ff00-b982-11e9-93fc-45e4ec9457e6.png)
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.
-
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 ingenerateTabs.js
.
- The application developed here is fully responsive & the mobile view starts when the screen size is less than 769px.
The application has been developed using HTML, CSS, JavaScript and jQuery.
For more information about jQuery, please visit the official docs.
To run the application, just open index.html
in your browser.
- Clone the repo
git clone https://github.com/nashcheez/responsive-tabs.git
- Open
index.html
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.
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 |
See the open issues for a list of proposed features (and known issues).
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.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
@nashcheez - [email protected]
Project Link: https://github.com/nashcheez/responsive-tabs