<html>
<head>
<title>sdf</title>
<script src="jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//浏览器判断
var Browser = {
'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
};
//获取鼠标绝对位置
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function closeDiv(){
document.getElementById("chooseInfo").style.display = "none";
}
//显示对比窗口
function getMouseXY(checkBox,e){
e = e || window.event;
var mousePos = mouseCoords(e);
var x = mousePos.x;
var y = mousePos.y;
var div = document.getElementById("chooseInfo");
var ul = document.getElementById("infoList");
var li = ul.getElementsByTagName("li");
div.style.display = "block";
div.setAttribute("class","chooseInfoStyle");
div.style.top = y;
div.style.left = x + 20;
if(checkBox.checked){
ul.appendChild(createInfoElement(checkBox.value));
}else{
for(var i = 0;i < li.length;i++){
if(li[i].getElementsByTagName("input")[0].value == checkBox.value){
ul.removeChild(li[i]);
break;
}
}
}
}
//删除节点
function removeInfoElement(){
var checkBox = document.getElementsByTagName("input");
for(var i = 0;i < checkBox.length;i++){
if(checkBox[i].getAttribute("type") == "checkbox" && checkBox[i].value == arguments[1] && checkBox[i].checked){
checkBox[i].checked = false;
}
}
var ul = document.getElementById("infoList");
ul.removeChild(arguments[0].parentNode);
}
//添加选中商品信息
function createInfoElement(){
var li = document.createElement("li");
var input = document.createElement("input");
input.setAttribute("type","hidden");
input.setAttribute("value",arguments[0]);
if(Browser.isIE){
var text = document.createElement("<span style=/"float:left;clear:left;/"></span>")
text.innerHTML = arguments[0];
var a = document.createElement("<a href=/"#/" οnclick=/"removeInfoElement(this,/'" + arguments[0] + "/');return false;/" style=/"float:right;clear:right/"></a>");
a.innerHTML = "删除"
}else{
var text = document.createTextNode(arguments[0]);
var a = document.createElement("a");
a.setAttribute("href","#");
a.setAttribute("onclick","removeInfoElement(this,/'" + arguments[0] + "/');return false;");
a.setAttribute("style","float:right;clear:right;");
a.innerHTML = "删除";
}
li.appendChild(input);
li.appendChild(text);
li.appendChild(a);
return li;
}
</script>
<style type="text/css">
.chooseInfoStyle{
width:150px;
height:100px;
border:1px solid black;
display:block;
position:absolute;
left:10px;
top:10px;
z-index:5;
font-size:14px;
}
.close{
display:none;
}
#divHead{
height:18px;
background:#CCCCCC;
padding:1px;
}
#chooseInfo ul{
list-style:none;
margin-left:10px;
margin-top:5px;
padding:0;
}
#chooseInfo ul li{
width:130px;
border:1px solid #CCCCCC;
}
</style>
</head>
<body>
<div id="chooseInfo" class="chooseInfoStyle">
<div id="divHead">
<a href="#" οnclick="closeDiv();return false;" style="float:right;">关闭</a>
</div>
<div>
<ul id="infoList">.
</ul>
</div>
</div>
<input type="checkbox" name="checkbox1" οnclick="getMouseXY(this,event)" value="jichun" style="margin:300px;"/>
<input type="checkbox" name="checkbox1" οnclick="getMouseXY(this,event)" value="asdf" style="margin:300px;"/>
<input type="checkbox" name="checkbox1" οnclick="getMouseXY(this,event)" value="jxcv" style="margin:300px;"/>
<input type="checkbox" name="checkbox1" οnclick="getMouseXY(this,event)" value="wers" style="margin:300px;"/>
<input type="radio" name="checkbox1" οnclick="getMouseXY(this,event)" value="wers" style="margin:300px;"/>
</body>
</html>