qqmenu.js

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

/**
 * ���JS�ļ�������QQ���Ͳ˵��Ľṹ����4��ʾQQ�˵��Ľṹ����Ҫ�����¼�����ݶ���
 *		1��QQMenu		�˵�����
 *		2��QQItem		��˵������
 *		3��QQSubItem	�Ӳ˵������
 * 
 * ʹ�÷�ʽ��
 *		var menu = new QQMenu("mymenu");
 *		var file = menu.createItem("�ļ�");
 *		var f_open = file.createItem("��","link_url");
 *		var f_open_word = f_open.createItem("��WORD","lik_url1");
 *		var f_close= file.createItem("�ر�","link_url");
 *		
 *		menu.show(document.body);
 *
 *
 *
 * ����:ScottWang
 */
 
var menuWidth			= "180";
var menuHeight			= "600";//���ΪtitleHeight������+2*menuBorderstyle
var menuBackground		= "transparent";//�˵�����ɫ
var titleHeight			= 20;//�˵������ĸ߶�
var contentHeight		= 500;//�˵������ݵĸ߶�
var titleMiddleBG		= "url(style/qqmenu/title_bg.jpg)";//�˵��������ߵı���ͼƬ
var titleLeftBG			= "url(style/qqmenu/title_bg_l.gif)";//�˵�������м�ı���ͼƬ
var titleRightBG		= "url(style/qqmenu/title_bg_r.gif)";//�˵�������ұߵı���ͼƬ

var titleMiddleBG_h		= "url(style/qqmenu/title_bg_h.jpg)";//�˵��������ߵı���ͼƬ������������ʱ��
var titleLeftBG_h		= "url(style/qqmenu/title_bg_l_h.gif)";//�˵�������м�ı���ͼƬ������������ʱ��
var titleRightBG_h		= "url(style/qqmenu/title_bg_r_h.gif)";//�˵�������ұߵı���ͼƬ������������ʱ��

var contentBackground	= "#FFFFFF"; //�˵������ݵı���ɫ
var titleCursor			= "hand";//�˵������Ĺ��
var upicon				= "style/qqmenu/up.gif";//���Ϲ��ͷͼƬ
var downicon			= "style/qqmenu/down.gif";//���¹��ͷͼƬ
var menuBorderstyle		= "1px inset #5191CD";//�˵��߿���
var defaultTarget		= "_self";

var subMenuOpenIcon		= 'style/qqmenu/open.gif';//�Ӳ˵���ʱ��ͼ��
var subMenuCloseIcon	= 'style/qqmenu/close.gif';//�Ӳ˵��ر�ʱ��ͼ��
var subMenuNormalIcon	= 'style/qqmenu/base.gif';//�Ӳ˵���ʱ��ͼƬ
var subMenuLeafIcon		= 'style/qqmenu/leaf.gif';//�˵�ΪҶ�Ӳ˵�ʱ��ͼ��
var subMenuLeftMargin	= 15;
var subMenuTopMargin    = 4; //�����-WWX-�����Ӳ˵���������

function Rectangle(left,top,width,height){
	this.left = left;
	this.top  = top;
	this.width= width;
	this.height= height;
}

function QQMenu(id,rect){

	//��������
	var htmlCont = document.createElement("SPAN");	
	with(htmlCont.style){
		position	= "absolute";
		overflow	= "hidden";
		width		= (rect==null||rect.width==0)?menuWidth:rect.width;
		height		= (rect==null||rect.height==0)?menuHeight:rect.height;
		left		= rect==null?menuLeft:rect.left;
		top			= rect==null?menuTop:rect.top;
		margin		= 0;
		border		= menuBorderstyle;	
		background	= menuBackground;	
		
	}
	this.object		= htmlCont;	
	this.object.id	= ""+id;
	this.children	= new Array();
		
	this.activeItemIndex	= 0;//��ǰ�����˵����
	this.preActiveItemIndex = 0;//��һ�λ����˵����
	this.runtimes			= 0;
	this.realHeight			= 0;
	this.overflow			= 0;
	this.innerWidth			= 0;
	
	var upArrow = document.createElement("IMG");
	upArrow.src = upicon;
	
	var leftPos = parseInt(htmlCont.style.width)-22-2*parseInt(menuBorderstyle);
	
	//�������Ϲ�ļ�ͷ
	with( upArrow.style ){
		position= "absolute";	
		cursor	= "hand";	
		left	= leftPos;
		top		= 2;
		zIndex	= 100;
		border	= 0;
	}
	upArrow.owner			= this;
	this.upbtn				= upArrow;	
	
	var Up = function(){
		var srcEle = event.srcElement;
		document.body.setAttribute("upArrow",srcEle);
		var items = srcEle.owner.children;
		
		if( items[0].top()==0 ) return;
		for(var i=0;i<items.length;i++) items[i].move(titleHeight);
		
		srcEle.owner.overflow = srcEle.owner.overflow + titleHeight;			
		var command = '';
		if( srcEle.fireEvent ){
			command = 'document.body.getAttribute("upArrow").fireEvent("onmousedown");';			
			srcEle.timmer = setTimeout("eval('"+command+"');",10);		
		}
	}
	
	var Down = function(){
		var srcEle = event.srcElement;
		document.body.setAttribute("downArrow",srcEle);
		var items = srcEle.owner.children;
		if( srcEle.owner.overflow>0 ){			
			for(var i=0;i<items.length;i++) items[i].move(-titleHeight);
			
			srcEle.owner.overflow = srcEle.owner.overflow - titleHeight;			
			var command		= 'document.body.getAttribute("downArrow").fireEvent("onmousedown");';
			srcEle.timmer	= setTimeout("eval('"+command+"');",10);
		}	
	}
	
	var removeTimeout = function(){
		clearTimeout(event.srcElement.timmer);
		document.body.removeAttribute("upArrow");
		document.body.removeAttribute("downArrow");
	}
		
	EventManager.Add(upArrow,"mousedown",Up);	
	EventManager.Add(upArrow,"mouseup",removeTimeout);
	EventManager.Add(upArrow,"mouseout",removeTimeout);	
	
	this.object.appendChild(upArrow);
	
	//�������¹�ļ�ͷ
	var downArrow = document.createElement("IMG");
	downArrow.src = downicon;
	with( downArrow.style ){
		position	= "absolute";
		left		= leftPos;
		top			= parseInt(htmlCont.style.height)-18-2*parseInt(menuBorderstyle);
		border		= 0;
		cursor		= "hand";
		width		= 16;
		height		= 16;
	}
	downArrow.owner				= this;
	this.downbtn				= downArrow;
	downArrow.style.zIndex		= 100;
	
	EventManager.Add(downArrow,"mousedown",Down);		
	EventManager.Add(downArrow,"mouseup",removeTimeout);	
	EventManager.Add(downArrow,"mouseout",removeTimeout);	
	
	this.object.appendChild(downArrow);
	
	//��������
	this.getID		= _QQMenu_getID;
	this.addItem	= _QQMenu_addItem;	
	this.content	= _QQMenu_content;
	this.createItem	= _QQMenu_createItem;
	this.showItem	= _QQMenu_showItem;
	this.show		= _QQMenu_show;			
	this.calcOverflow = _QQMenu_calcOverflow;
	this.cleanUp	= _QQMenu_cleanUp;

	this.calcuContHeight = _QQMenu_calcuContHeight;
	
	document.body.setAttribute(id,this);
	
	MenuManager.Add(this);
}

