jquery 实现弹出层插件

通过URL 调用WEB SERVICE,xml格式
Client client = Client.create();
WebResource webResource = client.resource(URL);
MultivaluedMap queryParams = new MultivaluedMapImpl();
String param="asx.wbc";//参数
queryParams.add("security",param);
securityDetailList = webResource.queryParams(queryParams).get(SecurityDetailModelList.class);//get data from web service
Collections.sort(securityDetailList, new Comparator(){//order by code
public int compare(Object a, Object b) {
String one = ((SecurityDetailModel)a).getSecurity();
String two = ((SecurityDetailModel)b).getSecurity ();
return one.compareTo(two) ;
}
});

弹出层JS
function windowPop(){
tipsWindown("Code Loop Up","url:get?${ctx}/public/codeSearch.jsp?param=5","550","400","true","","true","text");
}

底层JS

///-------------------------------------------------------------------------
//jQuery bring up window
//--------------------------------------------------------------------------
/*parameter
----------------------------------------------------------------------------
title:
content:The content can be { text | id | img | url | iframe }
width:The window's width
height:The window's height
drag: Whether you can drag.ture is yes ,false is no
time:Automatic closing time
showbg:[optional] set whether to display the mask layer (0 not for display,1displays )
cssName:[ optional ] additional class name
------------------------------------------------------------------------*/
//example:
//------------------------------------------------------------------------
//simpleWindown("title","text:content","500","400","true","3000","0","css")
//------------------------------------------------------------------------

var showWindown = true;
function tipsWindown(title,content,width,height,drag,time,showbg,cssName) {
$("#windown-box").remove();
var width = width>= 2000?this.width=2000:this.width=width;
var height = height>= 1000?this.height=1000:this.height=height;
var param=content.substring(content.indexOf("=")+1,content.length);//
if(showWindown == true) {
var simpleWindown_html = new String;
simpleWindown_html = "<div id="windownbg" style=""></div>";
simpleWindown_html += "<div id="windown-box">";
simpleWindown_html += "<div id="windown-title"><h2></h2></div>";
simpleWindown_html += "<div id="windown-top-title"><h1>Enter all or part the name or code.</h1></div>";
simpleWindown_html += "<div id="windown-top style=">
<form method="post" action="%24%7Bctx%7D/uma.wealthdirect/transact/CodeSearch.action"></form>&nbsp"
simpleWindown_html +="<input type="hidden" id="searchType" value='"+param+"'><input type="text" id="searchParam">&nbsp<img src="/uma.wealthdirect/public/img/Go.png" style="cursor: pointer;" name="research">
</div>"
simpleWindown_html += "<div id="windown-top-space" class="windown-top-space"></div>";
simpleWindown_html += "<div id="windown-content-border"><div id="windown-content"></div></div>";
simpleWindown_html += "<div id="windown-bottom" class="windown-bottom"><img src="/uma.wealthdirect/public/img/Close.png" style="cursor: pointer;" name="research"></div>";
simpleWindown_html += "<div id='\"windown-bottom-space\"'></div>";
simpleWindown_html += "</div>";
$("body").append(simpleWindown_html);
show = false;
}
contentType = content.substring(0,content.indexOf(":"));
content = content.substring(content.indexOf(":")+1,content.length);
switch(contentType) {
case "text":
$("#windown-content").html(content);
break;
case "id":
$("#windown-content").html($("#"+content+"").html());
break;
case "img":
$("#windown-content").html(content);
$.ajax({
error:function(){
$("#windown-content").html("<p class="windown-error">");
},
success:function(html){
$("#windown-content").html("<img src="+content+" alt="">");
}
});
break;
case "url":
var content_array=content.split("?");

$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#windown-content").html("</p>
<p class="windown-error">load error...</p>");
},
success:function(html){
$("#windown-content").html(html);
}
});
break;
case "iframe":

