Skip to content

Instantly share code, notes, and snippets.

@natecavanaugh

natecavanaugh/nav_tab_thing.html

Created June 6, 2012 18:16
Show Gist options
  • Save natecavanaugh/2883703 to your computer and use it in GitHub Desktop.
Save natecavanaugh/2883703 to your computer and use it in GitHub Desktop.
Download ZIP
navigation-tab-thing
Raw
nav_tab_thing.html
<!DOCTYPE html>
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
}
#wrapper {
padding: 10px;
}
.aui-custom {
background: #eee;
border: 3px solid #999;
}
.aui-custom-rendered {
background: #ffc;
border: 3px solid #fc0;
}
.content-area {
display: none;
}
.content-area.selected {
display: block;
}
</style>
</head>
<body>
<ul id="test">
<li><a href="#div1">Div1</a></li>
<li><a href="#div2">Div2</a></li>
<li><a href="#div3">Div3</a></li>
<li><a href="#div4">Div4</a></li>
</ul>
<div class="content-area selected" data-bannerImage="path/to/doclib/image" id="div1">Div 1</div>
<div class="content-area" id="div2">Div 2</div>
<div class="content-area" id="div3">Div 3</div>
<div class="content-area" id="div4">Div 4</div>
<script type="text/javascript" charset="utf-8">
AUI().ready(
'aui-base',
function(A) {
if (location.hash) {
var div = A.one(location.hash);
if (div) {
div.radioClass('selected');
div.setStyle('backgroundImage', div.attr('data-bannerImage'));
}
}
A.one('#test').delegate(
'click',
function(event) {
var a = event.currentTarget;
event.preventDefault();
var href = a.get('hash');
var div = A.one(href);
if (div) {
div.radioClass('selected');
div.setStyle('backgroundImage', div.attr('data-bannerImage'));
}
},
'a'
);
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment