Enisi.1
Numri i postimeve : 635 Join date : 17/01/2009
| Titulli: The Ol' Switcheroo Sat Jan 17, 2009 8:15 pm | |
| You have an element and within that element you want an item to be clicked on and set as active. Then you want to click on another item and have it to be set as active. Maybe it's navigation, maybe it's tabs. This is a common pattern. So much so, that I've rewritten this code a few times but keep losing track of it. This is a jQuery plugin that does the ol' switcheroo and is very simple. When you click on an element, it'll set it as active. When you click on another, it'll remove the active class from the currently active item and then enable the active item. Super simple, nothing more, nothing less. (function($){ $.fn.switcheroo = function(els){ this.each(function(){ var p = $(this); $(els||'li', p).click(function(){ $('.active', p).removeClass('active'); $(this).addClass('active'); }); }); }}(jQuery));Then, it can be attached to an element using a couple different approaches: $('ul').switcheroo();$('ul').switcheroo('a');Since this is most often used with lists, the first line of code omits any parameter as the plugin automatically looks for LIs contained within the parent element. However, if you want to be specific, you can specify the selector as the one and only parameter. That's all there is to it. This can, of course, be used as a basic framework for building additional functionality in, like callback functions and animations. In any case, you can check out this demo page to see it in action. http://feeds.feedburner.com/~f/snookca?i=mji3N</img> http://feeds.feedburner.com/~f/snookca?i=7KLLn</img> http://feeds.feedburner.com/~f/snookca?i=P8u7n</img>Me shum... | |
|
Enisi.1
Numri i postimeve : 635 Join date : 17/01/2009
| Titulli: Re: The Ol' Switcheroo Sun Jan 18, 2009 9:56 pm | |
| | |
|