测试类
可以用简单的 HTML 页面和一些 Javascript 来测试完成的类。测试页面将在上方显示历史记录按钮,只有活动的按钮是突出显示并且可以单击的。我们没有建立复杂的测试应用程序,该页面在每次单击链接时仅仅生成随机数。这些数字就是记录到历史堆栈中的事件。堆栈也在页面上显示,指针标记的当前记录用粗体显示。
清单 7. 测试历史堆栈的简单 HTML 页面
<html>
<head>
<title></title>
</head>
<body>
<div id="historybuttons"></div>
<div>
<a href="#" onclick="do_add(); return false;">Add Random
Resource</a>
</div>
<div id="output" style="margin-top:40px;"></div>
</body>
</html>
在该 HTML 页面的头部需要添加清单 8 所示的 Javascript 代码。这段代码首先实例化一个新的历史堆栈对象,并载入可能已经保存到浏览器 cookie 中的所有数据。
我们定义了四个 do_*() 函数,这些事件处理程序将添加到后退、前进和刷新按钮的链接中,此外还有 Add Random Resource 链接,如清单 7 所示。
display() 函数检查历史记录对象的当前状态,并为历史记录按钮生成 HTML。它还生成历史记录中存储的项目列表。
清单 8. 集成历史记录类和测试页面的 Javascript
<script type="text/javascript" src="http://img.jcwcn.com/attachment/portal"></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="http://img.jcwcn.com/attachment/portal" alt="Back"
/></a> ';
} else {
str += '<img src="http://img.jcwcn.com/attachment/portal" alt="" /> ';
}
if (myHistory.hasNext()) {
str += '<a href="#" onclick="do_forward(); return false;">'
+ '<img src="http://img.jcwcn.com/attachment/portal" alt="Forward" />'
+ '</a> ';
} else {
str += '<img src="http://img.jcwcn.com/attachment/portal" alt="" /> ';
}
str += '<a href="#" onclick="do_reload(); return false;">'
+ '<img src="http://img.jcwcn.com/attachment/portal" 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 部分留下的问题开始,直接从相册页面调用历史堆栈。不需要修改任何
结合AJAX的PHP开发之后退、前进和刷新(3)
结合AJAX的PHP开发之后退、前进和刷新(3),结合AJAX的PHP开发之后退、前进和刷新(3)