Here is the layout:
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
})
</div>
<div class="logo">
})
</div>
<g:layoutBody />
</body>
</html>
Here is the view:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TabView Control</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="
http://www.premiercampus.com/courses/login/ajax_login/yui/build//tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="
http://www.premiercampus.com/courses/login/ajax_login/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="
http://www.premiercampus.com/courses/login/ajax_login/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="
http://www.premiercampus.com/courses/login/ajax_login/yui/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="
http://www.premiercampus.com/courses/login/ajax_login/yui/build/history/history-min.js"></script>
</head>
<body class=" yui-skin-sam">
<h1>TabView</h1>
<div class="exampleIntro">
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
#yui-history-iframe {
position:absolute;
top:0; left:0;
width:1px; height:1px; /* avoid scrollbars */
visibility:hidden;
}
#demo { margin-bottom:1em; }
</style>
<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
<input id="yui-history-field" type="hidden">
<!-- Static markup required for the TabView widget. -->
<div id="demo" class="yui-navset yui-navset-top">
<ul class="yui-nav">
<li>
<em>Coverages</em></li>
<li title="active" class="selected">
<em>Payments</em></li>
<li title="" class="">
<em>Projection Results</em></li>
</ul>
<div class="yui-content">
<div style="display: none;" id="tab1">
<p>Tab 1</p>
</div>
<div style="display: block;" id="tab2">
<p>Tab 2</p>
</div>
<div style="display: none;" id="tab3">
<p>Tab 3</p>
</div>
</div>
</div>
<script>
(function () {
var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
var initialTabViewState = bookmarkedTabViewState || "tab0";
var tabView;
YAHOO.util.History.register("tabview", initialTabViewState, function (state) {
tabView.set("activeIndex", state.substr(3));
});
function handleTabViewActiveTabChange (e) {
var newState, currentState;
newState = "tab" + this.getTabIndex(e.newValue);
try {
currentState = YAHOO.util.History.getCurrentState("tabview");
if (newState != currentState) {
YAHOO.util.History.navigate("tabview", newState);
}
} catch (e) {
tabView.set("activeIndex", newState.substr(3));
}
}
function initTabView () {
// Instantiate the TabView control...
tabView = new YAHOO.widget.TabView("demo");
tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
}
// Use the Browser History Manager onReady method to instantiate the TabView widget.
YAHOO.util.History.onReady(function () {
var currentState;
initTabView();
currentState = YAHOO.util.History.getCurrentState("tabview");
tabView.set("activeIndex", currentState.substr(3));
});
// Initialize the browser history management library.
try {
YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
} catch (e) {
// The only exception that gets thrown here is when the browser is
// not supported (Opera, or not A-grade) Degrade gracefully.
initTabView();
}
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
It is a clean project with no plugins.
