Skip to content

Instantly share code, notes, and snippets.

@farmerbradllc

farmerbradllc/nav_tab_thing.html

Forked from natecavanaugh/nav_tab_thing.html
Created June 6, 2012 19:50
Show Gist options
  • Save farmerbradllc/2884278 to your computer and use it in GitHub Desktop.
Save farmerbradllc/2884278 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>
Raw
template.vm
<style type="text/css" media="screen">
.content-area {
display: none;
}
.content-area.selected {
display: block;
}
</style>
<header class="content-head content-head-liferay-portal">
<hgroup>
<h1>$page-title.data</h1>
<div class="hr">
<div>&nbsp;</div>
</div>
</hgroup>
<nav>
<ul id="test">
#foreach($link in $links.siblings)
#if($velocityCount == 1)
<li class="selected"><a href="#div$velocityCount">$link.data</a></li>
#else
<li><a href="#div$velocityCount">$link.data</a></li>
#end
#end
</ul>
</nav>
</header>
#foreach($link in $links.siblings)
$velocityCount
#if($velocityCount == 1)
<style>
.content-area {
background: url($link.bg-image.data) 100% 0 no-repeat;
}
</style>
<div class="content-area selected" data-bannerImage="$link.bg-image.data" id="div$velocityCount">$link.data</div>
#else
<div class="content-area " data-bannerImage="$link.bg-image.data" id="div$velocityCount">$link.data</div>
#end
#end
<script type="text/javascript" charset="utf-8">
AUI().ready(
'aui-base',
function(A) {
function selectTab(href){
var div = A.one(href);
if (div) {
div.radioClass('selected');
div.setStyle('background', 'url(' + div.attr('data-bannerImage')+') 100% 0 no-repeat');
hash = href;
A.one('#test a[href$="'+ hash +'"]').ancestor().radioClass('selected');
}
}
var hash = null;
if (location.hash) {
selectTab(location.hash);
A.one('#test a[href$="'+ location.hash +'"]').ancestor().addClass('selected');
}
setInterval(function(){
if(location.hash != hash){
selectTab(location.hash);
}
}, 200);
A.one('#test').delegate(
'click',
function(event) {
var a = event.currentTarget;
var href = a.get('hash');
a.ancestor().radioClass('selected');
selectTab(href);
},
'a'
);
}
);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment