206 lines
7.9 KiB
HTML
206 lines
7.9 KiB
HTML
<!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>YUI Browser History Manager - TabView (YUI Library)</title>
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css"/>
|
|
<link type="text/css" rel="stylesheet" href="../assets/tutorial.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="doc3" class="yui-t4">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Browser History Manager: TabView</h1>
|
|
</div>
|
|
<div id="bd">
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Browser History Manager: Tutorials</a></li>
|
|
<li class="item"><a href="../navbar/index.html">Simple Navigation Bar</a></li>
|
|
<li class="item selected"><a href="index.html">TabView Control</a></li>
|
|
<li class="child active"><a href="index.html">Tutorial</a></li>
|
|
<li class="child"><a href="solution.html">Functional Example</a></li>
|
|
<li class="item"><a href="../calendar/index.html">Calendar Control</a></li>
|
|
<li class="item"><a href="../multi/index.html">Multiple Modules</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
|
|
<p>
|
|
This example demonstrates how to use the Browser History Manager
|
|
to remember which tabs have been visited with the TabView widget
|
|
and dynamically update it when the user presses the browser's
|
|
back/forward buttons.
|
|
</p>
|
|
|
|
<h2>Import the source files and dependencies</h2>
|
|
|
|
<p>
|
|
In our example, we need the Event Utility, DOM Utility, TabView Widget, and the Browser History Manager:
|
|
</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<link rel="stylesheet" type="text/css" href="tabview.css"/>
|
|
<link rel="stylesheet" type="text/css" href="border_tabs.css"/>
|
|
<script src="yahoo.js"></script>
|
|
<script src="event.js"></script>
|
|
<script src="dom.js"></script>
|
|
<script src="element-beta.js"></script>
|
|
<script src="tabview.js"></script>
|
|
<script src="history-experimental.js"></script>
|
|
</textarea>
|
|
|
|
<h2>Basic markup</h2>
|
|
|
|
<p>
|
|
In our example, the TabView widget relies on the following markup:
|
|
</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="demo" class="yui-navset">
|
|
<ul class="yui-nav">
|
|
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
|
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
|
<li><a href="#dolor"><em>dolor</em></a></li>
|
|
</ul>
|
|
<div class="yui-content">
|
|
<div id="lorem">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing
|
|
elit, sed diam nonummy nibh euismod tincidunt ut
|
|
laoreet dolore magna aliquam erat.
|
|
</p>
|
|
</div>
|
|
<div id="ipsum">
|
|
<ul>
|
|
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
|
|
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
|
|
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
|
|
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="dolor">
|
|
<form action="#">
|
|
<fieldset>
|
|
<legend>Lorem Ipsum</legend>
|
|
<label for="foo"><input id="foo" name="foo"></label>
|
|
<input type="submit" value="submit">
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</textarea>
|
|
|
|
<h2>Design your application</h2>
|
|
|
|
<p>
|
|
In our simple example, we have only one module, represented by the
|
|
TabView widget. We will refer to this module using the identifier
|
|
"tabview". The state of the TabView module will be represented
|
|
using the string <code>"tab"</code> followed by the selected tab
|
|
index (e.g. <code>"tab2"</code> if the third tab is selected)
|
|
</p>
|
|
|
|
<h2>Retrieve the initial state of the TabView module</h2>
|
|
|
|
<p>
|
|
Use the <code>YAHOO.util.History.getBookmarkedState</code> method
|
|
and default to the first tab:
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState( "tabview" );
|
|
var initialTabViewState = bookmarkedTabViewState || "tab0";
|
|
</textarea>
|
|
|
|
<h2>Register the TabView module</h2>
|
|
|
|
<p>
|
|
Use the <code>YAHOO.util.History.register</code> method, passing in
|
|
the TabView module identifier, the initial state of the TabView
|
|
module, and the callback function that will be called when the
|
|
state of the TabView module has changed:
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.util.History.register( "tabview", initialTabViewState, function( state ) {
|
|
// Select the tab according to the "state" parameter:
|
|
tabView.set( "activeIndex", state.substr(3) );
|
|
} );
|
|
</textarea>
|
|
|
|
<h2>Subscribe to the Browser History Manager <code>onLoad</code> event</h2>
|
|
|
|
<p>
|
|
Use the Browser History Manager <code>onLoad</code> event handler
|
|
to instantiate the TabView widget. Also, retrieve the current
|
|
state of the TabView module, and use that state to select the
|
|
right tab (the current state may be different from the initial
|
|
state under certain circumstances - see the User's Guide)
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
var tabView;
|
|
|
|
YAHOO.util.History.onLoadEvent.subscribe( function() {
|
|
// Instantiate the TabView widget
|
|
tabView = new YAHOO.widget.TabView( "demo" );
|
|
tabView.addListener( "activeTabChange", handleTabViewActiveTabChange );
|
|
|
|
// Retrieve the current state of the TabView module and select the appropriate tab
|
|
var currentTabViewState = YAHOO.util.History.getCurrentState( "tabview" );
|
|
tabView.set( "activeIndex", currentTabViewState.substr(3) );
|
|
} );
|
|
</textarea>
|
|
|
|
<h2>Add history entries</h2>
|
|
|
|
<p>
|
|
A new history entry must be added every time the user selects
|
|
a tab. Use the TabView widget's <code>activeTabChange</code>
|
|
event handler (set to <code>handleTabViewActiveTabChange</code> -
|
|
see above):
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
function handleTabViewActiveTabChange( e ) {
|
|
var currentTabViewState = YAHOO.util.History.getCurrentState( "tabview" );
|
|
var newTabViewState = "tab" + this.getTabIndex( e.newValue );
|
|
// The following test is crucial. Otherwise, we end up circling forever.
|
|
// Indeed, YAHOO.util.History.navigate will call the module onStateChange callback,
|
|
// which will call tabView.set, which will call this handler and it keeps
|
|
// going from here...
|
|
if ( newTabViewState != currentTabViewState )
|
|
YAHOO.util.History.navigate( "tabview", newTabViewState );
|
|
}
|
|
</textarea>
|
|
|
|
<h2>Initialize the Browser History Manager</h2>
|
|
|
|
<p>
|
|
Simply call <code>YAHOO.util.History.initialize</code> from a script
|
|
block located right after the opening body tag:
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.util.History.initialize();
|
|
</textarea>
|
|
|
|
<div id="stepnav">
|
|
<a class="next" href="solution.html">Continue to <em>Functional Example</em> ></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="ft"> </div>
|
|
</div>
|
|
<script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
</body>
|
|
</html>
|