command.js

一些Acjax的控件简单应用学习实例

// JScript 文件
Abstract.Command = function(){}
Abstract.Command.prototype = {
    initialize: function(id,img1,img2,img3,pos,left,top,width,height){
        this.toolType = "Command";        
        this.id = id;
        this.img_normal = ImageBaseDir + 'mapTools/' + img1;
        this.img_over = ImageBaseDir + 'mapTools/' + img2;
        this.img_down = ImageBaseDir + 'mapTools/' + img3;
        this.position = pos;
        this.left = parseInt(left);
        this.top = parseInt(top);
        this.width = parseInt(width);
        this.height = parseInt(height);        
        this.div = Util.createDiv(this.id, this.left, this.top, this.width, this.height, this.img_normal, this.position, '0px solid #ccc');
        this.div.style.cursor = "pointer";
        this.url="";
    },
    
    cmdClickHandler: function(e){ 
        if(Event.element(e).childNodes.length>0) return;
        this.clearCurrentToolStatus();
        var cmd = this.tools[Event.element(e).parentNode.id];        
        cmd.div.childNodes[0].src = cmd.img_down;
        if(!cmd.selected)
            cmd.selected = true;
        
        this.currentTool = this.defaultTool;
        this.currentTool.div.childNodes[0].src = this.currentTool.img_normal;
        this.mapDiv.style.cursor = this.currentTool.cursorStyle;        
  
        cmd.cmd_clickHandler(cmd, this.model, this.mapDiv);
        Event.stop(e);
    },
    
    cmdMouseOverHandler: function(e){
        var elm = Event.element(e)
        if(elm.childNodes.length>0)  return;
        var cmd = this.tools[elm.parentNode.id];
        if(cmd.selected == true)
            return;        
        elm.alt = cmd.alt;
        elm.src = cmd.img_over;
        Event.stop(e);        
    },
    
    cmdMouseOutHandler: function(e){
        var elm = Event.element(e)
        if(elm.childNodes.length>0)  return; 
        var cmd = this.tools[elm.parentNode.id];
        if(cmd.selected == true)
            return;
        elm.src = cmd.img_normal;
        Event.stop(e);
    } ,
    
    clearOrgDiv: function(container, index){
        var nodes = container.childNodes;
        for(var i=0; i<nodes.length; i++){
            if(nodes[i].id.indexOf('search'+index+'_')>-1||nodes[i].id.indexOf('search2_'+index+'_')>-1||nodes[i].id.indexOf('command')>-1){
                container.removeChild(nodes[i]);
            }
        }
    },
    createNewDiv:function(id,mapDiv, model,left,top,width,hight,title,srcUrl)
    {
        var tempId;
        if(id!=null)
        {
           tempId=id.toString();
        }
        else
        {
           tempId="TempDiv";
        }
        this.areaDiv = Util.createDiv(Util.createUniqueID(tempId),left,top,width,hight,null,"absolute","1px solid blue");
        this.areaDiv.style.backgroundColor = "white";
        this.areaDiv.style.filter = "alpha(opacity=100)"; 
        this.areaDiv.style.opacity = "0.80";
        this.areaDiv.style.fontSize = "1px"
        this.areaDiv.style.zIndex = 10000;  
        this.areaDiv.innerHTML = '<table border="0" width="100%" cellspacing="0" cellpadding="0" ><tr bgcolor="#cccccc"></td><td class="lan" width="90%">&nbsp;'+title+'</td><td height="22" width="10%" align="right" bgcolor="#cccccc"><a href="javascript:void(0)" onclick="$(\''+this.areaDiv.id+'\').style.display=\'none\'" class="text"><img src="images/button_gb01.gif" name="Image12" width="14" height="16" border="0" id="Image12" alt="关闭" /></a></td></tr></table>';
        this.areaDiv.innerHTML += '<iframe id="searchFrame" name="searchFrame" style="width:99%; height:99%;" src="'+srcUrl+'" scrolling="yes" frameborder="0"></iframe>';
        this.registerEvent(this.areaDiv.childNodes[0], "mousedown,mousemove,mouseup");
        mapDiv.parentNode.appendChild(this.areaDiv); 
    },
    registerEvent: function(source, param){
        Event.observe(source, param.split(',')[0], eval('this.'+param.split(',')[0]).bindAsEventListener(this));
        Event.observe(source, param.split(',')[1], eval('this.'+param.split(',')[1]).bindAsEventListener(this));
        Event.observe(source, param.split(',')[2], eval('this.'+param.split(',')[2]).bindAsEventListener(this));
    },
    
    mousedown: function(e){
        if(Event.element(e).childNodes.length==0)
            return;
        if(!this.dragged)
            this.dragged = true;
            
        this.elm = Event.element(e);
        this.orgPixelX = Util.getValueOfNoPX(this.elm.parentNode.parentNode.parentNode.parentNode.style.left);
	    this.orgPixelY = Util.getValueOfNoPX(this.elm.parentNode.parentNode.parentNode.parentNode.style.top);
	    this.elm.style.cursor = 'move';
        this.orgMousePixel = Util.getMousePixel(e);
        
	    if(this.elm.setCapture){
		    this.elm.setCapture();
	    }
	    else if (window.captureEvents){
		    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		}
    },
    
    mousemove: function(e){
        if(!this.dragged) return;
        if(!Event.element(e))
            return;
        this.newMousePixel = Util.getMousePixel(e);	
        //判断鼠标是否已经超出地图边界
        if(this.newMousePixel.y>130&&this.newMousePixel.y<window.screen.height-100
           &&this.newMousePixel.x>5&&this.newMousePixel.x<window.screen.width-20)
        {
	        var deltaX = this.newMousePixel.x - this.orgMousePixel.x;
	        var deltaY = this.newMousePixel.y - this.orgMousePixel.y;
		    this.elm.parentNode.parentNode.parentNode.parentNode.style.left = (this.orgPixelX + deltaX) + "px";
		    this.elm.parentNode.parentNode.parentNode.parentNode.style.top = (this.orgPixelY + deltaY) + "px";
		}
    },
    
    mouseup: function(e){
        if(!this.elm)
            return;
        if(this.elm.releaseCapture) 
			this.elm.releaseCapture();
		else if(window.captureEvents) 
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		document.onmousemove = null;
		document.onmouseup = null;
        this.dragged = false;
        this.elm.style.cursor = '';
//       	var wid = Util.getValueOfNoPX($("map").style.left);
//		var heigh = Util.getValueOfNoPX($("map").style.top);	
//		alert("width:"+wid+"\n"+"heigh:"+heigh);
//        alert("this.newMousePixel.x:"+this.newMousePixel.x+"\n"+"heigh:"+this.newMousePixel.y);
    }          
};
//全图
FullCmd = Class.create(); 
FullCmd.prototype = Object.extend(new Abstract.Command(), {
    alt: '全图显示',
    selected: false,  
    cmd_clickHandler: function(cmd, model, mapDiv){
        model.reset(mapDiv, $('slider_box'));
    }
});
//清除
ClearCmd = Class.create(); 
ClearCmd.prototype = Object.extend(new Abstract.Command(), {
    alt: '清除操作痕迹',
    selected: false,  
    
    cmd_clickHandler: function(cmd, model, mapDiv){
        model.clearOverLayers(mapDiv);
        if(map.model.gpsTrack)//清除GPS历史轨迹和实时监控点
			map.model.gpsTrack.clear();
    }
});

