Created
October 3, 2014 05:02
-
-
Save Grawl/2ee642d4a7bee55a865a to your computer and use it in GitHub Desktop.
Zurb Foundation Tabs addon to change tab pairs with hover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Function to preview tabs content on navigation element hover and return to selected (clicked or predefined) tab on mouseout from navigation container | |
# Attach it to tabs navigation container and content container elements | |
tabs_hover_change=(navigation, content)-> | |
# Get string from Foundation settings | |
tabs_class_active=Foundation.libs.tab.settings.active_class | |
# Assign tabs objects | |
tabs_navigation=navigation | |
tabs_content=content | |
tab_title_class='.tab-title' | |
# Function to get tab ID based on anchor href as interaction element | |
tab_get_id=(el)-> | |
return el.find('a') | |
.attr 'href' | |
.substring 1 | |
# Set initially selected tab to return | |
tab_selected=tabs_navigation.find '.'+tabs_class_active | |
tab_selected_id=tab_get_id tab_selected | |
# Do not run this on touch device | |
if not Modernizr.touch | |
# Function to select one tab based on chosen ID | |
tab_select=(id)-> | |
$ '[href=#'+id+']' | |
.closest tab_title_class | |
.addClass tabs_class_active | |
.siblings().removeClass tabs_class_active | |
tabs_content | |
.find '#'+id | |
.addClass tabs_class_active | |
.siblings().removeClass tabs_class_active | |
# Set triggers | |
tab_title=tabs_navigation.find tab_title_class | |
tab_title | |
.mouseover -> | |
# Select tab on hover | |
tab_select tab_get_id $(this) | |
return | |
.click -> | |
# Set the point of return to clicked tab | |
tab_selected_id=tab_get_id $(this) | |
tab_select tab_selected_id | |
return | |
# Return to chosen tab when user is going to do something else | |
tabs_navigation | |
.mouseout -> | |
tab_select tab_selected_id | |
return | |
# Apply hover to '~floors-navigation`+`~floors-content` tabs pair | |
floor_class_prefix='.building-wireframe-floors' | |
floor_navigation=$ floor_class_prefix+'-navigation' | |
floor_content=$ floor_class_prefix+'-content' | |
tabs_hover_change floor_navigation, floor_content | |
# Apply hover to '.apartments-navigation`+`.apartments-content` tabs pair | |
apartments_prefix='.apartments' | |
apartments_navigation=$ apartments_prefix+'-navigation' | |
apartments_content=$ apartments_prefix+'-content' | |
tabs_hover_change apartments_navigation, apartments_content |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment