场景描述:
由于应用当中菜单层级越来越深,越来越复杂。所以就需要一个菜单导航功能,让操作者能够知道自己在应用中的位置。
实例实现:
界面:
实现步骤:
- 在viewmodel的Function中添加如下代码:
/***********************************************************************************
名称:菜单导航管理器;
功能:显示用户所在位置方法;
需提供参数:subwin(显示导航的窗口),iframeId(导航链接打开位置);
提供方法:
void changeNavigationByOther(label,path) 根据传进来的值改变导航
* @param label 导航节点显示名称
* @param path 连接url
void changeNavigationByArray(list<objNavigation>) 根据传进来的list改变导航
* @param list 导航节点list
void openPage(path) 打开页面
* @param path 需要在iframeId中打开的url
void objNavigation(label,url) 导航节点对象
************************************************************************************/
var NavigationManage={
label:null,
url:null,
subwin:"subwinMain",
iframeId:'frameContent',
lstNavigation:new Array(),
changeNavigationByOther:function(label,path){
var subwindow=document.getElementById(this.subwin);
this.lstNavigation.push(new this.objNavigation(label,path));
subwindow.setTitle('<b>您所在的位置:</b>'+this.joinObject(this.lstNavigation,'-->'));
},
changeNavigationByArray:function(list){
var subwindow=document.getElementById(this.subwin);
subwindow.setTitle('<b>您所在的位置:</b>'+this.joinObject(list,'-->'));
},
openPage:function (path) {
var frame = document.getElementById(this.iframeId);
frame.contentWindow.location.href =unescape(path);
},
showCovering:function () {
var frameCovering = document.getElementById("frameCovering");
frameCovering.style.display = "";
},
hideCovering:function () {
var frameCovering = document.getElementById("frameCovering");
frameCovering.style.display = "none";
},
joinObject:function(_lstNav,_str){
var _element,_temp='';
for(var i=0;i<_lstNav.length;i++){
if(_lstNav[i].url){
_element='<a href=\'javascript:NavigationManage.openPage("'+_lstNav[i].url+'")\'>'+_lstNav[i].label+'</a>';
}else{
_element=_lstNav[i].label;
}
_temp+=_element+_str;
}
_temp=_temp.substring(0,_temp.length-3);
return _temp;
},
objNavigation:function (_label,_url){
this.label=_label;
this.url=_url;
}
};
var NM=NavigationManage; - 在menuMain(menu)的onItemClick事件中添加代码,如下:
if(item.getTag()){
NM.openPage(item.getTag());
var lstNav=new Array();
lstNav.push(new NM.objNavigation(item.getLabel(),item.getTag()));
while(item.getParent().getName()!=undefined){
item=item.getParent();
lstNav.push(new NM.objNavigation(item.getLabel(),item.getTag()));
}
lstNav.reverse();
NM.changeNavigationByArray(lstNav);
} - 要在JSP中定义iFrame和Subwindow,并将id赋给subwin和iframeId。菜单导航器将生成的导航显示在subwin的title上。当点击菜单导航的超链时,将在iframeId指定的iframe中打开。
延伸思路:
本例只是完全针对点击菜单而生成的菜单导航,其实应用当中还有可能出现点击出现点击页面元素的跳转,这样我们可以考虑将生成导航的时机从菜单的点击事件转移到子页面的加载当中。其实实现导航的方法有很多,需要我们根据不同的应用需求来实现。
(完)