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说无法退后了就行了呗