Skip to content

Instantly share code, notes, and snippets.

@genedelisa

genedelisa/main.js

Last active December 13, 2015 19:18
Show Gist options
  • Save genedelisa/4961652 to your computer and use it in GitHub Desktop.
Save genedelisa/4961652 to your computer and use it in GitHub Desktop.
Download ZIP
Handle tab selection/activation in jQuery UI 1.10
Raw
main.js
$(document).ready(function () {
var tabOpts = {
activate: handleTabSelect,
// fx has been deprecated
show: {
height: 'toggle',
opacity: 'toggle'
}
};
$("#theTabs").tabs(tabOpts);
function handleTabSelect(event, tab) {
if (tab.newPanel.selector === "#tabone") {
console.log("tab one");
alert("tab one");
}
if (tab.newPanel.selector === "#tabtwo") {
console.log("tab two");
alert("tab two");
}
}
}); // ready
Raw
tabs.html
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="main.js"></script>
<meta charset=utf-8 />
<title>jQuery UI tabs</title>
</head>
<body>
<div id="theTabs">
<ul>
<li> <a href="#tabone">one</a>
</li>
<li> <a href="#tabtwo">two</a>
</li>
</ul>
<div id='tabone'>
<p>tab one</p>
</div>
<div id='tabtwo'>
<p>tab two</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment