jitk_slider.js

esri的ArcGIS Server超级学习模板程序（for java）

   var initialZoomValue = 50;
   var elevatorSegments=10;
   var minScale;
   var maxScale;
   var elevatorInterval;
   var isInit=false;
   
   //H DISTANCE DOWN TO THE START OF THE ZOOM ELEVATOR SHAFT
	var elevatorTopPos = 120;

	var e_diffpos=initialZoomValue;
	var e_startpos;
	var e_endpos;
	var e_allowed;
	
	//elevator step value (0-100)
	var  elevatorValue;
		
	// map scale value (minScale - maxScale) 
	var mapScaleValue;
		
	var isJumpElevator=false;
	
	var isDragElevator = false;
	
	var isDragElevatorDone = false;

    //Is true when slider is operated; false when other tools are used to change map scale
	var isSlider=false;
	
	var pScreenY;
	var eventClientY;
	
function initSlider(min,max,currentMapScale) {
    
    
    if(!isInit) {
	  minScale=Number(min); maxScale=Number(max);
	  var currMapScale = Number(currentMapScale);
	  //elevatorInterval=  minScale; 
	  elevatorInterval = (maxScale-minScale)/elevatorSegments;
	  	  	 	  
	  //alert("sliderInit");
	
	//GRAB THE ELEVATOR BOX TO MOVE IT UP AND DOWN
	document.getElementById("elevatorBox").onmousedown = ePosition;
	
	//GRAB THE VERTICAL BAR TO CHANGE THE HORIZONTAL POSITION OF ELEMENTS ON THE PAGE
	document.getElementById("elevatorBG").onmousedown = jumpElevator;
    
    elevatorValue=returnElevatorValue(currMapScale) * 10;    
    //mapScaleValue =  (elevatorValue < 0) ?  minScale :  (minScale + (elevatorValue * elevatorInterval)/10);
    mapScaleValue =  (elevatorValue < 0) ?  minScale : currMapScale;
    
    //alert("init:" + mapScaleValue); 
    
	//SET ELEVARTOR BOX TO ITS INITIAL VALUE
	moveElevator(elevatorValue);
	//Scale Slider update handler
	EsriControls.addPostBackTagHandler("slider-update", callSliderUpdate);
	switchElevatorButtons();
	isInit=true;	
    }
}
	
function returnElevatorValue(currentMapScale_) {

   var step = 1;
   var minScale_ = minScale; 
   while (minScale_ < currentMapScale_) {
     step = step + 1;
   	 minScale_ = minScale * step;      	    	    	 
   }
   
   var diff1 = minScale_ - currentMapScale_;
   var diff2 = currentMapScale_ - (minScale * (step-1));
   
   //alert(diff1 + "," + diff2);
   if (diff1 == 0 || diff1 < diff2 ) { return step - 1; }
   else if (diff2 = 0 || diff1 > diff2){ return step - 2; }
    
}	
	
		
	//STORES THE STARTING DRAG VALUE FOR SCALE BAR ELEVATOR
 function  ePosition(p) {
	//REMOVE THE JUMP FUNCTION ON THE BACKGROUND DIV TO AVOID "BOUNCING"
	document.getElementById("elevatorBG").onmousedown = "";
	
	//document.onmouseup = new Function("e_allowed = false; return false;")
	document.onmouseup = elevatorDrapScaleUpdate;	
	document.onmousemove = eNewPos;
	
	if (!document.all) {
	   e_startpos = p.screenY + (100 - e_diffpos); pScreenY = p.screenY;
	} else {
	   e_startpos = event.clientY + (100 - e_diffpos);  eventClientY=event.clientY;
	}    
	e_allowed = true;
	return false;
}	
	
function sliderCallback(newValue, newScaleValue) {
						
		  //alert("sliderCallback :" + newValue + " ,"  +newScaleValue);  		  
          isSlider=true;
  		  //get map control 
          var map = EsriControls.maps["map1"];
          //get server url
          var url = EsriUtils.getServerUrl(map.formId);
          //contruct request parameters
          var params = "mapZoom=mapZoom&formId=" + map.formId + "&mapId=" + map.id + "&factor=" + newScaleValue + "&" + EsriUtils.buildRequestParams(map.formId);          
          //send AJAX request. Set callback function to process XML response as EsriControls.processPostBack function and pass xmlHttp object
          EsriControls.maps['map1'].showLoading();
          var xmlHttp = EsriUtils.sendAjaxRequest(url, params, false, function() { EsriControls.processPostBack(xmlHttp); });
                
          elevatorValue=newValue;
          mapScaleValue = newScaleValue;        
}
   
function elevatorDrapScaleUpdate(p) {
	 // move Elevator
 		isJumpElevator=true; isDragElevator=false;  		
 		if (pScreenY && pScreenY != p.screenY) e_diffpos = 100 - e_diffpos;
 		if (eventClientY && eventClientY != event.clientY) e_diffpos = 100 - e_diffpos; 
 		moveElevator(e_diffpos);
		e_allowed = false; 
		return false;
} 
   
   

//STORES THE ENDING DRAG VALUE FOR SCALE BAR ELEVATOR
//THIS LOOKS LIKE THE DRAG BARS BUT THE MOVE FUNCTION 
//HAS BEEN BROKEN OUT SO WE CAN CALL IT FROM TWO PLACES
function eNewPos(p) {
	if (e_allowed) {
	    isDragElevator=true;isJumpElevator=false;
		if (navigator.appName=="Netscape") {
			e_endpos = p.screenY;
		}
		
		if (navigator.appName.indexOf("Microsoft")!=-1) {
			e_endpos = event.clientY;
		}
		
		e_diffpos = e_startpos-e_endpos;
		
		if (e_diffpos>=100) e_diffpos = 100;
		if (e_diffpos<=0) e_diffpos = 0;
		moveElevator(e_diffpos);
	}
}
   
   
function updateScaleSlider(currentMapScale) {	
     var steps;   	 	    
     currentMapScale = (currentMapScale < minScale) ? minScale : (currentMapScale >  maxScale) ? maxScale : currentMapScale;
     
          
     /*
    if(currentMapScale <= mapScaleValue) {    
      steps = (mapScaleValue - currentMapScale) / elevatorInterval;
      e_diffpos = e_diffpos - (10 * Math.round(steps));
      
     }else {     
      steps = (currentMapScale - mapScaleValue) / elevatorInterval;
      e_diffpos = e_diffpos + (10 * Math.round(steps));      
       
     }
     */
      e_diffpos = returnElevatorValue(currentMapScale) * 10;      
      if (e_diffpos!=null && e_diffpos >=0) {
         if(e_diffpos > 100) e_diffpos =100;
         mapScaleValue=currentMapScale;             
         moveElevator(e_diffpos);
      }        
}
   
function callSliderUpdate(xml, eventSources){
    var mapScale = xml.getAttribute("mapscale-value");
    var isMapUpdate = xml.getAttribute("mapUpdate");
    //alert(mapScale + ' ' + isMapUpdate );    
 	if (isMapUpdate) {	  	 
   	  updateScaleSlider(parseInt(mapScale));
   	}   		       	
 }
	
	
function checkE_diffpos(e_diffposVal) {
  if(e_diffposVal >100) {   	e_diffposVal=100; 
  }else if (e_diffposVal <0) {  	 e_diffposVal=0;  }
	  
  return e_diffposVal;
}
	
	
   //THIS IS THE + AND - ELEVATOR STEPPING FUNCTION
function stepElevator(p) {
	
	if (p < 0 && mapScaleValue > minScale ) { // stepping up		
	    e_diffpos = e_diffpos + p;
	    e_diffpos=checkE_diffpos(e_diffpos);
		//sliderCallback(e_diffpos,(parseInt(mapScaleValue) - parseInt(elevatorInterval) ))
		sliderCallback(e_diffpos, minScale * (1 + Math.round(e_diffpos /10)));
		 
		 			 	 
	} else if (p > 0 && mapScaleValue < maxScale ) { // stepping down
	    e_diffpos = e_diffpos + p;
	    e_diffpos=checkE_diffpos(e_diffpos);
	    //sliderCallback(e_diffpos,(parseInt(mapScaleValue) + parseInt(elevatorInterval)))
	    sliderCallback(e_diffpos, minScale * (1 + Math.round(e_diffpos /10)))
	    
	} else { return;}
		
	if (e_diffpos > 0 || e_diffpos < 100) {	  
	  moveElevator(e_diffpos);
	}
	
}

 //ADJUSTS VALUE OF THE ELEVTOR BY MOVING A BG IMAGE AND AN INVISIBLE BOX
