keyContentSwitcher - JS library for quick switch creation

Foreword

Switchable tabs, accordions and other switches are all commonplace on the modern Internet.
There are also a large number of graphic JS libraries and frameworks, including those implementing this functionality, it doesn't even make sense to list them.
Below are the differences from (and hence the same advantages over) widely known

Essence / Abstraction

There is a group of content from which only one element can be active.
There can be several such groups on the page. So you need to work with:

1. group name
2. element name
3. the ability to somehow set / switch the active element.

This approach allows you to implement any switch completely unattached to layout. What is the difference from well-known libraries with a ready-made set of styles, classes for the implementation of a rigid, specified switch type with a fixed set of elements.
')

Implementation / Use

1) To include an HTML element in a group, the data-content-of-group attribute is added to it = “group name (key)”

2) To specify the HTML key of the element, the data-key-in-group attribute is added to it = "name (key) of the content in the group"

example

<div data-content-of-group="lessons" data-key-in-group="1">...</div> 

3) For the activation / switching of the active element, the link elements are specified - links, similar to the content definition, only the data-link-of-group attribute will be used instead of the data-content-of-group

example

 <a data-link-of-group="lessons" href="#" data-key-in-group="1">    1</a> 

You can define more than 1 item and links for 1 content key.

The switch (s) will begin to function upon completion of the page loading. Link clicks are implemented through a live subscription (“click”) - so they will work immediately, including for dynamically added items.

The active content (s) and the link (s) have the class "active" .

All groups present on the page when the page is finished loading is checked for the presence of the active content element in the group (having the corresponding css class). If there is no such, one content from the group becomes “active”.

It remains to add styles.

Task styles

The most common script to display only active content.
I usually use the following styles:

.tabHidden{ display: none; } .tabsContainer .active{ display: block; }

add tabHidden class for content element and wrap content elements

  <div class="tabsContainer">...</div> 

Advanced Usage

Event snapping

keyContentSwitcher.tabChanged occurs after changing active content
Sample event subscription:

 keyContentSwitcher.tabChanged("_", function(groupKey, key-in-group){ alert("      \"" + groupKey + "\"");}) 

keyContentSwitcher.beforeTabChanged occurs before changing the active tab. You can prevent the change of content by returning false.

In both cases, key-in-group is the name of the key to be activated; to get the current active content key in the beforeTabChanged handler, you can call the function

 keyContentSwitcher.getActiveKey(groupKey) 

If the group name is not specified when defining a handler, it will be called for all groups.

Using nested switches

It is often the case that there is another content group (subgroup) inside the content of the switch.
Often, these elements call up “heavy” scripts during initialization (selection of the first active content of the group) —ajax requests, work with graphics, and the like.
Therefore, for such a subgroup it will be more correct to activate only when the contents of the "parent" will be shown. For this, the activation of the group is suppressed.

To suppress the activation of the group, it must be added to the list of suppressed, specified when setting the parameters.

 keyContentSwitcher.applySettings({ignoredToActivateGroups:["_",...]}); 

This call must be made before the page loads.

In this case, activation means only the selection of the active content for the group and the triggering of the corresponding handlers - if the active content of the group is not selected.

Group activation

To automatically select active content for a dynamically added or group used in the suppression list, you must “activate” the group. Activation of the group is made by function

 keyContentSwitcher.activateGroup("_") 

If you need to activate specific content, use the function

 keyContentSwitcher.setActiveKey("_", "_") 

Renaming Attributes

In cases of name conflicts - when the HTML attributes necessary for the functioning of the library is used by another library;
as well as for some other reasons (for example, I initially used the attributes _reg_tabGroupLink, _reg_tabGroupBody, _reg_tabKeys )
You can override them, and you can also override the css class that determines that the element is "active" when setting parameters

 keyContentSwitcher.applySettings( {linkOfGroup : "link-of-group", contentOfGroup : "content-of-group", keyInGroup : "key-in-group", activeClass : "active", prefix: "data-"}); 

each used HTML attribute is specified as prefix + attributeName . Therefore, in the case of a name conflict, it is enough to rename only prefix .

The default prefix "data-" is used for valid HTML layout.

Other

Some of the functions are not listed for brevity - see the code.

project repository

Examples

Vertical Tabs
Horizontal tabs
Accordion
Sub tabs
Renaming Attributes
Dynamic content
Use in a real project (using the old version of the library - given to display the capabilities of the library)
Using multiple content and multiple links on the same key

Requirements

The library requires jquery starting from version 1.4

There are no problems with browsers and popular JS libraries.