jQuery Semantic Tabs
In the early days of my career as a web developer, a task asked me to convert text to tabs. So, I opened a page of jQuery UI Tabs and then realized that wasn't a solution.
Here were the details of the task. There was a static field of HTML content. Each h3
tag must be a tab title. Content or all tags after h3
must be tab content. It was challenging for me as a junior and my jQuery skill was still limited. Honestly, that was easy enough. The code is even simple and short. Here let me show you.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
I named the plugin jQuery SemanticTabs. It is a jQuery plugin that can convert semantic HTML tags to tabs. You can get the source code at https://github.com/aristorinjuang/jquery.semantic-tabs or install it by npm with the command npm i jquery.semantic-tabs
. Let's play the demo here.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>jQuery Semantic Tabs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="semantic-tabs">
<h3>Title 1</h3>
<p>This is the content of 1.</p>
<p>This is the content of 1.</p>
<p>This is the content of 1.</p>
<h3>Title 2</h3>
<p>This is the content of 2.</p>
<p>This is the content of 2.</p>
<p>This is the content of 2.</p>
<h3>Title 3</h3>
<p>This is the content of 3.</p>
<p>This is the content of 3.</p>
<p>This is the content of 3.</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../jquery.semantic-tabs.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The content of semantic-tabs is good. Let's convert it to tabs to bring a better user experience.
1
2
3
$('#semantic-tabs').semanticTabs({
head: 'h3'
});
Plugins simplify our code. We set the head of the tab to be h3
while the default is also h3
. In case to show you that is the most common option. Let's check the result.
Let me explain the source code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
(function ( $ ) {
$.fn.semanticTabs = function( options ) {
var settings = $.extend({
componentClass: 'semantic-tabs-component',
head: 'h3',
headsID: 'semantic-tabs-heads'
}, options );
this.prepend( `<ul id="${settings.headsID}"></ul>` );
this.find( settings.head ).each(function( i ) {
$( this ).hide().nextUntil( settings.head ).wrapAll( `<div class="${settings.componentClass}-${i} ${settings.componentClass}"></div>` );
$( `#${settings.headsID}` ).append( `<li class="${settings.componentClass}-${i} ${settings.componentClass}">${$( this ).text()}</li>` );
});
this.find( `#${settings.headsID} li` ).on( 'click', function() {
var component = $( this ).attr( 'class' ).split(' ')[0];
$( `li.${settings.componentClass}` ).removeClass( 'active' );
$( `li.${component}` ).addClass( 'active' );
$( `div.${settings.componentClass}` ).hide();
$( `div.${component}` ).show();
});
$( `li.${settings.componentClass}-0` ).addClass( 'active' );
$( `div.${settings.componentClass}` ).hide();
$( `div.${settings.componentClass}-0` ).show();
return this;
};
}( jQuery ));
- We declared three options;
componentClass
,head
, andheadsID
in thesettings
variable. - We create the list of heads while wrapping the content after the
h3
tag with thediv
tag. - We set the function for the click event.
- We set the initial state.
What happens when the head gets clicked is:
- We remove the
active
class for all heads. - We put the
active
class to the clicked one. - We hide all tab contents.
- We show only the active one of the tab content.
No CSS from this plugin. You only need to style your tabs only.
Some people said that jQuery is dead. I think because today is the era of client-side rendering. People prefer to play with React, Vue, and Angular. But when it comes to server-side rendering, you will need jQuery. jQuery simplifies our code of JavaScript to be painless. So, I think it is a must-have skill for today too, especially for web developers.
Feel free to contribute to this plugin. Create a merge request for it then assign it to me. Maybe you can add some features, and options, or make the code to be better or faster.
References
- https://learn.jquery.com/plugins/basic-plugin-creation/
- https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry
Related Articles
- Semantic Tabs
- Object-Oriented Programming in TypeScript
- Callback, Promise, Async, and Await in TypeScript
- TypeScript with MySQL
- Simple REST API with TypeScript