要实现这样一种功能,当我点击图片,弹出所对应区域所获取的数据,大家看下图,是我们显示的结果:
首先实现功能的时候,要获取点击图片所对应的信息,传到后台进行查询,这里我们用到的是dkcode作为参数
进行查询。
点击图片的单击事件:
<span style="font-size:18px;"> $("#re1").click(function(){
getdkInfo('G0000', 1);
getdkInfo('G0000', 1);
});</span>
触发 getInfo事件
<span style="font-size:18px;">function getdkInfo(dkcode, type){
$("#container").empty();
if(type==1){
加载生产分区
$.get("${path}/app/getscfq.json?gnfqcode="+dkcode,function(result){
$("#container").empty();
for(var i =0;i<result.length;i++){
var d=result[i];
var txt="";
txt+= "<li id=\"list"+i+"\" οnclick=\"javascript:addUpload('"+d.scfqcode+"', 2)\"> ";
txt+= "<dl>";
txt+= "<dt class=\"left\"><img src=\"${path}/resource/app/x/images/nt01.jpg\"></dt>";
txt+= "<dd>";
txt+= "<h2>"+d.scfqname+"</h2>";
txt+= "</dd>";
txt+= " </dl>";
txt+= "</li>";
document.getElementById("container").insertAdjacentHTML("beforeEnd", txt);
}
$("#niu").show();
});
}else{
//单元
$.get("${path}/app/getdyfq.json?scfqcode="+dkcode,function(result){
for(var i =0;i<result.length;i++){
var d=result[i];
var txt="";
txt+= "<li id=\"list"+i+"\" οnclick=\"wst.javaFun('"+d.dycode+"')\"> ";
txt+= "<dl>";
txt+= "<dt class=\"left\"><img src=\"${path}/resource/app/x/images/nt01.jpg\"></dt>";
txt+= "<dd>";
txt+= "<h2>"+d.dyname+"</h2>";
txt+= "</dd>";
txt+= " </dl>";
txt+= "</li>";
document.getElementById("container").insertAdjacentHTML("beforeEnd", txt);
$("#niu").show();
}
});
} </span>
txt文本框为拼接弹出框所显示的div。
拼接的页面在存放在哪呢?
<span style="font-size:18px;"> <div class="dhtanch" id="niu" style=" display:none">
<div class="tanchmain">
<div class="close"><img src="${path}/resource/app/x/images/22_03.png"></div>
<ul class="news ind" id ="container" style=" margin-top:1rem; margin-bottom:1rem">
</ul>
</div>
</div></span>
界面弹出框效果就完成了,是不是很简单呢?