Ryan Grove![]()
Featured ItemHistory Lite is similar in purpose to the YUI Browser History module, but with a more flexible API, no initialization or markup requirements, limited IE6/7 support, and a much smaller footprint.
The primary differences between History Lite and the BHM are:
The sample below is a brief tour of the History Lite API, which consists of the add() and get() methods and the global history-lite:change event. Yes, that's the entire API!
Note that you don't need to include the Console module in order to use History Lite; it's included here for demonstration purposes.
YUI({
modules: {
'gallery-history-lite': {
fullpath: 'http://yui.yahooapis.com/gallery-2009.12.15-22/build/gallery-history-lite/gallery-history-lite-min.js',
requires: ['event-custom','event-custom-complex','node'],
optional: [],
supersedes: []
}
}
}).use('gallery-history-lite', 'console', function (Y) {
// Create a logging console so we can watch the awesomeness happen.
Y.one(document.body).addClass('yui-skin-sam');
new Y.Console().render();
// Listen for history changes.
Y.on('history-lite:change', function (e) {
// Properties on e.changed represent new or changed history parameters.
Y.each(e.changed, function (value, name) {
Y.log(name + ' changed to "' + value + '"', 'debug', 'history-lite');
});
// Properties on e.removed represent history parameters that have been
// removed.
Y.each(e.removed, function (value, name) {
Y.log(name + ' was removed', 'debug', 'history-lite');
});
// The get() method returns the current value of the specified history
// parameter. If you call get() without specifying a parameter name,
// it'll return an object containing all current history parameters and
// their values.
Y.log('current value of foo is ' + Y.HistoryLite.get('foo'), 'debug', 'history-lite');
});
// Simulate some history change events (watch the browser's location bar and
// the debug console to see what's happening).
setTimeout(function () {
// The add() method accepts an object containing key/value pairs of
// history parameter names and values. Each call to add() creates a new
// browser history entry.
Y.HistoryLite.add({foo: 'bar', baz: 'quux'});
}, 1000);
setTimeout(function () {
// The add() method will also accept a query string.
Y.HistoryLite.add('foo=kittens');
}, 2000);
setTimeout(function () {
// A null or undefined value causes that parameter to be removed from
// the history state.
Y.HistoryLite.add({foo: null, baz: 'monkeys'});
}, 3000);
});
No forum posts for this module.
© 2010 YUI Library - Site Credits