MediaWiki:Gadget-Tabber.js: Difference between revisions
From SmashWiki, the Super Smash Bros. wiki
Jump to navigationJump to search
(New Page: // ================== // tabber.js // Authors: Eric Fortin, Alexia E. Smith // ================== (function($) { $.fn.tabber = function() { return this.each(function() { // creat...) |
mNo edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 12: | Line 12: | ||
nav = $('<ul>').addClass('tabbernav'); | nav = $('<ul>').addClass('tabbernav'); | ||
tabContent.each(function() { | tabContent.each(function() { | ||
var anchor = $('<a>'). | var anchorHtml = this.title.replace("''", '<i>').replace("''", '</i>'); | ||
this.title = this.title.replaceAll("''", ''); | |||
var anchor = $('<a>').html(anchorHtml).attr('title', this.title).attr('href', 'javascript:void(0);'); | |||
$('<li>').append(anchor).appendTo(nav); | $('<li>').append(anchor).appendTo(nav); | ||
}); | }); | ||
Line 32: | Line 34: | ||
} | } | ||
// setup initial state | // setup initial state | ||
showContent(tabContent.first().attr('title')); | |||
// Repond to clicks on the nav tabs | // Repond to clicks on the nav tabs | ||
Line 41: | Line 40: | ||
var title = $(this).attr('title'); | var title = $(this).attr('title'); | ||
e.preventDefault(); | e.preventDefault(); | ||
showContent(title); | |||
$(window).scroll(); | |||
}); | }); | ||
Latest revision as of 15:33, December 4, 2023
// ==================
// tabber.js
// Authors: Eric Fortin, Alexia E. Smith
// ==================
(function($) {
$.fn.tabber = function() {
return this.each(function() {
// create tabs
var $this = $(this),
tabContent = $this.children('.tabbertab'),
nav = $('<ul>').addClass('tabbernav');
tabContent.each(function() {
var anchorHtml = this.title.replace("''", '<i>').replace("''", '</i>');
this.title = this.title.replaceAll("''", '');
var anchor = $('<a>').html(anchorHtml).attr('title', this.title).attr('href', 'javascript:void(0);');
$('<li>').append(anchor).appendTo(nav);
});
$this.prepend(nav);
/**
* Internal helper function for showing content
* @param string title to show, matching only 1 tab
* @return true if matching tab could be shown
*/
function showContent(title) {
var content = tabContent.filter('[title="' + title + '"]');
if (content.length !== 1) return false;
tabContent.hide();
content.show();
nav.find('.tabberactive').removeClass('tabberactive');
nav.find('a[title="' + title + '"]').parent().addClass('tabberactive');
return true;
}
// setup initial state
showContent(tabContent.first().attr('title'));
// Repond to clicks on the nav tabs
nav.on('click', 'a', function(e) {
var title = $(this).attr('title');
e.preventDefault();
showContent(title);
$(window).scroll();
});
$this.addClass('tabberlive');
});
};
})(jQuery);
$(document).ready(function() {
$('.tabber').tabber();
});