//前一屏   
PrevCmd = Class.create(); 
PrevCmd.prototype = Object.extend(new Abstract.Command(), {      
    alt: '移到上一屏',
    selected: false,  
    cmd_clickHandler: function(cmd, model, mapDiv){
        if(model.curIndex == -1)
            model.curIndex = model.traceIndex - 1;
        if(model.curIndex >0 && model.curIndex <= model.traceIndex - 1){
            var obj = model.traces[--model.curIndex];
			map.model.refresh(new Zoom(obj.level),obj.coord);
//            model.setViewCenterCoord(obj.coord);
//            model.setZoom(new Zoom(obj.level));
//            model.controls[mapDiv.id].paint(model, false);
//            model.controls[model.ovId].paint(model);
//            $('sliderbar_'+model.getId()).parentNode.style.top = ((MaxZoomLevel - obj.level) * 12 + 6) + "px"
        }
    }
});

//后一屏   
NextCmd = Class.create(); 
NextCmd.prototype = Object.extend(new Abstract.Command(), {
    alt: '移到下一屏',
    selected: false,  
    cmd_clickHandler: function(cmd, model, mapDiv){    
        
        if(model.curIndex == -1)
            model.curIndex = model.traceIndex - 1;
        if(model.curIndex >=0 && model.curIndex < model.traceIndex - 1){
            var obj = model.traces[++model.curIndex];
			map.model.refresh(new Zoom(obj.level),obj.coord);
//            model.setViewCenterCoord(obj.coord);
//            model.setZoom(new Zoom(obj.level));
//            model.controls[mapDiv.id].paint(model, false);
//            model.controls[model.ovId].paint(model);
//            $('sliderbar_'+model.getId()).parentNode.style.top = ((MaxZoomLevel - obj.level) * 12 + 6) + "px"
        }
    }
});      

