Skip to content

Instantly share code, notes, and snippets.

@dsalazar32
Created January 26, 2012 03:36
Show Gist options
  • Save dsalazar32/1680806 to your computer and use it in GitHub Desktop.
Save dsalazar32/1680806 to your computer and use it in GitHub Desktop.
jQuery tabbing plugin utility
// Plugin :)
(function($){
$.fn.extend({
tabul8: function() {
var args = arguments[0];
var binded = $(this).children().bind('click', function(e) {
var elem = $(e.target);
var attr = elem.attr('data-callback');
if (elem[0].tagName == 'A') e.preventDefault();
if (attr !== undefined && attr !== false && !elem.hasClass('selected'))
eval(attr + '();');
if (!elem.hasClass('selected')) {
elem.parent().find('.selected').removeClass('selected');
elem.addClass('selected');
}
});
if (typeof args != 'undefined') {
for (key in args) {
switch(key) {
case 'selected':
$(this).children(':eq(' + args[key] + ')').click();
break;
}
}
}
return binded;
}
});
})(jQuery);
/* Sample Utilization
*
* Javascript
* $(document).ready(function() {
* $('#tabs').tabul8({selected:0});
* });
*
* Callbacks
* function bing() { alert('BING'); }
* function bang() { alert('BANG'); }
*
* HTML
* <div id="tabs">
* <a href="#" data-callback="bing">Bing</a>
* <a href="#" data-callback="bang">Bang</a>
* <a href="#">Bong</a>
* </div>
* <div class="clearer"></div>
* <div class="divide"></div>
*
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment