webgui/www/extras/yui/examples/history/history-tabview.html
JT Smith 20f8df1291 upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00

441 lines
23 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Browser History Manager (beta): TabView Control</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="../../build/history/history-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--there is no custom header content for this example-->
<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form> </div>
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Browser History Manager (beta): TabView Control</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example">
<div class="promo">
<h1>Browser History Manager (beta): TabView Control</h1>
<div class="exampleIntro">
<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>
</div>
<div class="example-container module ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="history-tabview_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
</div> <div id="example-canvas" class="bd">
<!--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>
<!-- Static markup required for browser history management. Note that these
could be created using document.write in a script block. But they have
to be created while the page is being parsed, so it cannot be done
from an imported script file. Also, these have to be created as early
as possible to avoid problems on Internet Explorer.
Note that "magic URLs" such as:
javascript:document.open();document.write(new Date().getTime());document.close();
and such do NOT work on IE6! Only a real document works (that "real
document" does not need to be an HTML document. It can be an image
as well. Using an asset that you use somewhere else on your site,
instead of a separate asset avoids an unnecessary server round trip.
Finally, note that the iframe is only used on Internet Explorer.
If this page is server generated (by a PHP script for example), it is
a good idea to create the IFrame ONLY for Internet Explorer (use
server side user agent sniffing) -->
<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><a href="#tab1"><em>Tab One Label</em></a></li>
<li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div style="display: none;" id="tab1"><p>Tab One Content</p></div>
<div style="display: block;" id="tab2"><p>Tab Two Content</p></div>
<div style="display: none;" id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function () {
// The initially selected tab will be chosen in the following order:
//
// URL fragment identifier (it will be there if the user previously
// bookmarked the application in a specific state)
//
// or
//
// "tab0" (default)
var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
var initialTabViewState = bookmarkedTabViewState || "tab0";
var tabView;
// Register our TabView module. Module registration MUST
// take place before calling YAHOO.util.History.initialize.
YAHOO.util.History.register("tabview", initialTabViewState, function (state) {
// This is called after calling YAHOO.util.History.navigate, or after the user
// has trigerred the back/forward button. We cannot discrminate between
// these two situations.
// "state" can be "tab0", "tab1" or "tab2".
// Select the right tab:
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");
// 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 (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();
// This is the tricky part... The onLoad event is fired when the user
// comes back to the page using the back button. In this case, the
// actual tab that needs to be selected corresponds to the last tab
// selected before leaving the page, and not the initially selected tab.
// This can be retrieved using getCurrentState:
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 =============================== -->
</div>
</div>
</div>
<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 yui-navset-top">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div style="display: none;" id="tab1"><p>Tab One Content</p></div>
<div style="display: block;" id="tab2"><p>Tab Two Content</p></div>
<div style="display: none;" id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
</textarea>
<h2>Add the markup required by the Browser History Manager</h2>
<textarea name="code" class="HTML" cols="60" rows="1">
<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
<input id="yui-history-field" type="hidden">
</textarea>
<p>
This markup should be inserted right after the opening <code>body</code> tag.
</p>
<h2 class="first">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"/>
<script src="yahoo-dom-event.js"></script>
<script src="element-beta.js"></script>
<script src="tabview.js"></script>
<script src="history.js"></script>
</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>Write the code that initializes your application</h2>
<textarea name="code" class="JScript" cols="60" rows="1">
var tabView;
function initTabView () {
// Instantiate the TabView control...
tabView = new YAHOO.widget.TabView("demo");
tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
}
</textarea>
<h2>Use the Browser History Manager <code>onReady</code> method</h2>
<p>
Use the Browser History Manager <code>onReady</code> method 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">
YAHOO.util.History.onReady(function () {
var currentState;
initTabView();
// This is the tricky part... The onLoad event is fired when the user
// comes back to the page using the back button. In this case, the
// actual tab that needs to be selected corresponds to the last tab
// selected before leaving the page, and not the initially selected tab.
// This can be retrieved using getCurrentState:
currentState = YAHOO.util.History.getCurrentState("tabview");
tabView.set("activeIndex", currentState.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 newState, currentState;
newState = "tab" + this.getTabIndex(e.newValue);
try {
currentState = YAHOO.util.History.getCurrentState("tabview");
// 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 (newState != currentState) {
YAHOO.util.History.navigate("tabview", newState);
}
} catch (e) {
tabView.set("activeIndex", newState.substr(3));
}
}
</textarea>
<h2>Initialize the Browser History Manager</h2>
<p>
Simply call <code>YAHOO.util.History.initialize</code>, passing in the id of the input field and IFrame we inserted
in our static markup:
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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();
}
</textarea>
</div>
<div class="yui-u">
<div id="examples">
<h3 class='firstContent'>Browser History Manager (beta) Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../history/history-navbar.html'>Simple Navigation Bar</a></li><li class='selected'><a href='../history/history-tabview.html'>TabView Control</a></li><li><a href='../history/history-calendar.html'>Calendar Control</a></li><li><a href='../history/history-multiple.html'>Multiple Modules</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Browser History Manager (beta) Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/history/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_history.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/history.pdf">Cheat Sheet PDF</a> (external)</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="selected "><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script src='../../assets/YUIexamples.js'></script>
</body>
</html>