//辖区定位
LocateCmd = Class.create(); 
LocateCmd.prototype = Object.extend(new Abstract.Command(), {
    alt: '辖区定位',
    selected: false, 
    cmd_clickHandler: function(cmd, model, mapDiv){
        this.clearOrgDiv(mapDiv.parentNode,2);
        var left = Util.getValueOfNoPX(mapDiv.parentNode.style.width)-350;
        //id,mapDiv, model,left,top,width,hight,title,srcUrl
        this.createNewDiv("command",mapDiv,model,left,10,300,500,'辖区定位','toolbars/regionLocate.aspx');
    }
});
/*
 * General Direct Search Command
 */

GeneralSearchCmd = Class.create(); 
GeneralSearchCmd.prototype = Object.extend(new Abstract.Command(), {
    alt: '快速查询',
    selected: false, 
	initialize: function(id,img1,img2,img3,pos,left,top,width,height){
        this.toolType = "Command";        
        this.id = id;
        this.img_normal = ImageBaseDir + 'mapTools/' + img1;
        this.img_over = ImageBaseDir + 'mapTools/' + img2;
        this.img_down = ImageBaseDir + 'mapTools/' + img3;
        this.position = pos;
        this.left = parseInt(left);
        this.top = parseInt(top);
        this.width = parseInt(width);
        this.height = parseInt(height);        
        this.div = Util.createDiv(this.id, this.left, this.top, this.width, this.height, this.img_normal, this.position, '0px solid #ccc');
        this.div.style.cursor = "pointer";
		setTimeout(function() { this.find(null,null) }.bind(this), 500);
    },
    cmd_clickHandler: function(cmd, model, mapDiv)
	{
		var keyValue = $("search_key").value;			
		keyValue=keyValue.replace(/(^\s*)/g, "");
        if(keyValue=='' || keyValue=='请输入关键字')
        {
            alert("请输入查询关键字");
            $("search_key").focus();
            return false;
        }
        this.clearOrgDiv(mapDiv.parentNode,2);        
        this.find(mapDiv, keyValue)
    },
    
    find: function(mapDiv, keyValue){
		
		if(mapDiv)
		{
			this.mapDiv = mapDiv;
		}
		else
		{
			this.mapDiv =$("map").childNodes[0];
		}
        if(this.findDiv)
		{
			this.findDiv.style.display='';
		}
		else
		{
			var left = Util.getValueOfNoPX(this.mapDiv.parentNode.style.width) - 680;
			this.findDiv = Util.createDiv('gen_search_div',left,0.1,400,15,null,"absolute","1px solid blue");
			this.findDiv.style.backgroundColor = "white";
			this.findDiv.style.filter = "alpha(opacity=95)"; 
			this.findDiv.style.opacity = "1";
			this.findDiv.style.fontSize = "1px"
			this.findDiv.style.zIndex = 10000;
			this.findDiv.style.display='none';
			var innerCode = '<table border="0" width="100%" cellspacing="0" cellpadding="0" ><tr bgcolor="#cccccc" onmouseover="poiresult.style.display=\'\';"></td><td class="lan" width="90%">&nbsp;查询结果</td><td height="20" width="10%" align="right" bgcolor="#cccccc"><a href="javascript:void(0)" onclick="$(\'gen_search_div\').style.display=\'none\'" class="text"><img src="images/button_gb01.gif" name="Image12" width="14" height="14" border="0" id="Image12" alt="关闭" /></a></td></tr><tr><td colspan="2" ><div id="poiresult" style="width:50px;backcolor:red" onmouseout="if(event.screenY>300&&(event.screenX<(screen.availWidth-212)))poiresult.style.display=\'none\';">';
			innerCode+='<iframe id="search_rst" src="" frameborder="0" height="380" width="400" scroll="yes"></iframe></div></td></tr></table>';
			this.findDiv.innerHTML=innerCode;
			this.registerEvent(this.findDiv.childNodes[0], "mousedown,mousemove,mouseup");
			this.mapDiv.parentNode.appendChild(this.findDiv);
		}
		if(keyValue)
		{
			search_rst.location.href="searchaddresss.aspx?searchflag=5&classid=&areaid=&searchname=" +encodeURI(keyValue);
			poiresult.style.display='';
		}
    }    
    
});


