BBS项目笔记之九:js实现动态的导航

1.预留div

需要显示导航按钮的地方 , 把div准备好

每一页的最上边都有这个预留的位置

<div id="path"><span class="huise"> <img src="images/home32.gif" width="25" height="25" /> <s:a action="homeAction_index" cssClass="hong">XXX论坛 </s:a> </span></div>

2.入栈

设置完div 还要对其进行操作:

出栈顺序正好相反 ,这样 同一个按钮或链接 就能实现一直后退的功能

<script language="JavaScript" type="text/javascript">
     var data = new Array();// 存放路径对象
     data.push(forum);
     data.push(updateArticle);
     new PathUtil(data)
  </script>

3.PathUtil函数改变导航信息

#path就是最开始的首页, 

在这个数组里 用jQuery里attr往后添加属性 , 属性中包括代表action的超链接 

如下:

// 设置当前位置的类
var PathUtil = function(data) {
	var path = $('#path');
	var pathArray = [];
	if (data) {
		pathArray = data;
	}
	for ( var i = 0; i < pathArray.length; i++) {
		var obj = pathArray[i];
		path.append($('<span>').addClass('huise1').html('>>')).append(
				$('<a>').attr('href', obj.action).addClass('hong').text(
						obj.text));
	}
}

4.json对象的定义

这样上边的util在数组末尾添加元素的时候 就把json对象添加进去了

// 论坛首页
var forum = {
	action : 'articleAction_forum',
	text : '论坛首页'
};
// 某个分类下的所有文章
var articlesOfType = {
	action : 'articleAction_findArticlesByType',
	text : '',
	init : function(articleTypeName) {
		this.action = this.action + '?articleType='
				+ encodeURIComponent(articleTypeName);
		this.text = articleTypeName;
		return this;
	}
};

//符合条件的文章列表
var article_search = {
	action : 'articleAction_doSearch',
	text : '符合条件的文章列表',
	init : function(type, searchStr) {
		this.action = this.action + '?searchStr='
				+ encodeURIComponent(searchStr) + '&article.articleTypeName='
				+ encodeURIComponent(type);
		return this;
	}
};

5.div在跳转后更改

跳转之后, 由于util函数更改了div中的 action和 text , 所以此位置的信息已经变化 点击之后也就是"退后"的操作了

我发现这个记录浏览顺序的数组没有大小限制 , 这个数组对象会无节制的变大 这是个问题 

应该限制大小, 然后出栈的时候 如果没有hasNext就alert说无法退后了就行了呗