function moveElevator(p) {
	//CAP VALUES BETWEEN 0 AND 100
	if (p > 100) {
		e_diffpos = 0;
	}
	else if (p < 0) {
		e_diffpos = 100;
	}
	
	if (e_diffpos >= 0 && e_diffpos <= 100) {
		//SNAP VALUE TO INCREMENTS OF 10
		var stepping = Math.round(e_diffpos / 10);
		var moveBy = stepping * 10;
		
		if(isJumpElevator) { // if clicked on ticks		
			sliderCallback(moveBy,((stepping * elevatorInterval)) + minScale);					
			document.getElementById("elevatorBG").style.backgroundPosition = "0pt " + - (100- moveBy) + "px";		
			//document.getElementById("elevatorBox").style.marginTop = -(100 - moveBy) + "px";
			document.getElementById("elevatorBox").style.marginTop = moveBy + "px";
			isJumpElevator=false;
		}else if(isDragElevator) {
			document.getElementById("elevatorBG").style.backgroundPosition = "0pt " + - moveBy + "px";
			//document.getElementById("elevatorBox").style.marginTop = moveBy + "px";
			document.getElementById("elevatorBox").style.marginTop = 100 -  moveBy + "px";			               					
		} else {	
		//alert("moveBy: " + moveBy);
			document.getElementById("elevatorBG").style.backgroundPosition = "0pt " + -(100 - moveBy) + "px";
			//document.getElementById("elevatorBox").style.marginTop = 100 -  moveBy + "px";
			document.getElementById("elevatorBox").style.marginTop = moveBy + "px";
		}					
	}
	
	//REINITIALIZE THE JUMP FUNCTION ON THE BACKGROUND DIV
	document.getElementById("elevatorBG").onmousedown = jumpElevator;	
	
	switchElevatorButtons();	
	return false;
}
 
   //STORES THE STARTING DRAG VALUE FOR SCALE BAR ELEVATOR
function jumpElevator(p) {
	if (navigator.appName=="Netscape") {
		epos = p.clientY + document.body.scrollTop+ document.documentElement.scrollTop - elevatorTopPos;
	}
	
	if (navigator.appName.indexOf("Microsoft") != -1) {
		epos = event.clientY + document.body.scrollTop+ document.documentElement.scrollTop - elevatorTopPos;
	}
		
	//ELEVATOR SCALE BAR IS 100PX HIGH	
	if (epos >= 100){  epos = 100;}
	e_diffpos = epos; isJumpElevator=true;
	moveElevator(e_diffpos);
}	
  
  
function switchElevatorButtons() {
  
  var currentMapScaleValue = Math.round(mapScaleValue); 
  if (currentMapScaleValue >=  maxScale) { // disable elevator bottom
    document.getElementById("elevatorBottom").style.opacity = ".50";
  	document.getElementById("elevatorBottom").style.filter = "alpha(opacity=50)";  	
  	document.getElementById("elevatorTop").style.opacity = "1.0";
  	document.getElementById("elevatorTop").style.filter = "alpha(opacity=100)";  	  	
  	   
  } else if (currentMapScaleValue <=  minScale) { // disable elevator top
    document.getElementById("elevatorTop").style.opacity = ".50";
    document.getElementById("elevatorTop").style.filter = "alpha(opacity=50)";    
    document.getElementById("elevatorBottom").style.opacity = "1.0";
  	document.getElementById("elevatorBottom").style.filter = "alpha(opacity=100)";
  	
  } else if (currentMapScaleValue > minScale && currentMapScaleValue < maxScale) {  
    document.getElementById("elevatorBottom").style.opacity = "1.0";
  	document.getElementById("elevatorBottom").style.filter = "alpha(opacity=100)";  	
  	document.getElementById("elevatorTop").style.opacity = "1.0";
    document.getElementById("elevatorTop").style.filter = "alpha(opacity=100)";      
   }    
}