/*
 * color chooser
 * added by lfcui on 30Mar2007
 */
ChooseColorCmd = Class.create(); 
ChooseColorCmd.prototype = Object.extend(new Abstract.Command(), 
{
//	alt: isLineTarget?'选择线条颜色':'选择填充颜色',
	selected: false, 
	initialize: function(is_tine_target,id,img1,img2,img3,pos,left,top,width,height){
		this.isLineTarget=is_tine_target;
		this.alt=this.isLineTarget?'选择线条颜色':'选择填充颜色',
        this.toolType = "Command";        
        this.id = id;
        this.img_normal = ImageBaseDir + 'mapTools/' + img1;
        this.img_over = ImageBaseDir + 'mapTools/' + img2;
        this.img_down = ImageBaseDir + 'mapTools/' + img3;
        this.position = pos;
        this.left = parseInt(left);
        this.top = parseInt(top);
        this.width = parseInt(width);
        this.height = parseInt(height);        
        this.div = Util.createDiv(this.id, this.left, this.top, this.width, this.height, this.img_normal, this.position, '0px solid #ccc');
        this.div.style.cursor = "pointer";		
		
		setTimeout(function() { this.addChooser() }.bind(this), 1);
		
    },
    addChooser:function()
	{
		if(!toolbar.hasColorChooser)
		{
			toolbar.hasColorChooser=true;
			map.model.colorChooser=new Chooser(this,$("map"),colorData,'color_chooser');
		}
		
	},
	cmd_clickHandler: function(cmd, model, mapDiv)
	{
		this.chooseColor(cmd,mapDiv);
	},

	chooseColor: function(cmd,mapDiv)
	{   
		toolbar.setDefaultTool();
//		if(!map.model.targetList&& (Object.values(map.model.targetList).length<2))
//		{
//			return;
//		}
		if(!map.model.colorChooser)
		{			
			map.model.colorChooser =new Chooser(this,mapDiv.parentNode,colorData,'color_chooser');
		}

		if((!map.model.colorChooser)||!map.model.colorChooser.visibility)
		{
			map.model.colorChooser.father=this;
			map.model.colorChooser.show(cmd.left+8,0);
		}
		else
		{
			map.model.colorChooser.hide();