|
Examples
Some examples of how you can use dsHistory in your app
Phase-Implementation Example 1Following is a contrived and condensed pseudo-example based only on functions added to the history stack. It doesn't mess with the visitor's window hash at all, and it's done to show that you don't have to mess with the URI at all if you don't want to for some reason. <body>
<script src="dshistory.js"></script>
<div id="first-tab" onclick="showContent({contentToShow: 'first-block-content', contentToHide: 'second-block-content'})">First tab</div>
<div id="second-tab" onclick="showContent({contentToShow: 'second-block-content', contentToHide: 'first-block-content'})">Second tab</div>
<div id="first-block-content">First block content</div>
<div id="second-block-content" style="display: none;">Second block content</div>
<script>
function showContent(contentObject, historyObject) {
if (!historyObject || !historyObject.calledFromHistory) {
dsHistory.addFunction(showContent, window, contentObject);
}
document.getElementById(contentObject.contentToShow).style.display = 'block';
document.getElementById(contentObject.contentToHide).style.display = 'none';
}
dsHistory.addFunction(showContent, window, {
contentToShow: 'first-block-content',
contentToHide: 'second-block-content'
});
</script>
</body>Example 2Now, let's say you want to do the same thing but support bookmarking. You can do something like this: <body>
<script src="dshistory.js"></script>
<div id="first-tab" onclick="showContent({contentToShow: 'first-block-content', contentToHide: 'second-block-content'})">First tab</div>
<div id="second-tab" onclick="showContent({contentToShow: 'second-block-content', contentToHide: 'first-block-content'})">Second tab</div>
<div id="first-block-content">First block content</div>
<div id="second-block-content" style="display: none;">Second block content</div>
<script>
function showContent(contentObject, historyObject) {
if (!historyObject || !historyObject.calledFromHistory) {
dsHistory.setQueryVar('Showing', contentObject.contentToShow);
dsHistory.setQueryVar('Hiding', contentObject.contentToHide);
// this should be treated the same as addFunction as the setQueryVar functions above really don't have any impact yet
dsHistory.bindQueryVars(showContent, window, contentObject);
// now, dsHistory.QueryElements['Showing'] = contentObject.contentToShow;
// now, dsHistory.QueryElements['Hiding'] = contentObject.contentToHide;
}
document.getElementById(contentObject.contentToShow).style.display = 'block';
document.getElementById(contentObject.contentToHide).style.display = 'none';
}
if (typeof dsHistory.QueryElements['Showing'] == 'string' && typeof dsHistory.QueryElements['Hiding'] == 'string') {
showContent({contentToShow: dsHistory.QueryElements['Showing'], contentToHide: dsHistory.QueryElements['Hiding']});
} else {
dsHistory.addFunction(showContent, window, {
contentToShow: 'first-block-content',
contentToHide: 'second-block-content'
});
}
</script>
</body>Working DemoIf you want to see a working demo, go ahead and take a look. |
► Sign in to add a comment
I copy and paste the second example into a local htm and does not work. firebug report: dsHistory is not defined file:///C:/Users/maui/Desktop/ajaxNavigation%20example/example.htm Line 13
line 13: dsHistory.setQueryVar('Showing', contentObject.contentToShow);
Can you please help me out. tks
Can this framework handle page Refresh?
Using the first example, I keep getting "historyObject is not defined". And frankly, I do not see where it is being defined in the scripts. Can anyone help me resolve this? How do I get the history object? full example #1 with scripts would be appreciated?.
You downloaded the source and made it available in the same path (folder) that you're running your HTML on, right?
Hi. Is it possible to add in the history stack functions which have more than one parameter? Or do I have to change all the functions to receive just a parameter (which may be a map)? Tx
@Cristi:
Sure you can add functions with more than one parameters! Those parameters will just evaluate to undefined at that point though. You can get around this by using a special binding method where the scope and parameters you specify are closed around an outer function; see the one built into Prototype for more info.