$.ajax({
error:function(){
$("#windown-content").html("<p class="windown-error">load error...</p>");
},
success:function(html){
$("#windown-content").html("<iframe src="%5C%22%22+content+%22%5C%22" width='\"100%\"' height='\""+parseInt(height)+"px"+"\"' scrolling='\"auto\"' frameborder='\"0\"' marginheight='\"0\"' marginwidth='\"0\"'></iframe>");
}
});
}
$("#windown-title h2").html(title);
if(showbg == "true") {$("#windownbg").show();}else {$("#windownbg").remove();};
$("#windownbg").animate({opacity:"0"},"normal");
$("#windown-box").show();
if( height >= 527 ) {
$("#windown-title").css({width:(parseInt(width)+22)+"px"});
$("#windown-content").css({width:(parseInt(width)+17)+"px",height:height+"px"});
}else {
$("#windown-title").css({width:(parseInt(width)+10)+"px"});
$("#windown-content").css({width:width+"px",height:height+"px"});
}
var cw = document.documentElement.clientWidth,ch = document.documentElement.clientHeight,est = document.documentElement.scrollTop;
var _version = $.browser.version;
if ( _version == 6.0 ) {
$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};
var Drag_ID = document.getElementById("windown-box"),DragHead = document.getElementById("windown-title");

var moveX = 0,moveY = 0,moveTop,moveLeft = 0,moveable = false;
if ( _version == 6.0 ) {
moveTop = est;
}else {
moveTop = 0;
}
var sw = Drag_ID.scrollWidth,sh = Drag_ID.scrollHeight;
DragHead.onmouseover = function(e) {
if(drag == "true"){DragHead.style.cursor = "move";}else{DragHead.style.cursor = "default";}
};
DragHead.onmousedown = function(e) {
if(drag == "true"){moveable = true;}else{moveable = false;}
e = window.event?window.event:e;
var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
moveX = e.clientX-ol;
moveY = e.clientY-ot;
document.onmousemove = function(e) {
if (moveable) {
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x > 0 &&( x + sw 0 && (y + sh



<script type="text/javascript">
//button for the research
function researchAction(){
searchParam= $.trim($("#searchParam").val());
var length=searchParam.length;
if(length<3){
$("#result").html('<span class="error">Please enter at least two characters.</span>');
return false;
}
$("#windown-bottom").show();
$.ajax({
type:"post",
url:"${ctx}/uma.wealthdirect/transact/CodeSearch.action",
data:"searchParam="+searchParam,
success:function(data){
var dataObj=eval("("+data+")");
var lis="";
var asxCodeParam="";
if(dataObj.length==0){
$("#result").html('<span class="error">This asset cannot be found.</span>');
return false;
}
lis+="<table class='asxCode' width='100%'><tr id='trBackGround'><td align='left'>Select from the list below</td><td></td></tr>"
lis+="<tr id='trBackGround1'><td align='left'>Code";
lis+="<\/td><td align='left'>Description<\/td><\/tr>";
for(var i=0;i<dataObj.length;i++){
var dataObject=dataObj[i];
var code=dataObject.security;
var str="'"+code+"'";
lis+="<tr><td align='left'><a class='underLine' οnclick=dbClickTr("+str+")>";
lis+=code;
asxCodeParam+=dataObject.security;
lis+="</a><\/td><td align='left'>";
lis+=dataObject.issuerName;
lis+="<\/td><\/tr>";
}
$("#asxCodeParam").val(asxCodeParam);
lis+=" <\/table>";
$("#result").html(lis);
trChangeColor();
}
})
}
//button for the cancel
function closeWindow(){
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
}
//click the link
function dbClickTr(code){
$("#asxCodeParam").val(code);
selectResult();
}
//change the table color
function trChangeColor(){
$(".asxCode tr:odd").addClass("odd");
$(".asxCode tr:even").addClass("even");
$(".asxCode tr").hover(function(){
$(this).removeClass("even");
$(this).toggleClass("hover");
},function(){
$(this).toggleClass("hover");
$(".asxCode tr:odd").addClass("odd");
$(".asxCode tr:even").addClass("even");
})
}


</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Code Loop Up</title>
<form action="%24%7Bctx%7D/uma.wealthdirect/transact/CodeSearch.action" method="post">
<div id="showType">
<hidden name="asxCodeParam" id="asxCodeParam"></hidden></div>
</form>

<div id="result">

</div>