132 lines
2.9 KiB
JavaScript
132 lines
2.9 KiB
JavaScript
|
|
|||
|
|
$(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
initLayout();
|
|||
|
|
getLayout();
|
|||
|
|
$("#btnSaveLoyout").click(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
upLoad();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
//初始化布局
|
|||
|
|
function initLayout()
|
|||
|
|
{
|
|||
|
|
//图片的初始位置
|
|||
|
|
var map=$("img[id$='imgShow'");
|
|||
|
|
var imgoff=map.offset();
|
|||
|
|
var initLeft=imgoff.left;
|
|||
|
|
var initTop=imgoff.top;
|
|||
|
|
//所有的调查主题
|
|||
|
|
var box=$(".box");
|
|||
|
|
var i=0;
|
|||
|
|
box.each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var id=$(this).attr("id");
|
|||
|
|
var width=$(this).width();
|
|||
|
|
var tmId=id+"_boxContent";
|
|||
|
|
$(this).wrap("<div id='"+tmId+"' style='width:"+width+"'></div>");
|
|||
|
|
var boxCon=$("#"+tmId);
|
|||
|
|
boxCon.css("position","absolute");
|
|||
|
|
boxCon.css("z-index","100");
|
|||
|
|
boxCon.css("left",initLeft);
|
|||
|
|
initLeft+=boxCon.width()+5;
|
|||
|
|
boxCon.css("top",initTop);
|
|||
|
|
if(initLeft>=map.width())
|
|||
|
|
{
|
|||
|
|
initTop+=boxCon.height()+5;
|
|||
|
|
initLeft=imgoff.left;
|
|||
|
|
}
|
|||
|
|
//设置拖动
|
|||
|
|
boxCon.easydrag();
|
|||
|
|
boxCon.setHandler(id);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//获取记录在服务器端的布局信息
|
|||
|
|
function getLayout()
|
|||
|
|
{
|
|||
|
|
$().SoapAjax("Para","GetPara",{key:"VoteMapLoyout"},setLayout,null,null);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
//设置布局
|
|||
|
|
function setLayout(data)
|
|||
|
|
{
|
|||
|
|
//获取图片的顶点坐标
|
|||
|
|
var map=$("img[id$='imgShow'");
|
|||
|
|
var imgoff=map.offset();
|
|||
|
|
var pTop=map.css("padding-top").replace("px","");
|
|||
|
|
var pLeft=map.css("padding-left").replace("px","");
|
|||
|
|
//分析获取来的坐标信息
|
|||
|
|
var txt=$(data).text();
|
|||
|
|
var array=txt.split("$");
|
|||
|
|
for(s in array)
|
|||
|
|
{
|
|||
|
|
if(array[s]=="")continue;
|
|||
|
|
var info=array[s];
|
|||
|
|
setBox(info,imgoff.left+Number(pLeft),imgoff.top+Number(pTop));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//设置元素的位置
|
|||
|
|
//info:元素的信息，包括id与坐标
|
|||
|
|
//left:地图的左顶点坐标
|
|||
|
|
//top:地图的上顶点坐标
|
|||
|
|
function setBox(info,left,top)
|
|||
|
|
{
|
|||
|
|
//图片的初始位置
|
|||
|
|
var map=$("img[id$='imgShow'");
|
|||
|
|
//图片宽高
|
|||
|
|
var imgWd=map.width();
|
|||
|
|
var imgHg=map.height();
|
|||
|
|
|
|||
|
|
var array=info.split(",");
|
|||
|
|
var box=$("#"+array[0]+"_boxContent");
|
|||
|
|
box.css("top",top+imgHg*Number(array[1])-box.height()/2);
|
|||
|
|
box.css("left",left+imgWd*Number(array[2])-box.width()/2);
|
|||
|
|
//box.css("left",left+Number(array[2]));
|
|||
|
|
}
|
|||
|
|
//上传布局信息
|
|||
|
|
function upLoad()
|
|||
|
|
{
|
|||
|
|
var xml=buildXML();
|
|||
|
|
//xml=encodeURIComponent(xml);
|
|||
|
|
$().SoapAjax("Para","SetPara",{key:"VoteMapLoyout",value:xml},
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
alert("保存成功！");
|
|||
|
|
}
|
|||
|
|
,null,null);
|
|||
|
|
}
|
|||
|
|
//生成配置信息的XML
|
|||
|
|
function buildXML()
|
|||
|
|
{
|
|||
|
|
//图片的初始位置
|
|||
|
|
var map=$("img[id$='imgShow'");
|
|||
|
|
var imgoff=map.offset();
|
|||
|
|
//图片宽高
|
|||
|
|
var imgWd=map.width();
|
|||
|
|
var imgHg=map.height();
|
|||
|
|
//逐个记录位置
|
|||
|
|
var box=$(".box");
|
|||
|
|
//结果
|
|||
|
|
var tmp = "";
|
|||
|
|
box.each(
|
|||
|
|
function()
|
|||
|
|
{
|
|||
|
|
var id=$(this).attr("id");
|
|||
|
|
//当前元素所在绝对坐标
|
|||
|
|
var offset = $(this).parent().offset();
|
|||
|
|
var xPer=(offset.left-imgoff.left+$(this).parent().width()/2)/imgWd;
|
|||
|
|
var yPer=(offset.top-imgoff.top+$(this).parent().height()/2)/imgHg;
|
|||
|
|
//记录
|
|||
|
|
tmp+=id+",";
|
|||
|
|
tmp+=yPer+",";
|
|||
|
|
tmp+=xPer+"$";
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
return tmp;
|
|||
|
|
}
|