From d72703e77af18caa927f1d81646e59dd65b66edd Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:30:17 -0300 Subject: [PATCH 1/6] Clear whitespace. --- javascripts/tabs.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index 1c3de1a..bf7ce46 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -7,7 +7,6 @@ * 8/17/2011 */ - $('body').on('click', 'ul.tabs > li > a', function(e) { //Get Location of tab's content @@ -26,4 +25,4 @@ $('body').on('click', 'ul.tabs > li > a', function(e) { $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); } -}); \ No newline at end of file +}); From 17f0141da9e70f088077934f68852ea4a4d0ed01 Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:30:57 -0300 Subject: [PATCH 2/6] JSDoc-compatible comment formatting. --- javascripts/tabs.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index bf7ce46..9b5f4dc 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -1,11 +1,12 @@ -/* -* Skeleton V1.1 -* Copyright 2011, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 8/17/2011 -*/ + +/** + * Skeleton V1.1 + * Copyright 2011, Dave Gamache + * www.getskeleton.com + * Free to use under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * 8/17/2011 + */ $('body').on('click', 'ul.tabs > li > a', function(e) { From 6da48f64c3c132261240991e827cbd13349c6339 Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:32:51 -0300 Subject: [PATCH 3/6] Switched to 2-space indentation. --- javascripts/tabs.js | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index 9b5f4dc..ca8fdbe 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -9,21 +9,18 @@ */ $('body').on('click', 'ul.tabs > li > a', function(e) { + //Get Location of tab's content + var contentLocation = $(this).attr('href'); - //Get Location of tab's content - var contentLocation = $(this).attr('href'); + //Let go if not a hashed one + if(contentLocation.charAt(0)=="#") { + e.preventDefault(); - //Let go if not a hashed one - if(contentLocation.charAt(0)=="#") { + //Make Tab Active + $(this).parent().siblings().children('a').removeClass('active'); + $(this).addClass('active'); - e.preventDefault(); - - //Make Tab Active - $(this).parent().siblings().children('a').removeClass('active'); - $(this).addClass('active'); - - //Show Tab Content & add active class - $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); - - } + //Show Tab Content & add active class + $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); + } }); From 4c7d6b0b3ed934cbd1c655f4fb29f27fbff62c0f Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:33:42 -0300 Subject: [PATCH 4/6] Don't assume $ is jQuery. Rely on `jQuery` global instead. --- javascripts/tabs.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index ca8fdbe..f513b24 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -8,19 +8,21 @@ * 8/17/2011 */ -$('body').on('click', 'ul.tabs > li > a', function(e) { - //Get Location of tab's content - var contentLocation = $(this).attr('href'); +jQuery(function ($) { + $('body').on('click', 'ul.tabs > li > a', function(e) { + //Get Location of tab's content + var contentLocation = $(this).attr('href'); - //Let go if not a hashed one - if(contentLocation.charAt(0)=="#") { - e.preventDefault(); + //Let go if not a hashed one + if(contentLocation.charAt(0)=="#") { + e.preventDefault(); - //Make Tab Active - $(this).parent().siblings().children('a').removeClass('active'); - $(this).addClass('active'); + //Make Tab Active + $(this).parent().siblings().children('a').removeClass('active'); + $(this).addClass('active'); - //Show Tab Content & add active class - $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); - } + //Show Tab Content & add active class + $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); + } + }); }); From 110765dbc18f02a0798826a135180b0d3f7ce702 Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:38:50 -0300 Subject: [PATCH 5/6] Misc refactoring. - Switched to `hashchange` listening instead of delegation We still check that the given hash exists as a `href` within a valid Skeleton tabs markup, but you can now send links around that focus on tabs. As an example, if I tweet out mypage.com/#activetab, it will check that `#activetab` is a valid href in an anchor within an `
    ` element, and if so, make that tab active. - In addition, you can have multiple anchors in the page that trigger tabs by simply setting the appropriate `href`. - Leverage `closest` and `find` instead of `parent`, `siblings` and `children` (code simplification). --- javascripts/tabs.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index f513b24..a8d2147 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -9,20 +9,20 @@ */ jQuery(function ($) { - $('body').on('click', 'ul.tabs > li > a', function(e) { - //Get Location of tab's content - var contentLocation = $(this).attr('href'); + // hash change handler + function hashchange () { + var hash = window.location.hash + , el = $('ul.tabs [href*="' + hash + '"]') - //Let go if not a hashed one - if(contentLocation.charAt(0)=="#") { - e.preventDefault(); + if (el.length) { + $(el).closest('.tabs').find('.active').removeClass('active'); + $(el).addClass('active'); - //Make Tab Active - $(this).parent().siblings().children('a').removeClass('active'); - $(this).addClass('active'); - - //Show Tab Content & add active class - $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); + $(hash).show().addClass('active').siblings().hide().removeClass('active'); } - }); + } + + // listen on event and fire right away + $(window).on('hashchange.skeleton', hashchange); + hashchange(); }); From bc178a522844c21ee689ada53391197a34fc67c0 Mon Sep 17 00:00:00 2001 From: Guillermo Rauch Date: Thu, 1 Mar 2012 19:53:51 -0300 Subject: [PATCH 6/6] It now works before dom is ready :) --- javascripts/tabs.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index a8d2147..b832e0c 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -8,21 +8,22 @@ * 8/17/2011 */ -jQuery(function ($) { +(function ($) { // hash change handler function hashchange () { var hash = window.location.hash , el = $('ul.tabs [href*="' + hash + '"]') + , content = $(hash) - if (el.length) { - $(el).closest('.tabs').find('.active').removeClass('active'); - $(el).addClass('active'); - - $(hash).show().addClass('active').siblings().hide().removeClass('active'); + if (el.length && !el.hasClass('active') && content.length) { + el.closest('.tabs').find('.active').removeClass('active'); + el.addClass('active'); + content.show().addClass('active').siblings().hide().removeClass('active'); } } // listen on event and fire right away $(window).on('hashchange.skeleton', hashchange); hashchange(); -}); + $(hashchange); +})(jQuery);