javascript实现前程无忧的选择城市
前程无忧（51job）主页上的选择工作地点，效果不错，还有弹出层的效果也很好，于是花两天整理出该功能的所有代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="javascriptdiv.aspx.cs" Inherits="mytest_javascriptdiv" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>前程无忧选择地址功能</title>
<link href="../JS/style20080905[1].css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var objX = 0;
var objY = 0;
var bodyScrollWidth=0;
var bodyScrollHeight=0;
var layer=new Array();
var dragObj=new Array();
var dragObjId=new Array();
//启动JS调试
debugger;
//buildGlobalDiv()
function buildGlobalDiv()
{
var globalDiv=document.createElement('div');
globalDiv.id='globalDiv';
globalDiv.style.display='none';
globalDiv.style.zIndex='98';
globalDiv = set_div_style(globalDiv,'globalDiv','0px','0px',bodyScrollWidth+'px',bodyScrollHeight+'px',"absolute"," #333333 0px solid","default","darkgray");
globalDiv.style.filter="alpha(opacity=30)";
document.body.appendChild(globalDiv);
}
function set_div_style(obj,id,top,left,width,height,position,border,cursor,background)
{
var obj = obj;
obj.id = id?id:null;
obj.style.top = top?top:'0px';
obj.style.left = left?left:'0px';
obj.style.width = width?width:'0px';
obj.style.height = height?height:'0px';
obj.style.position = position?position:"static";
obj.style.border = border?border:"1px #000 solid";
obj.style.cursor = cursor?cursor:"default";
obj.style.background = background?background:"";
return obj
}
//buildDiv('popupArea')
function buildDiv()
{
var argArr = buildDiv.arguments;
//定义层需要的初始字串变量
var mainTable = '';
var i=0;
mainTable = initJobArea();
dragObjId[i]=argArr[i];
layer[i] = document.createElement("div");
layer[i].style.visibility='hidden';
layer[i].style.zIndex='999';
layer[i].innerHTML+=mainTable;
document.body.appendChild(layer[i]);
var styleWidth=layer[i].firstChild.width+'px';
var styleHeight=layer[i].firstChild.firstChild.clientHeight+'px';
var layerId = argArr[i];
layer[i] = set_div_style(layer[i],layerId,'0px','0px',styleWidth,'0px',"absolute","0px solid #c0d4db","default","#fff");
dragObj[i]=layer[i].firstChild.firstChild.firstChild.firstChild;
dragObj[i].style.cursor='move';
dragObj[i].onmousedown = function(event){drag_mouse_down(event,this.parentNode.parentNode.parentNode.parentNode)};
layer[i].onselectstart=function(){return false};
layer[i].firstChild.οnresize=function(){checkAndResetStyleTop(this.parentNode)};
}
function drag_mouse_down(event,obj)
{
var obj_left = obj.style.left;
var obj_top = obj.style.top;
var obj_left = obj_left.replace(/p|x/g,"");
var obj_top = obj_top.replace(/p|x/g,"");
if ( event == null ) {//IE必须
event=window.event;
}
var clientX = String(event.clientX).replace(/p|x/g,"");
var clientY = String(event.clientY).replace(/p|x/g,"");
objX = clientX - obj_left;
objY = clientY - obj_top;
}
function checkAndResetStyleTop (obj)
{
var clientHeight=obj.firstChild.clientHeight;
var styleTop=parseInt(obj.style.top.substring(0,obj.style.top.length-2));
if ( clientHeight+styleTop>bodyScrollHeight )
{
obj.style.top=(bodyScrollHeight- clientHeight)+'px';
}
}
//
function initJobArea()
{
var htmlDiv = '';
htmlDiv +='<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">';
htmlDiv +='<tr>';
htmlDiv +='<td width="797" height="36" valign="top" background="title_bg.gif" top="top" left="left" repeat-x;="repeat-x;"">';
htmlDiv +='<table width="100%" height="28" border="0" cellpadding="0" cellspacing="0">';
htmlDiv +='<tr>';
htmlDiv +='<td width="4%" align="center" valign="middle"><img src="01.gif" width="17" height="17" /></td>';
htmlDiv +='<td width="86%" align="left" valign="middle" style="color:#fff;">请选择工作地点</td>';
htmlDiv +='<td width="10%" align="center" valign="middle" style="color:#fff;"><a onClick="javascript:cancel();hiddenLayer(/'popupArea/')" style="color:#FFFFFF;cursor:pointer;">[关闭]</a> </td>';
htmlDiv +='</tr>';
htmlDiv +='</table>';
htmlDiv +='</td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="center" valign="top"><table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">';
htmlDiv +='<tr>';
htmlDiv +='<td colspan="2" align="left" valign="middle"><a href="#" style="color:#000000;font-weight: bold;" onClick="javascript:sltJobarea(/'不限/',/'/')">不限</a></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td colspan="2" align="left" valign="middle" bgcolor="#F7F7F7" style="color:#ff7400; font-size: 14px; font-weight: bold;">主要城市:</td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td width="80" align="left" valign="middle" style="color:#000000;font-weight: bold;">华北-东北：</td>';
htmlDiv +='<td align="left" valign="middle">';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'北京/',/'0100/');">北京</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'天津/',/'0500/');">天津</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'大连/',/'2303/');">大连</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'沈阳/',/'2302/');">沈阳</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'长春/',/'2402/');">长春</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'哈尔滨/',/'2202/');">哈尔滨</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">华东地区：</td>';
htmlDiv +='<td align="left" valign="middle">';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'上海/',/'0200/');">上海</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'南京/',/'0702/');">南京</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'苏州/',/'0703/');">苏州</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'杭州/',/'0802/');">杭州</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'宁波/',/'0803/');">宁波</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'合肥/',/'1502/');">合肥</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'福州/',/'1102/');">福州</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'济南/',/'1202/');">济南</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'青岛/',/'1203/');">青岛</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">华南-华中：</td>';
htmlDiv +='<td align="left" valign="middle">';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'广州/',/'0302/');">广州</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'深圳/',/'0400/');">深圳</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'东莞/',/'0308/');">东莞</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'武汉/',/'1802/');">武汉</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'长沙/',/'1902/');">长沙</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'郑州/',/'1702/');">郑州</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" style="color:#000000;font-weight: bold;">西北-西南：</td>';
htmlDiv +='<td align="left" valign="middle">';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'西安/',/'2002/');">西安</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'成都/',/'0902/');">成都</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'重庆/',/'0600/');">重庆</span> ';
htmlDiv +='<span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'昆明/',/'2502/');">昆明</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td height="5" colspan="2" align="left" valign="middle" background="bgclear_bot.gif"></td>';
htmlDiv +='</tr>';
htmlDiv +='</table>';
htmlDiv +='<div id="subareadiv">';
htmlDiv +=getAllArea();
htmlDiv +='</div>';
htmlDiv +='</td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td height="4" align="center" valign="top" bgcolor="#FF7400"></td>';
htmlDiv +='</tr>';
htmlDiv +='</table>';
return htmlDiv;
}
function getAllArea()
{
htmlDiv = '';
htmlDiv +='<table width="100%" border="0" cellpadding="3" cellspacing="0">';
htmlDiv +='<tr>';
htmlDiv +='<td colspan="7" align="left" valign="middle" bgcolor="#F7F7F7" style="color:#ff7400; font-size: 14px; font-weight: bold;">所有省份:</td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td width="80" align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华北-东北：</td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1600/' , /'河北省/' )">河北省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2100/' , /'山西省/' )">山西省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2800/' , /'内蒙古/' )">内蒙古</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2300/' , /'辽宁省/' )">辽宁省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2400/' , /'吉林省/' )">吉林省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2200/' , /'黑龙江省/' )">黑龙江省</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华东地区：</td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0700/' , /'江苏省/' )">江苏省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0800/' , /'浙江省/' )">浙江省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1500/' , /'安徽省/' )">安徽省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1100/' , /'福建省/' )">福建省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1300/' , /'江西省/' )">江西省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1200/' , /'山东省/' )">山东省</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">华南-华中：</td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0300/' , /'广东省/' )">广东省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1400/' , /'广西/' )">广西</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1000/' , /'海南省/' )">海南省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1700/' , /'河南省/' )">河南省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1800/' , /'湖北省/' )">湖北省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'1900/' , /'湖南省/' )">湖南省</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">西北-西南：</td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2000/' , /'陕西省/' )">陕西省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2700/' , /'甘肃省/' )">甘肃省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3200/' , /'青海省/' )">青海省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2900/' , /'宁夏/' )">宁夏</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3100/' , /'新疆/' )">新疆</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'0900/' , /'四川省/' )">四川省</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;"> </td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2600/' , /'贵州省/' )">贵州省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'2500/' , /'云南省/' )">云南省</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3000/' , /'西藏/' )">西藏</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"> </td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"> </td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"> </td>';
htmlDiv +='</tr>';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF" style="color:#000000;font-weight: bold;">其它：</td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3300/' , /'香港/' )">香港</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3400/' , /'澳门/' )">澳门</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3500/' , /'台湾/' )">台湾</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="javascript:showSubArea( /'3600/' , /'国外/' )">国外</span></td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"> </td>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#FFFFFF"> </td>';
htmlDiv +='</tr>';
htmlDiv +='</table>';
return htmlDiv;
}
//hide()
//滤镜效果
function hide()
{
synSizeByBody("globalDiv");
document.getElementById("globalDiv").style.display = "block";
hideElementAll();
}
function synSizeByBody()
{
reCalBodySize();
var argArr=synSizeByBody.arguments;
for ( var i=0;i<argArr.length;i++ )
{
if ( document.getElementById(argArr[i]) != null )
{
document.getElementById(argArr[i]).style.width = (bodyScrollWidth)+'px';
document.getElementById(argArr[i]).style.height = (bodyScrollHeight)+'px';
}
}
}
function reCalBodySize()
{
bodyScrollWidth=document.documentElement.scrollWidth;
bodyScrollHeight=document.documentElement.scrollHeight;
}
//隐藏元素
var hiddenObjs = [];
function hideElementAll()
{
hiddenObjs = [];
HideElement("SELECT");
HideElement("OBJECT");
HideElement("IFRAME");
}
function HideElement(strElementTagName)
{
try
{
for(i=0;i<window.document.all.tags(strElementTagName).length; i++)
{
var objTemp = window.document.all.tags(strElementTagName)[i];
if ( 'visible' == objTemp.style.visibility )
{
objTemp.style.visibility = "hidden";
hiddenObjs.push( objTemp );
}
}
}catch(e)
{
alert(e.message);
}
}
//displayLayer('popupArea')
function displayLayer(layerID)
{
if ( document.getElementById(layerID) != null)
{
var dv = document.getElementById(layerID);
hiddenLayerOther(layerID);
if ( dv.style.visibility == "hidden" )
{
GetCenterXY_ForLayer(dv);
dv.style.visibility = "visible";
}
document.body.onmousemove = function (event){drag(event,dv)};
document.body.onmouseup = function(){objX = 0;objY=0};
}
return false;
}
function hiddenLayerOther(layerID)
{
for( var i=0;i<dragObjId.length;i++ )
{
if ( dragObjId[i] != layerID && document.getElementById(dragObjId[i]) != null )
{
hiddenLayer(dragObjId[i]);
}
}
}
function hiddenLayer()
{
var argArr = hiddenLayer.arguments;
for(var i=0;i<argArr.length;i++)
{
if ( document.getElementById(argArr[i])!=null )
{
document.getElementById(argArr[i]).style.visibility = "hidden";
}
}
}
//将悬浮层的位置定位在body可见区域中央
function GetCenterXY_ForLayer(objdiv)
{
objdiv.style.display='block';
var styleWidth=objdiv.style.width.substring(0,objdiv.style.width.length-2);
var clientHeight=objdiv.firstChild.clientHeight;
var objLeft = parseInt(document.documentElement.scrollLeft+(document.documentElement.clientWidth - styleWidth)/2)+'px';
var relTop=(document.documentElement.clientHeight-clientHeight)/2 > 0 ? (document.documentElement.clientHeight-clientHeight)/2:0;
var objTop = parseInt(document.documentElement.scrollTop+relTop)+'px';
objdiv.style.top = objTop;
objdiv.style.left = objLeft;
checkAndResetStyleTop(objdiv);
}
function drag(event,obj)
{
if( objX != 0 && objY != 0 )
{
if ( event == null ) {//IE必须
event=window.event;
}
if ( event.button == 1 || event.button == 0 )
{
var objWidth=obj.firstChild.clientWidth;
var objHeight=obj.firstChild.clientHeight;
reCalBodySize();
var leftPo= event.clientX-objX;
if ( leftPo < 0 )
{
leftPo=0;
}
if ( leftPo > bodyScrollWidth-objWidth )
{
leftPo=bodyScrollWidth-objWidth;
}
var topPo=event.clientY-objY;
if ( topPo < 0 )
{
topPo=0;
}
if ( topPo > bodyScrollHeight-objHeight )
{
topPo=bodyScrollHeight-objHeight;
}
obj.style.left=leftPo+'px';
obj.style.top=topPo+'px';
}
}
}
//JS+HTML中的事件
function cancel()
{
document.getElementById("globalDiv").style.display = "none";
showElementAll();
}
function showElementAll()
{
var len = hiddenObjs.length;
for ( var i = 0 ; i < len ; i++ )
{
hiddenObjs[i].style.visibility = "visible";
}
}
//接收并保存选择的值
function sltJobarea(show,value)
{
document.getElementById("form1").jobarea.value = value;
document.getElementById("form1").btnSltArea.value = show;
cancel();
hiddenLayer("popupArea");
}
function showSubArea(subareaid , subareaname )
{
htmlDiv = '';
htmlDiv +='<table width="100%" border="0" cellspacing="0">';
htmlDiv +='<tr>';
htmlDiv +='<td align="left" valign="middle" bgcolor="#F7F7F7" style="text-indent:5px;">';
htmlDiv +='<span style="cursor:pointer;font-weight:bold; font-size: 14px;"';
htmlDiv +=' onMouseOver="this.style.color=/'#ff7300/'" onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'' + subareaname + '/',/'' + subareaid + '/');">' + subareaname;
htmlDiv +='</span> <span style="cursor:pointer; color:#ff7300;" onMouseOver="this.style.color=/'#000000/'"';
htmlDiv +=' onMouseOut="this.style.color=/'#ff7300/'" onClick="javascript:document.getElementById( /'subareadiv/' ).innerHTML=getAllArea();">[返回所有省份]</span></td>';
htmlDiv +='</tr>';
htmlDiv +='<tr><td><table width="100%"><tr>'
subareaids = getAreaIDs( subareaid );
subareanames = getAreaNames( subareaid );
num = 0;
for( var m = 1 ; m < subareaids.length ; m++ )
{
num++;
htmlDiv +='<td align="left" valign="bottom" bgcolor="#FFFFFF"><span style="cursor:pointer" onMouseOver="this.style.color=/'#ff7300/'"';
htmlDiv +=' onMouseOut="this.style.color=/'/'" onClick="sltJobarea(/'' + subareanames[m] + '/',/'' + subareaids[m] + '/');">' + subareanames[m] + '</span></td>';
if( num % 7 == 0 )
{
htmlDiv +='</tr><tr>';
}
}
htmlDiv +='</tr></table></td></tr></table>';
document.getElementById( 'subareadiv' ).innerHTML = htmlDiv;
}
function getAreaIDs(idx)
{
switch(idx)
{
case '0100':
return new Array('0100');
case '0200':
return new Array('0200');
case '0300':
return new Array('0300','0302','0400','0303','0304','0305','0306','0307','0308','0314','0315','0317','0318','0319','0320','0321','0322','0323','0324','0325');
case '0400':
return new Array('0400');
case '0500':
return new Array('0500');
case '0600':
return new Array('0600');
case '0700':
return new Array('0700','0702','0703','0704','0705','0706','0707','0708','0709','0710','0711','0712','0713','0714');
case '0800':
return new Array('0800','0802','0803','0804','0805','0806','0807','0808','0809','0810','0811','0812');
case '0900':
return new Array('0900','0902','0903','0904','0905','0906','0907','0908','0909','0910');
case '1000':
return new Array('1000','1002','1003');
case '1100':
return new Array('1100','1102','1103','1104','1105','1106','1107','1108','1109','1110');
case '1200':
return new Array('1200','1202','1203','1204','1205','1206','1207','1208','1209','1210','1211','1212','1213');
case '1300':
return new Array('1300','1302','1303');
case '1400':
return new Array('1400','1402','1403','1404','1405');
case '1500':
return new Array('1500','1502','1503','1504','1505','1506','1507','1508','1509','1510','1511','1512','1513','1514','1515');
case '1600':
return new Array('1600','1602','1603','1604','1605','1606');
case '1700':
return new Array('1700','1702','1703','1704');
case '1800':
return new Array('1800','1802','1803','1804','1805','1806','1807','1808','1809','1810');
case '1900':
return new Array('1900','1902','1903','1904','1905','1906','1907','1908','1909','1910','1911','1912','1913','1914');
case '2000':
return new Array('2000','2002','2003','2004','2005','2006');
case '2100':
return new Array('2100','2102','2103','2104','2105');
case '2200':
return new Array('2200','2202','2203','2204','2205','2206','2207','2208');
case '2300':
return new Array('2300','2302','2303','2304','2305','2306','2307','2308','2309','2310','2311','2312');
case '2400':
return new Array('2400','2402','2403','2404','2405');
case '2500':
return new Array('2500','2502','2503','2504','2505','2506','2507','2508','2509','2510');
case '2600':
return new Array('2600','2602','2603');
case '2700':
return new Array('2700','2702','2703');
case '2800':
return new Array('2800','2802','2803','2804');
case '2900':
return new Array('2900','2902');
case '3000':
return new Array('3000','3002','3003');
case '3100':
return new Array('3100','3102','3103','3104');
case '3200':
return new Array('3200','3202');
case '3300':
return new Array('3300');
case '3400':
return new Array('3400');
case '3500':
return new Array('3500');
case '3600':
return new Array('3600');
default:
return new Array();
}
}
function getAreaNames(idx)
{
switch(idx)
{
case '0100':
return new Array('北京市');
case '0200':
return new Array('上海市');
case '0300':
return new Array('广东省','广州市','深圳市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市','韶关市','江门市','湛江市','肇庆市','清远市','潮州市','河源市','揭阳市','茂名市','汕尾市','顺德市');
case '0400':
return new Array('深圳市');
case '0500':
return new Array('天津市');
case '0600':
return new Array('重庆市');
case '0700':
return new Array('江苏省','南京市','苏州市','无锡市','常州市','昆山市','常熟市','扬州市','南通市','镇江市','徐州市','连云港市','盐城市','张家港市');
case '0800':
return new Array('浙江省','杭州市','宁波市','温州市','绍兴市','金华市','嘉兴市','台州市','湖州市','丽水市','舟山市','衢州市');
case '0900':
return new Array('四川省','成都市','绵阳市','乐山市','泸州市','德阳市','宜宾市','自贡市','内江市','攀枝花市');
case '1000':
return new Array('海南省','海口市','三亚市');
case '1100':
return new Array('福建省','福州市','厦门市','泉州市','漳州市','莆田市','三明市','南平市','宁德市','龙岩市');
case '1200':
return new Array('山东省','济南市','青岛市','烟台市','潍坊市','威海市','淄博市','临沂市','济宁市','东营市','泰安市','日照市','德州市');
case '1300':
return new Array('江西省','南昌市','九江市');
case '1400':
return new Array('广西','南宁市','桂林市','柳州市','北海市');
case '1500':
return new Array('安徽省','合肥市','芜湖市','安庆市','马鞍山市','蚌埠市','阜阳市','铜陵市','滁州市','黄山市','淮南市','六安市','巢湖市','宣城市','池州市');
case '1600':
return new Array('河北省','石家庄市','廊坊市','保定市','唐山市','秦皇岛市');
case '1700':
return new Array('河南省','郑州市','洛阳市','开封市');
case '1800':
return new Array('湖北省','武汉市','宜昌市','黄石市','襄樊市','十堰市','荆州市','荆门市','孝感市','鄂州市');
case '1900':
return new Array('湖南省','长沙市','株洲市','湘潭市','衡阳市','岳阳市','常德市','益阳市','郴州市','邵阳市','怀化市','娄底市','永州市','张家界市');
case '2000':
return new Array('陕西省','西安市','咸阳市','宝鸡市','铜川市','延安市');
case '2100':
return new Array('山西省','太原市','运城市','大同市','临汾市');
case '2200':
return new Array('黑龙江省','哈尔滨市','伊春市','绥化市','大庆市','齐齐哈尔市','牡丹江市','佳木斯市');
case '2300':
return new Array('辽宁省','沈阳市','大连市','鞍山市','营口市','抚顺市','锦州市','丹东市','葫芦岛市','本溪市','辽阳市','铁岭市');
case '2400':
return new Array('吉林省','长春市','吉林市','辽源市','通化市');
case '2500':
return new Array('云南省','昆明市','曲靖市','玉溪市','大理市','丽江市','蒙自市','开远市','个旧市','红河州');
case '2600':
return new Array('贵州省','贵阳市','遵义市');
case '2700':
return new Array('甘肃省','兰州市','金昌市');
case '2800':
return new Array('内蒙古','呼和浩特市','赤峰市','包头市');
case '2900':
return new Array('宁夏','银川市');
case '3000':
return new Array('西藏','拉萨市','日喀则市');
case '3100':
return new Array('新疆','乌鲁木齐市','克拉玛依市','喀什地区市');
case '3200':
return new Array('青海省','西宁市');
case '3300':
return new Array('香港');
case '3400':
return new Array('澳门');
case '3500':
return new Array('台湾');
case '3600':
return new Array('国外');
default:
return new Array();
}
}
///
///
///
//初始化加载DIV模板和内容
function init()
{
buildGlobalDiv();//建底层的DIV，屏蔽对页面的操作
buildDiv('popupArea');//加载所有的省城市信息
}
</script>
</head>
<body οnlοad="javascript:init();">
<form id="form1" runat="server">
<div>
<input type="hidden" name="jobarea" value=""/>
<input type="button" name="btnSltArea" value="工作地点" οnclick="hide();displayLayer('popupArea')"/>
</div>
</form>
</body>
</html>
javascript实现前程无忧的选择城市相关推荐
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
- 纯JavaScript实现弹出选择第几个单选按钮
为什么80%的码农都做不了架构师?>>> 纯JavaScript实现弹出选择第几个单选按钮 <div id="a" name="aa&quo ...
- html城市手机搜索,原生js实现html手机端城市列表索引选择城市
本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: 定位城市 上海市 css部分: *{ margin: 0; padding: 0; list ...
- 如果你选择城市创业的话，可以先从小本生意做起
如果你选择城市创业的话,可以先从小本生意做起,比如加盟饮食店,加盟费一般不高,也可以搞加工或者物流快递类的创业项目,一般就是要根据自身优势,多和当地的经验人士取经,相信结果不会太差.总之要看你自己想做 ...
- 【Android】快速实现仿美团选择城市界面，微信通讯录界面
概述 本文是这个系列的第三篇,不出意外也是终结篇.因为使用经过重构后的控件已经可以快速实现市面上带 索引导航.悬停分组的列表界面了. 在前两篇里,我们从0开始,一步一步实现了仿微信通讯录.饿了么选餐界 ...
- 选择城市，按城市的首字母进行排序
1.新建父组件choiceCity.vue <template><view class="choiceCity"><view class=" ...
- Android 仿美团选择城市、微信通讯录、饿了么点餐列表的导航悬停分组索引列表
SuspensionIndexBar 项目地址:mcxtzhang/SuspensionIndexBar 简介:快速实现分组悬停.右侧索引导航联动 列表. 如 美团选择城市界面,微信通讯录界面.饿了么 ...
- 微信小程序实现图片多选择 || 选择城市
图片实现多选择 wxml <view class="xuanze"><block wx:for="{{selectIndex}}" wx:ke ...
- 选择所在城市html按字母,微信小程序实现根据字母选择城市功能
今天开发一个小程序,里面涉及到区域选择,看了网上的一些版本,感觉写的不全,有可能是我的理解能力还不够吧.今天我就结合网上的答案,在根据自己的需求,重新整理一份.希望对大家有帮助.先看看截图: 项目截图 ...
最新文章
- apache集成tomcat，并根据域名进行分发 屏蔽端口显示
- 代码片段管理器——SnippetsLab
- VC对话框禁止关闭按钮和禁止任务管理中关闭进程
- 学习.Net的经典网站
- spring中的IOC和AOP
- centos7将网卡名字改成eth样式
- 第十周 11.1-11.7
- linux多进程编程(一)
- win10好用的C语言软件,9款超级实用的Win10软件，一定要收藏，简直不要太好用
- 大数据开发入门怎么学习？
- SEO人员，如何搭建你的网站基础框架？
- QCheckBox::toggled(bool)和QCheckBox::clicked(bool)的区别
- ramda 函数 relation type
- echarts实现数据可视化
- GFW 三定律，太有创意了，太真实了，胆太大，竟敢光天化日下说实话！
- 计算机java项目(毕设课设) 之 含文档+PPT+源码等]基于SSM的足球联赛管理系统
- 华为云鲲鹏云服务抢占云上多元算力新赛道
- EditPlus安装Json格式化工具功能
- 百度前端技术学院—斌斌学院题库
- 江西省建筑节能与绿色建筑发展“十三五”规划