upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
174
www/extras/yui/examples/history/multi/solution.html
Normal file
174
www/extras/yui/examples/history/multi/solution.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>YUI Browser History Manager - Multiple Modules Example</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../../build/calendar/assets/calendar.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../build/tabview/assets/tabview.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../../build/tabview/assets/border_tabs.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../assets/solution.css"/>
|
||||
<script src="../../../build/yahoo/yahoo-min.js"></script>
|
||||
<script src="../../../build/event/event-min.js"></script>
|
||||
<script src="../../../build/dom/dom-min.js"></script>
|
||||
<script src="../../../build/element/element-beta-min.js"></script>
|
||||
<script src="../../../build/calendar/calendar-min.js"></script>
|
||||
<script src="../../../build/tabview/tabview-min.js"></script>
|
||||
<script src="../../../build/history/history-experimental.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
// The initial month 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
|
||||
//
|
||||
// today's corresponding month (default)
|
||||
|
||||
var today = new Date();
|
||||
var defaultCalendarState = ( today.getMonth() + 1 ) + "_" + today.getFullYear();
|
||||
var bookmarkedCalendarState = YAHOO.util.History.getBookmarkedState( "calendar" );
|
||||
var initialCalendarState = bookmarkedCalendarState || defaultCalendarState;
|
||||
|
||||
// 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 calendar;
|
||||
var tabView;
|
||||
|
||||
// Register our calendar module. Module registration MUST
|
||||
// take place before calling YAHOO.util.History.initialize.
|
||||
YAHOO.util.History.register( "calendar", initialCalendarState, 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.
|
||||
|
||||
// Show the right month according to the "state" parameter:
|
||||
calendar.cfg.setProperty( "pagedate", state.replace( "_", "/" ) );
|
||||
calendar.render();
|
||||
} );
|
||||
|
||||
// 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) );
|
||||
} );
|
||||
|
||||
// Subscribe to this event before calling YAHOO.util.History.initialize,
|
||||
// or it may never get fired! Note that this is guaranteed to be fired
|
||||
// after the window's onload event.
|
||||
YAHOO.util.History.onLoadEvent.subscribe( function() {
|
||||
// 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 month that needs to be loaded corresponds to the last month
|
||||
// visited before leaving the page, and not the initial month. This can
|
||||
// be retrieved using getCurrentState:
|
||||
var currentCalendarState = YAHOO.util.History.getCurrentState( "calendar" );
|
||||
var startDate = { pagedate: currentCalendarState.replace( "_", "/" ) };
|
||||
|
||||
// Instantiate the calendar control...
|
||||
calendar = new YAHOO.widget.Calendar( "calendar", "calendarContainer", startDate );
|
||||
calendar.beforeRenderEvent.subscribe( handleCalendarBeforeRender, calendar, true );
|
||||
calendar.render();
|
||||
|
||||
// Instantiate the TabView widget
|
||||
tabView = new YAHOO.widget.TabView( "demo" );
|
||||
tabView.addListener( "activeTabChange", handleTabViewActiveTabChange );
|
||||
|
||||
// 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:
|
||||
var currentTabViewState = YAHOO.util.History.getCurrentState( "tabview" );
|
||||
tabView.set( "activeIndex", currentTabViewState.substr(3) );
|
||||
} );
|
||||
|
||||
function handleCalendarBeforeRender() {
|
||||
var calDate = calendar.cfg.getProperty( "pageDate" );
|
||||
var pageDate = ( calDate.getMonth() + 1 ) + "_" + calDate.getFullYear();
|
||||
// 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 createCalendar, which will call calendar.render(), which will
|
||||
// end up calling handleCalendarBeforeRender, and it keeps going from here...
|
||||
var currentState = YAHOO.util.History.getCurrentState( "calendar" );
|
||||
if ( pageDate != currentState )
|
||||
YAHOO.util.History.navigate( "calendar", pageDate );
|
||||
}
|
||||
|
||||
function handleTabViewActiveTabChange( e ) {
|
||||
var currentState = YAHOO.util.History.getCurrentState( "tabview" );
|
||||
var newState = "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 ( newState != currentState )
|
||||
YAHOO.util.History.navigate( "tabview", newState );
|
||||
}
|
||||
|
||||
// The call to YAHOO.util.History.initialize should ALWAYS be from within
|
||||
// a script block located RIGHT AFTER the body tag (this seems to prevent
|
||||
// an edge case bug on IE - IE seems to sometimes forget the history when
|
||||
// coming back to a page, and the back - or forward button depending on the
|
||||
// situation - is disabled...)
|
||||
YAHOO.util.History.initialize();
|
||||
|
||||
</script>
|
||||
<div id="doc">
|
||||
<div id="hd">
|
||||
<img src="../assets/yui.gif" alt="YUI Logo" id="logo"/>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<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>
|
||||
<div id="calendarContainer"></div>
|
||||
</div>
|
||||
<div id="ft">YUI Browser History Manager - Multiple Modules Example</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue