tabmenu.js

ARCGIS程序,可以实现查、缩放等功能

/*
文件说明：这是一个JavaScript脚本文件
功能说明：本脚本程序用来动态创建多级菜单
创建时间：20030605
创建人：ajun
*/
var menu_font_size = 9;

//定义一级菜单的背景色
var menu_1_bg_color = "#5191CD"; //------------------原色为#005A6B-WWX-------------------
//定义各种状态下菜单子项的背景颜色
var bgBarNormal="#B0D1FC"; //------------------原色为#80ADBA-WWX-------------------
var bgBarSelect="#D3E5FD"; //------------------原色为#EDEFF0-WWX-------------------
//定义滚动文字的颜色
var MarqueeTextColor="#666666";
//定义菜单中的图片
var SelectImage="../../images/tabmenu/arrow2.gif";
var NormalImage="../../images/tabmenu/arrow1.gif";
var corner_left="../../images/tabmenu/corner_left.gif";
var corner_bg="../../images/tabmenu/corner_bg.gif";
var corner_right="../../images/tabmenu/corner_right.gif";
//定义滚动速度(1-10),越大越快
var scrollspeed=8
//定义二级菜单每次点击的偏移距离
var two_offset=115
//定义三级菜单每次点击的偏移距离
var three_offset=130

//二级菜单显示窗口宽度
var two_windowwidth=''
//二级菜单滚动内容宽度
var two_memowidth=''
//保存二级菜单内容的变量
var SecondMenu='';

//二级菜单显示窗口宽度
var three_windowwidth=''
//二级菜单滚动内容宽度
var three_memowidth=''
//保存三级菜单内容的变量
var ThridMenu='';

//取得系统分辨率的函数
function getSystemMatric() {
if ((screen.width == 640) && (screen.height == 480)) 
	return 1;
else if ((screen.width == 800) && (screen.height == 600))
	return 2;
else if ((screen.width == 1024) && (screen.height == 768))
	return 3;
else
	return 2;
}

//初始化二级菜单滚动内容的函数
function initTWO(){
	two_span.style.display="";
	two_span.style.pixelLeft=0;
	two_memowidth = two_span.offsetWidth;
	two_windowwidth = two_div.offsetWidth;
	//判断是否需要显示左右拉动按钮
	if(two_memowidth>two_windowwidth){
		two_right_object=eval(two_right_button);
		two_right_object.style.visibility="visible";
		two_left_object=eval(two_left_button);
		two_left_object.style.visibility="hidden";
	}
	else{
		two_left_object=eval(two_left_button);
		two_left_object.style.visibility="hidden";
		two_right_object=eval(two_right_button);
		two_right_object.style.visibility="hidden";
	}
}

//初始化三级菜单滚动内容的函数
function initTHREE(){
	three_span.style.display="";
	three_span.style.pixelLeft=0;
	three_memowidth = three_span.offsetWidth;
	three_windowwidth = three_div.offsetWidth;
	//判断是否需要显示左右拉动按钮
	if(three_memowidth>three_windowwidth){
		three_right_object=eval(three_right_button);
		three_right_object.style.visibility="visible";
		three_left_object=eval(three_left_button);
		three_left_object.style.visibility="hidden";
	}
	else{
		three_left_object=eval(three_left_button);
		three_left_object.style.visibility="hidden";
		three_right_object=eval(three_right_button);
		three_right_object.style.visibility="hidden";
	}
}


//二级菜单向右边滚动的函数
function two_right()
{
	//判断是否已经到了滚动文字边界
	if((-two_span.style.pixelLeft+two_windowwidth)>=two_memowidth)
		two_span.style.pixelLeft-=0
	else
		two_span.style.pixelLeft-=two_offset*(getSystemMatric()>2?7:5);
		
	//判断是否隐藏滚动按钮
	if((-two_span.style.pixelLeft+two_windowwidth)>=two_memowidth)
	{
		two_right_object=eval(two_right_button);
		two_right_object.style.visibility="hidden";
	}
	two_left_object=eval(two_left_button);
	two_left_object.style.visibility="visible";
}

//二级菜单向左边滚动的函数
function two_left()
{
	//判断是否已经到了滚动文字边界
	if(two_span.style.pixelLeft==0)
		two_span.style.pixelLeft=0
	else
		two_span.style.pixelLeft+=two_offset*(getSystemMatric()>2?7:5);
		
	//判断是否隐藏滚动按钮
	if(two_span.style.pixelLeft==0)
	{
		two_left_object=eval(two_left_button);
		two_left_object.style.visibility="hidden";
	}
	two_right_object=eval(two_right_button);
	two_right_object.style.visibility="visible";
}

//三级菜单向右边滚动的函数
function three_right()
{
	//判断是否已经到了滚动文字边界
	if((-three_span.style.pixelLeft+three_windowwidth)>=three_memowidth)
		three_span.style.pixelLeft-=0
	else
		three_span.style.pixelLeft-=three_offset*(getSystemMatric()>2?6:4);

	//判断是否隐藏滚动按钮		
	if((-three_span.style.pixelLeft+three_windowwidth)>=three_memowidth)
	{
		three_right_object=eval(three_right_button);
		three_right_object.style.visibility="hidden";
	}
	three_left_object=eval(three_left_button);
	three_left_object.style.visibility="visible";
}

//三级菜单向左边滚动的函数
function three_left()
{
	//判断是否已经到了滚动文字边界
	if(three_span.style.pixelLeft==0)
		three_span.style.pixelLeft=0
	else
		three_span.style.pixelLeft+=three_offset*(getSystemMatric()>2?6:4);
		
	//判断是否隐藏滚动按钮
	if(three_span.style.pixelLeft==0)
	{
		three_left_object=eval(three_left_button);
		three_left_object.style.visibility="hidden";
	}
	three_right_object=eval(three_right_button);
	three_right_object.style.visibility="visible";
}

/*
功能说明：菜单转换的函数（运用于第一级菜单）
参数说明：
a:要显示的第一级菜单;
b:要显示的第二级菜单;
*/
function OverOneMenu(a,b)
{
	divELA=eval(a);
	CurColor=divELA.style.backgroundColor;
	//判断一级菜单是否改变，如果没有改变，则返回
	if(CurColor.toLowerCase()==bgBarNormal.toLowerCase())
		return;	
	//初始化二级菜单滚动窗口的内容
	two_span.innerHTML=SecondMenu;
	//初始化三级菜单滚动窗口的内容
	three_span.innerHTML=ThridMenu;
	//先隐藏所有的一级菜单和二级菜单、三级菜单
	for(i=1;i<FirstMenuCount+1;i++)
	{
		//隐藏第一级菜单
		ONEMenu=eval("OneMenu"+i);
		CurColor=ONEMenu.style.backgroundColor;
		//判断该一级菜单是否处于未选中状态，如果是，则返回
		if(CurColor.toLowerCase()==menu_1_bg_color)
			continue;
		
		var strTableB = "<table width='100%' height='5' border='0' cellpadding='0' cellspacing='0' style='font-size:"+menu_font_size+"pt'><tr>";
	    strTableB +=" <td width='4' height='5'><img src='' width='4' height='5'></td>";
	    strTableB +=" <td width='99%' height='5' ><spacer></td>";
	    strTableB +=" <td width='4' height='5'><img src='' width='4' height='5'></td>";
	    strTableB +="  </tr></table>";
		
		ONEMenu.innerHTML = strTableB + "<font color=#ffffff ><b>" + ONEMenu.innerText + "<b></font>";
		ONEMenu.style.backgroundColor=menu_1_bg_color;
		//隐藏第二级菜单
		TWOMenu=eval("TwoMenu"+i);
		TWOMenu.style.visibility="hidden";
		//隐藏第三级菜单	
		MenuTWO=eval("Menu"+i);
		for(j=1;j<MenuTWO[3]+1;j++)
		{
			//使第二级菜单中的所有项都变成未被选中状态
			MenuTwoString="TwoMenu"+i+"_"+j;					
			MenuTwo=eval(MenuTwoString);
			MenuTwo.style.backgroundColor=bgBarNormal;
			MenuTwo.innerHTML = "<font color=#000000 ><img src="+NormalImage+" width=11 height=11> " + MenuTwo.innerText + "</font>";
			//隐藏第三级菜单
			MenuThreeString="DIVMenu"+i+"_"+j;					
			MenuThree=eval(MenuThreeString);
			MenuThree.style.visibility="hidden";
		}			
	}
	//显示选中的一级菜单和二级菜单
	divELB=eval(b);
	//增加圆弧形状给选中菜单
	var strTable = "<table width='100%' height='5' border='0' cellpadding='0' cellspacing='0' style='font-size:"+menu_font_size+"pt'><tr>";
    strTable +=" <td width='4' height='5'><img src="../../../../pageComponent/resources/scripts/menu/+corner_left+" width='4' height='5'></td>";
    strTable +=" <td width='99%' height='5' background="../../../../pageComponent/resources/scripts/menu/+corner_bg+"><spacer></td>";