search

jellekralt / Responsive-Tabs

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
http://jellekralt.github.io/Responsive-Tabs/
MIT License
531 stars 228 forks source link

Update jquery.responsiveTabs.js #103

Closed rothec closed 8 years ago

rothec commented 8 years ago

Hi Jelle,

I would like to suggest an improvement for your responsive tabs solution which will make the use of tabs much easier and more comfortable for inexperienced users. You can create tab containers in a very simple way.

Example HTML code:

<div class="r-tabs-magictabs">
  <!-- no <ul>-List of tabs exists! It will generated automatically -->
  <div class="r-tabs-magictabs-panel" data-magictabs-title="Tab 1.1 Heading" data-magictabs-id="tab-1-1-magic"> ....... </div>
  <div class="r-tabs-magictabs-panel" id="tab-2-magic"><h2>Tab 1.2 Heading from HTML</h2></div>
  <div class="r-tabs-magictabs-panel" data-magictabs-title="Tab 1.3 Heading"> ....... </div>
</div>

<div class="r-tabs-magictabs" data-magictabs-id="container2">
  <div class="r-tabs-magictabs-panel" data-magictabs-title="Tab 2.1 Heading" data-magictabs-id="tab-2-1-magic"> ....... </div>
  <div class="r-tabs-magictabs-panel"><h2>Tab 2.2 Titel</h2></div>
  <div class="r-tabs-magictabs-panel"> ....... </div>
</div>

<script>
$('.r-tabs-magictabs').responsiveTabs();
</script>

With this fork you can have multiple tab containers within the same page and assign the responsive tab functionality with a single line of jQuery javascript.

It is not necessery to have a list of tabs in front of the tab-panel. If the tab list does not exist, the tabMagic function automatically generate this list. It either uses the "original" IDs of the tab panels (if they exists) or tries to generate them automatically. The automatic creation of the IDs can happen in two ways: They can be provided via data-attributes (data-magictabs-id) or it automatically creates them by numbering containers and tabs sequentially. The titles of the tabs will be assigned in a similar way: The tabMagic function either looks for data-magictabs-title attribute or will look for a heading elements in the tab panel and use it as title of the tab.

What is the tabMagic functionality good for? In certain environments (like content management systems) tabbed information blocks are "assembled" from different modul outputs which are provided sequentially. When the tab container is opened it is unknown how many tabs will be provided and what their ids and what their titles will. Therefore it is not possible to create the <ul>-list with tab ids and title upfront before the first tab panel is inserted. With the tabMagic-functionality you can simply output one tab panel after the other and every piece of information which is required to create the <ul> tab list is contained in the tab panels (via data-attributes) or will be added automatically if it is missing. If you do not want to worry about tab panel ids and tab titles you don't have to add them. The tabMagic function will do this for you. The ideal solution for lazy people. ;-)

This solution is 100% compatibel to the existing responsive tabs solution and will work with existing tab containers.

Feel free to contact me if you have any questions: c.rothe@ruck-zuck-versand.de

Best regards

Christian

jellekralt commented 8 years ago

Hi Christian,

Thank you for the PR. Unfortunately, even though I think the idea is pretty neat, this is not something I feel should be in the plugin. I'd like to keep the plugin a bit more basic instead of catering to less experienced users. Thanks for your effort nonetheless!

Kind regards,

Jelle