Chinaunix首页 | 论坛 | 博客
  • 博客访问: 18671660
  • 博文数量: 7460
  • 博客积分: 10434
  • 博客等级: 上将
  • 技术积分: 78178
  • 用 户 组: 普通用户
  • 注册时间: 2008-03-02 22:54
文章分类

全部博文(7460)

文章存档

2011年(1)

2009年(669)

2008年(6790)

分类:

2008-04-14 15:50:19

 在第 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;
}

  在开始跟踪相册应用程序的历史记录之前,只需要在页面加载过程中调用 x_get_table() 函数即可。这样就可以调用通过 Sajax 显示的初始表。

  现在已经有了历史堆栈,但是我们不希望每次打开该应用程序时都要从头开始。相反,我们希望从离开的地方开始。因此需要添加 load_current() 函数以扩展应用程序,加载页面时会调用该函数。添加后退和前进按钮处理程序时,还将调用该函数,根据保存到历史堆栈中的事件 ID 来更新页面。

  清单 11. load_current() 函数

function load_current()
{
 // No existing history.
 if (myHistory.stack.length == 0) {
  x_get_table(to_window);
  myHistory.addResource('table-0-5');
 
  // Load from history.
 } else {
  var current = myHistory.getCurrent();
  var params = current.split('-');
  if (params[0] == 'table') {
   x_get_table(params[1], params[2], to_window);
  } else if (params[0] == 'image') {
   x_get_image(params[1], to_window);
  }
 }
}

  onload 处理程序需要进行相应的修改:

window.onload = function () {
 load_current();
};

  最后,添加清单 12 中的历史记录按钮处理例程。注意处理程序和测试应用程序的相似性。

  清单 12. 历史记录按钮事件处理程序

function do_back()
{
 myHistory.go(-1);
 load_current();
}

function do_forward()
{
 myHistory.go(1);
 load_current();
}

function do_reload()
{
 myHistory.go(0);
}

  至此就完成了历史堆栈到相册应用程序的集成。完成后的产品如图 3 所示。


  打开应用程序并单击链接,就会看到存储在浏览器 cookie 中的历史堆栈和指针。

CHCurrent = 4
CHStack = table-0-5%2Cimage-1%2Cimage-2%2Cimage-3%2Ctable-3-5

  如果正在运行 Mozilla Firefox 并下载了 Web Developer Toolbar 扩展,那么这些操作就很容易实现。

  结束语

  我们介绍了如何创建一个自定义的历史堆栈来跟踪 应用程序中的事件。可以在应用程序中添加 Web 浏览器上常见的后退、前进和刷新按钮来导航自定义的历史堆栈。

  为解决这一难题,我们确定了问题所在,创建了能应用于其他应用程序的可重用解决方案。我们没有直接在相册应用程序中建立历史堆栈,而是用一个简单的页面测试这个类。这样做有助于建立不会严格绑定到某个应用程序的解决方案,该解决方案可用于其他 Ajax 应用程序来解决同样的问题。
阅读(266) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~