keyContentSwitcher - JS library for quickly creating switches

Foreword

Switchable tabs, accordions and other switches are all common on the modern Internet.
There are also a large number of graphical JS libraries and frameworks, including those that implement this functionality, it does not even make sense to list.
Below are the differences from (and hence the advantages over) the widely known

Essence / Abstraction

There is some group of contents from which only one element can be active.
There may be several such groups on the page. Thus, you need to work with:

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

This approach allows you to implement any switch completely not tied to layout. What is the difference from well-known libraries with a ready-made set of styles and classes for implementing a hard-coded type of switch with a fixed set of elements?

Implementation / Use

1) To include the HTML element in the group, the attribute data-content-of-group = "name (key) of the group" is

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

example

...

3) To activate / switch the active element, link elements are set - links, similar to the definition of content, only the data-link-of-group attribute will be used instead of data-content-of-group

example

 Приступить к уроку 1

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

The switch (s) will begin to function upon completion of the page loading. Clicks on links are implemented through a subscription to live ("click") - so that they will work immediately, including for dynamically added elements.

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

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

It remains to add styles.

Style setting

The very common script itself displays only active content.
I usually use the following styles:

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

add a tabHidden class for the content item and wrap the content items

...

Advanced Usage

Event Binding

keyContentSwitcher.tabChanged occurs after changing the active content
An example of an event subscription:

keyContentSwitcher.tabChanged("имя_группы", function(groupKey, key-in-group){ alert("произошла смена активного содержимого для группы \"" + groupKey + "\"");})

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

In both cases, key-in-group is the name of the activated key; to obtain 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 specifying a handler, it will be called for all groups.

Using nested switches

A common situation is when inside the contents of the switch there is another content group (subgroup).
Often these elements cause “heavy” scripts during initialization (selecting the first active content of the group) - ajax requests, graphics, and the like.
Therefore, for such a subgroup, it will only be more correctly activated when the contents of the “parent” are shown. To do this, the activation of the group is suppressed.

To suppress the activation of a group, you need to add it to the list of suppressed, specified when setting the parameters.

keyContentSwitcher.applySettings({ignoredToActivateGroups:["игнорируемая_группа",...]}); 

This call must be made before the page has finished loading.

In this case, activation means only the selection of active content for the group and the operation 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 group or a group used in the suppression list, you must “activate” the group. Activation of the group is carried out by the function

keyContentSwitcher.activateGroup("название_группы") 

If you need to activate specific content, use the function

keyContentSwitcher.setActiveKey("название_группы", "ключ_содержимого")

Rename Attributes

In cases of name conflict - when the HTML attributes necessary for the functioning of the library are used by another library;
and also for some other reasons (for example, I used the attributes _reg_tabGroupLink, _reg_tabGroupBody, _reg_tabKeys initially )
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 defined as prefix + attributeName . Therefore, in the event of a name conflict, it is enough to rename only prefix .

By default, prefix “data-” is used for HTML validation.

Other

Some functions are not given for brevity - see the code.

project repository

Examples

Vertical Tabs
Horizontal Tabs
Accordion
Nested Tabs
Rename Attributes
Dynamic Content
Use in a Real Project (using the old version of the library - used to display library capabilities)
Using several contents and several links on the same key

Requirements

The library requires jquery starting from version 1.4.

There were no problems with browsers and popular JS libraries.