A simple Facebook Tabs class
This is a simple class I wrote to turn an underlying code structure in to a simple Javascript driven tab system. There are still a few small bugs that need to be ironed out, but they aren’t huge and certainly don’t render the system unusable. Download the code.
// Class constructor function
function Tabs(target, active_tab, active_css_class){
this.tabs = {};
this.active = null;
this.css_class = active_css_class || 'active';
// locally cache a few required values
var element = document.getElementById(target),
links = element.getElementsByTagName('a'),
temp = null,
self = this;
// a simple function to handle any click events on the "handles" for the tabs
var clickHandler = function(e){
e.stopPropagation();
e.preventDefault();
self.activate(e);
}
for (var i = 0, len = links.length; i > len; i++) {
temp = links[i].getHref().split('#')[1];
this.tabs[temp] = {'parent' : links[i].getParentNode(),
'source' : links[i],
'target' : document.getElementById(temp)};
this.tabs[temp].target.setStyle('display','none');
this.tabs[temp].source.addEventListener('click',clickHandler);
}
this._activate(active_tab);
}
// The actual class definition
Tabs.prototype = {
activate : function(e){
var elem = e.target;
while(elem.getTagName().toLowerCase()!='a') {
elem = elem.getParentNode();
if(!elem) return; // this should never happen
}
elem = e.target.getHref().split('#')[1];
this._activate(elem);
return false;
},
_activate : function(elem){
if (this.active) {
this.active.target.setStyle('display', 'none');
this.active.parent.removeClassName(this.css_class);
}
this.active = this.tabs[elem];
this.active.target.setStyle('display', 'block');
this.active.parent.addClassName(this.css_class);
}
}
As you can see, this class is very simple and very concise. The class assumes that you’ve already created the necessary markup and simply traverses the tabset for all named links (ie. anything that has a # in the URL) and collects them. It then, hides all elements that have ID’s matching the named links, then shows the one element with the ID specified as the second argument of the class constructor.
This class MUST be used within a Facebook application, or it will fail due to missing DOM methods, like setStyle, addClassName, removeClassName, etc., etc.
Kohana Profiler Extender (JQuery)
While working with Kohana PHP Framework, you can have the framework output some profiler information along with the usual output, just like its cousin, CodeIgniter. Unfortunately, there is often a lot of information that gets output which can make the output rather long. Personally, I don’t like this behavior very much, so I decided to write a simple little JQuery plugin that turns the standard output into a tabbed layout. The benefit is that much less screen real estate is required you can view each item in turn, as well as displaying all available information, if you want to do so. Download the source (ZIP – 1.6KB).
The Javascript
(function($) {
$.fn.kohanaProfiler = function() {
var $profiler = $('#kohana-profiler'),
$tabs = $('
' + text + '
') .attr( 'style', $this.find('.kp-title').attr('style') ); $tabs.append('The CSS
body > #kohana-profiler { width: 960px; margin-left: auto; margin-right: auto; }
body > #kohana-profiler .kp-table { width: 100%; margin: 0 0 1em; }
body > #kohana-profiler .kp-table td { font-size: 1.3em; padding: .5em 1em; border: 1px solid #999; }
body > #kohana-profiler .kp-table .kp-title td { font-weight: bold; }
body > #kohana-profiler .kp-table tr:nth-child(2n-1) td { background-color: #eee; }
body > #kohana-profiler .kp-table tr.kp-totalrow td { font-weight: bold; background-color: transparent; }
body > #kohana-profiler .kp-table .kp-totalrow td:first-of-type { border: none; text-align: right; }
body > #kohana-profiler .kp-meta { margin: 1em 0; }
body > #kohana-profiler .kp-table-wrapper { margin: 1em 0; }
body > #kohana-profiler .kp-table-wrapper h2 { padding: .5em 1em; margin: 0 0 0 -1px; border: 1px solid #999; }
body > #kohana-profiler #kp-profile-tabs li { display: inline-block; padding: .5em 1em; margin: 0 .25em 0 0; border: 1px solid #999; font-size: 1.3em; background-color: #eee; }
body > #kohana-profiler #kp-profile-tabs a { color: #999; text-decoration: none; }
body > #kohana-profiler #kp-profile-tabs .active, body > #kohana-profiler #kp-profile-tabs .hover { border: 1px solid #333; }
body > #kohana-profiler #kp-profile-tabs .active a, body > #kohana-profiler #kp-profile-tabs .hover a { color: #333; text-decoration: underline; }
Comments
You must log in to post a comment.