在该 HTML 页面的头部需要添加清单 8所示的JavaScript代码。这段代码首先实例化一个新的历史堆栈对象，并载入可能已经保存到浏览器 cookie 中的所有数据。
我们定义了四个do_*()函数，这些事件处理程序将添加到后退、前进和刷新按钮的链接中，此外还有Add Random Resource链接，如清单 7 所示。
display() 函数检查历史记录对象的当前状态，并为历史记录按钮生成HTML。它还生成历史记录中存储的项目列表。
清单 8 集成历史记录类和测试页面的JavaScript
＜script type="text/javascript" src="history.js"＞＜/script＞
＜script type="text/javascript"＞ var myHistory = new HistoryStack();
myHistory.load(); function do_add()
{
var num = Math.round(Math.random() * 1000);
myHistory.addResource(num);
display();
return false;
} function do_back()
{
myHistory.go(-1);
display();
} function do_forward()
{
myHistory.go(1);
display();
} function do_reload()
{
myHistory.go(0);
} function display()
{
// Display history buttons
var str = '';
if (myHistory.hASPrev()) {
str += '＜a href="#" onclick="do_back(); return false;"＞'
+ '＜img src="icons/back_on.gif" alt="Back"
/＞＜/a＞ ';
} else {
str += '＜img src="icons/back_off.gif" alt="" /＞ ';
}
if (myHistory.hasNext()) {
str += '＜a href="#" onclick="do_forward(); return false;"＞'
+ '＜img src="icons/forward_on.gif" alt="Forward" /＞'
+ '＜/a＞ ';
} else {
str += '＜img src="icons/forward_off.gif" alt="" /＞ ';
}
str += '＜a href="#" onclick="do_reload(); return false;"＞'
+ '＜img src="icons/reload.gif" alt="Reload"
/＞＜/a＞';
document.getElementById("historybuttons").innerHTML = str; // Display the current history stack, highlighting the current
// position.
var str = '＜div＞History:＜/div＞';
for (i=0; i ＜ myHistory.stack.length; i++) {
if (i == myHistory.current) {
str += '＜div＞＜b＞' + myHistory.stack[i] +
'＜/b＞＜/div＞';
} else {
str += '＜div＞' + myHistory.stack[i] + '＜/div＞';
}
}
document.getElementById("output").innerHTML = str;
} window.onload = function () {
display();
};
＜/script＞
|
运行该测试页面，可以看到历史记录按钮反映了历史堆栈的状态（见图 2）。比如，第一次加载页面时，按钮都是灰色的。向堆栈中添加一些记录后，后退按钮就变成活动的了。如果在堆栈中回退，前进按钮就变亮了。还要注意的是，如果单击几次后退然后再单击Add，那么堆栈会被截掉一部分，新的事件被压入缩短的堆栈顶部。
图2：历史堆栈的测试页面
测试完该类后，就可以进入最激动人心的阶段了。
集成历史记录对象和相册
我们将从第 1 部分留下的问题开始，直接从相册页面调用历史堆栈。不需要修改任何 PHP 文件。
首先需要添加一个 div 标记来存放历史记录按钮。如清单 7 所示。
＜div id="historybuttons"＞＜/div＞
|
历史堆栈代码被保存到一个 .js 文件中，该文件将链接到相册页面。
＜script type="text/javascript" src="history.js"＞＜/script＞
|
需要实例化历史堆栈对象并从缓冲区加载它们。这些操作可以添加到相册页面上已有脚本的前面。
var myHistory = new HistoryStack();
myHistory.load();
|
在针对历史堆栈的测试应用程序中，只存储随机数作为事件。我们可以在历史记录中存储需要的任何信息，但是要记住，当用户单击应用程序的后退按钮时，还要确定历史堆栈中的内容是什么。应用程序只有两个动作与x_get_table()和x_get_image()函数有关。因此对于每个表链接，可以存储名称table再加上start和step值作为事件标识符，比如table-10-5。类似地，可以存储名称image和将被查看图像的index，如image-20。
在第1部分中，相册中的每个链接都是由get_table_link()和get_image_link()两个函数生成的。通过编辑这些函数，可以在调用Sajax函数之前让该函数先调用历史堆栈。清单 9 以粗体显示了这些变化。
清单 9 get_table_link() 和 get_image_link() 函数的更新版本
function get_table_link ( $title, $start, $step ) {
$link = "myHistory.addResource('table-$start-$step'); "
."x_get_table($start, $step, to_window); "
."return false;";
return '＜a href="#" onclick="' . $link . '"＞' . $title.'＜/a＞';
} function get_image_link ( $title, $index ) {
$link = "myHistory.addResource('image-$index'); "
."x_get_image($index, to_window); "
."return false;";
return '＜a href="#" onclick="' . $link . '"＞' . $title .'＜/a＞';
}
|
当应用程序进行Sajax调用时，to_window()作为回调函数在页面上重新生成HTML。在测试应用程序中，我们用函数display()（清单 8）完成了两项任务：更新页面输出和更新历史记录按钮的状态。现在将在已有的to_window()函数体中添加下列函数调用：
display_history_buttons();
|
该函数的定义如清单 10 所示。
清单 10 display_history_buttons() 函数
function display_history_buttons()
{
var str = '';
if (myHistory.hASPrev()) {
str += '＜a href="#" onclick="do_back(); return false;"＞
＜img src="icons/back_on.gif" alt="Back" /＞＜/a＞';
} else {
str += '＜img src="icons/back_off.gif" alt="" /＞';
}
if (myHistory.hasNext()) {
str += '＜a href="#" onclick="do_forward(); return false;"＞
＜img src="icons/forward_on.gif" alt="Forward" /＞＜/a＞';
} else {
str += '＜img src="icons/forward_off.gif" alt="" /＞';
}
str += '＜a href="#" onclick="do_reload(); return false;"＞
＜img src="icons/reload.gif" alt="Reload" /＞＜/a＞';
document.getElementById("historybuttons").innerHTML = str;
}
|
