问题描述
- 前台框架使用的easyui 我在前台拼接了一个table，怎么才能浮动显示。
-
$(function(){ $("#tableId").datagrid({ ... columns :[ ... { formatter:function(value,row,index){ return '<a onmouseover="show(this);">+"鼠标移动悬浮table"+</a>'; } } ] }) }); function show(obj){ var str+="<table>"; ... var str+="</table>"; }具体代码不能复制上来，不知道能不能明白我的意思。我拼接的这个table怎么才能在鼠标移动时悬浮。感谢！！
解决方案
http://www.cnblogs.com/haoke/p/4592627.html
解决方案二：
按照这个改改吧。
<!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<style type="text/css">
/*id选择器*/
#win {
/*希望窗口有边框*/
border: 1px red solid;
/*希望窗口宽度和高度固定，不要太大*/
width: 300px;
height: 200px;
/*希望控制窗口的位置*/
position: absolute; /*绝对定位*/
top: 100px;
left: 350px;
/*希望窗口开始时不可见*/
display: none;
}
/*控制标题栏的样式*/
#title {
/*控制标题栏的背景色*/
background-color: blue;
/*控制标题栏中文字的颜色*/
color: yellow;
/*控制标题栏的左内边距*/
padding-left:3px;
}
/*控制内容区域的样式*/
#content {
padding-left: 3px;
padding-top: 5px
}
/*控制关闭按钮的位置*/
#close {
/*使关闭按钮向右侧移动*/
margin-left: 158px;
/*让鼠标进入时可以显示小手，告知用户可以点击操作*/
cursor: pointer;
}
</style>
</head>
<script>
//显示浮动窗口的方法
function showwin(e) {
//lert("准备显示弹出窗口啦！！！");
//1.找到窗口对应的div节点
var winNode = $("#win");
//2.让div对应的窗口显示出来
//方法1,修改节点的css值，让窗口显示出来
//winNode.css("display","block");
winNode.css("left",(($(document).width())/2-(parseInt(winNode.width())/2))+"px");
//winNode.css("top",top+"px");
//方法2，利用Jqeury的show方法
//winNode.show("slow");
//方法3，利用JQuery的fadeIn方法
winNode.fadeIn("slow");
}
//隐藏窗口的方法
function hide() {
//1.找到窗口对应的节点
var winNode = $("#win");
//2.将窗口隐藏起来
//方法1，修改css
//winNode.css("display","none");
//方法2，利用hide方法
//winNode.hide("slow");
//方法3，利用fadeOut方法
winNode.fadeOut("slow");
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Link</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td><a onmouseover="showwin(this)" href="#" mce_href="#">显示浮动窗口</a></td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
<td><a onmouseover="showwin(this)" href="#" mce_href="#">显示浮动窗口</a></td>
</tr>
</table>
<div id="win" style="display:none">
<div id="title">我是标题栏啊！！<span id="close" onclick="hide()">X</span></div>
<div id="content">我是一个窗口哦！！</div>
</div>
</body>
</html>
解决方案三：
将table放入div，absolute定位，然后获取obj对象的位置后，设置div的left/top定位到obj的位置显示
return '<a onmouseover="show(this);" onmouseout="hide()">+"鼠标移动悬浮table"+</a>';
<style>
#popdiv{position:absolute;border:solid 1px #000;background:#fff;}
</style>
<script>
function hide() { $('#popdiv').hide();}
function show(obj) {
var pos = $(obj).offset();
var div = $('#popdiv');
if (div.length == 0) { //弹层dom对象没有生成
div = $('<div id="popdiv"></div>');
div.appendTo(document.body)
}
div.css({ left: pos.left, top: obj.offsetHeight + pos.top });//定位
//组合你的table html代码然后显示到div中
div.html('<table border="1"><tr><td>1111</td></tr></table>').show();
}
</script>
时间： 2024-10-28 08:56:20