BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Tab JS optimizations:

Browse Source 
- Use jQuery.live so that even if tabs are ajaxed in they still work.
- Don't use DOM ready since this JS file is already at the bottom of the page.
- Remove selected class only on sibling tabs.
- Don't add a selected class on selected tab if it's already there (avoid hits to the DOM).
- Avoid using $(this) a lot, and instead use a saved reference, as you're creating a new jQuery object each time.
- Use '$' in front of jQuery variables so that you know they are jQuery objects.
This commit is contained in:
Mauvis Ledford
2011-07-31 12:36:20 -07:00
parent 626687a878
commit f31daea627
1 changed files with 19 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
javascripts/app.js
View File

@@ -7,36 +7,27 @@
* 7/17/2011 * 7/17/2011
*/ */
/* Tabs Activiation
$(document).ready(function() { ================================================= */
$('ul.tabs > li').live('click', function(e) {
var $tab = $(this);
/* Tabs Activiation var $href = $tab.find('a:first');
================================================== */ var $otherHrefs = $tab.siblings().find('a');
var tabs = $('ul.tabs'); var contentLocation = $href.attr('href') + "Tab";
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one //Let go if not a hashed one
if(contentLocation.charAt(0)=="#") { if(contentLocation[0]=="#") {
e.preventDefault(); e.preventDefault();
$otherHrefs.removeClass('active');
//Make Tab Active //Make Tab Active
tab.removeClass('active'); if (!$href.hasClass('active')){
$(this).addClass('active'); $href.addClass('active');
}
//Show Tab Content & add active class //Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
} }
});
});
}); });