/**
 * ����ͷ���Դ
 */
function _QQMenu_cleanUp(){		
	this.object = null;
	
	for(var i=0;i<this.children.length;i++){
		this.children[i].cleanUp();
		this.children[i] = null;
	}
	
	this.children = null;		
}

function _QQMenu_calcuContHeight(){
	var len = this.children.length;
	var realContHeight = menuHeight-len*titleHeight;
	if( contentHeight<realContHeight ){
		contentHeight = realContHeight;
		for( var i=0;i<len;i++ ){
			var curChild = this.children[i];
			curChild.setContentHeight(contentHeight);
		}
	}
}

function _QQMenu_getID(){return this.object.id;}

function _QQMenu_addItem(item){
	var curPos = this.children.length;
	this.children[curPos] = item;
	
	var itemID = this.object.id + "_" + curPos;
	item.setID(itemID);
	item.setIndex(curPos);
	this.object.appendChild(item.content());
}

function _QQMenu_content(){return this.object;}

function _QQMenu_showItem(index){	
	this.toIndex = index;
	var stepNo = 5;
	var offset = contentHeight/stepNo;
	if( this.activeItemIndex<index ){
		offset = -offset;
	}	
	
	var fromIndex = index<this.activeItemIndex?index:this.activeItemIndex;
	var toIndex   = index>this.activeItemIndex?index:this.activeItemIndex;
	
	fromIndex = fromIndex + 1;
	
	for(var i=fromIndex;i<=toIndex;i++) this.children[i].move(offset);
	
	this.runtimes++;
	if( this.runtimes>=stepNo ){
		this.preActiveItemIndex = this.activeItemIndex;
		this.activeItemIndex = index;
		this.runtimes = 0;
		this.calcOverflow();
	}else{
		setTimeout("eval( 'document.body.getAttribute(\""+this.object.id+"\").showItem("+this.toIndex+");' );",10);		
	}
}

function _QQMenu_createItem(caption,url,target){
	var item = new QQItem(caption,this);
	this.addItem(item);	
	return item;
}

function _QQMenu_show(owner){
	this.calcuContHeight();

	with( this ){
		realHeight = children.length*titleHeight+contentHeight;
		
		var h = parseInt(object.style.height);
		
		activeItemIndex = children.length-1;
	
		owner.appendChild(object);
	
		if( h==0 || h>=realHeight){
			downbtn.style.display = 'none';
			upbtn.style.display = 'none';
		}
		
		if( activeItemIndex <children.length-1 ) overflow = (children.length*titleHeight+contentHeight)-h;
		else overflow = children.length*titleHeight-h;	
	}
}

function _QQMenu_calcOverflow(){
	if( this.preActiveItemIndex<this.children.length-1 && this.activeItemIndex<this.children.length-1 ) return;
	
	if( this.activeItemIndex==this.children.length-1 ) this.overflow = this.overflow - contentHeight;	
	else this.overflow = this.overflow + contentHeight;
}

/***************************************************************************
 *	QQ��˵��ṹ
 ***************************************************************************/ 
function QQItem(caption,parent){
	this.caption	= caption;
	this.parent		= parent;
	this.children	= new Array();

	//��ʼ������
	this.init		= _QQItem_init;	
	
	this.top = function(){return parseInt(this.object.style.top);}
	this.left= function(){return parseInt(this.object.style.left);}