178 lines
7.2 KiB
HTML
178 lines
7.2 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 - Calendar (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: Calendar</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"><a href="../tabview/index.html">TabView Control</a></li>
|
|
<li class="item selected"><a href="index.html">Calendar 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="../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 months have been viewed with the calendar 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, Calendar Widget, and the Browser History Manager:
|
|
</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<link type="text/css" rel="stylesheet" href="calendar.css"/>
|
|
<script src="yahoo.js"></script>
|
|
<script src="event.js"></script>
|
|
<script src="dom.js"></script>
|
|
<script src="calendar.js"></script>
|
|
<script src="history-experimental.js"></script>
|
|
</textarea>
|
|
|
|
<h2>Basic markup</h2>
|
|
|
|
<p>
|
|
In our example, the calendar widget relies on the following markup:
|
|
</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="calendarContainer"></div>
|
|
</textarea>
|
|
|
|
<h2>Design your application</h2>
|
|
|
|
<p>
|
|
In our simple example, we have only one module, represented by the
|
|
calendar widget. We will refer to this module using the identifier
|
|
"calendar". The state of the calendar module will be represented
|
|
by a string composed of the month and the year the widget currently
|
|
renders, separated by <code>"_"</code>
|
|
(e.g. <code>"2_2007"</code> for February 2007)
|
|
</p>
|
|
|
|
<h2>Retrieve the initial state of the calendar module</h2>
|
|
|
|
<p>
|
|
Use the <code>YAHOO.util.History.getBookmarkedState</code> method
|
|
and default to the month corresponding to today's date:
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
var today = new Date();
|
|
var defaultCalendarState = ( today.getMonth() + 1 ) + "_" + today.getFullYear();
|
|
var bookmarkedCalendarState = YAHOO.util.History.getBookmarkedState( "calendar" );
|
|
var initialCalendarState = bookmarkedCalendarState || defaultCalendarState;
|
|
</textarea>
|
|
|
|
<h2>Register the calendar module</h2>
|
|
|
|
<p>
|
|
Use the <code>YAHOO.util.History.register</code> method, passing in
|
|
the calendar module identifier, the initial state of the calendar
|
|
module, and the callback function that will be called when the
|
|
state of the calendar module has changed:
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.util.History.register( "calendar", initialCalendarState, function( state ) {
|
|
// Show the right month according to the "state" parameter:
|
|
calendar.cfg.setProperty( "pagedate", state.replace( "_", "/" ) );
|
|
calendar.render();
|
|
} );
|
|
</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 calendar widget. Also, retrieve the current
|
|
state of the calendar module, and use that state to show the
|
|
right month (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 calendar;
|
|
|
|
YAHOO.util.History.onLoadEvent.subscribe( function() {
|
|
// Retrieve the current state of the calendar module
|
|
var currentCalState = YAHOO.util.History.getCurrentState( "cal" );
|
|
var startDate = { pagedate: currentCalState.replace( "_", "/" ) };
|
|
|
|
// Instantiate the calendar widget
|
|
calendar = new YAHOO.widget.Calendar( "calendar", "calendarContainer", startDate );
|
|
calendar.beforeRenderEvent.subscribe( handleCalendarBeforeRender, calendar, true );
|
|
calendar.render();
|
|
} );
|
|
</textarea>
|
|
|
|
<h2>Add history entries</h2>
|
|
|
|
<p>
|
|
A new history entry must be added every time the user views
|
|
a new month. Use the calendar widget's <code>beforeRender</code>
|
|
event handler (set to <code>handleCalendarBeforeRender</code> -
|
|
see above):
|
|
</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
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 currentCalState = YAHOO.util.History.getCurrentState( "cal" );
|
|
if ( pageDate != currentCalState )
|
|
YAHOO.util.History.navigate( "cal", pageDate );
|
|
}
|
|
</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>
|