实现思想:
在页面内放入一个Div, 调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中。
后台代码:
string
answer
=
e.Row.Cells[
10
].Text;
if (answer.Length > 5 )
{
e.Row.Cells[ 10 ].Text = string .Format( " <label onMouseover=\"ddrivetip('{0}','#FFFFE1', 300)\" onMouseout='hideddrivetip()'>{1}...</label> " , answer, answer.Substring( 0 , 5 ));
if (answer.Length > 5 )
{
e.Row.Cells[ 10 ].Text = string .Format( " <label onMouseover=\"ddrivetip('{0}','#FFFFE1', 300)\" onMouseout='hideddrivetip()'>{1}...</label> " , answer, answer.Substring( 0 , 5 ));
前台代码:
<
div id
=
"
dhtmltooltip
"
style
=
"
width:550px
"
><
/
div>
< script type = " text/javascript " >
var offsetxpoint = 0 // Customize x offset of tooltip
var offsetypoint = 20 // Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && ! document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all[ " dhtmltooltip " ] : document.getElementById ? document.getElementById( " dhtmltooltip " ) : ""
function ietruebody(){
return (document.compatMode && document.compatMode != " BackCompat " ) ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6 || ie){
if ( typeof thewidth != " undefined " ) tipobj.style.width = thewidth + " px "
if ( typeof thecolor != " undefined " && thecolor != "" ) tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip){
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
var rightedge = ie &&! window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie &&! window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0 ) ? offsetxpoint * ( - 1 ) : - 1000
if (rightedge < tipobj.offsetWidth)
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + " px " :
window.pageXOffset + e.clientX - tipobj.offsetWidth + " px "
else if (curX < leftedge)
tipobj.style.left = " 5px "
else
tipobj.style.left = curX + offsetxpoint + " px "
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + " px " :
window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + " px "
else
tipobj.style.top = curY + offsetypoint + " px "
tipobj.style.visibility = " visible "
}
}
function hideddrivetip(){
if (ns6 || ie){
enabletip = false
tipobj.style.visibility = " hidden "
tipobj.style.left = " -1000px "
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
< / script>
< script type = " text/javascript " >
var offsetxpoint = 0 // Customize x offset of tooltip
var offsetypoint = 20 // Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && ! document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all[ " dhtmltooltip " ] : document.getElementById ? document.getElementById( " dhtmltooltip " ) : ""
function ietruebody(){
return (document.compatMode && document.compatMode != " BackCompat " ) ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6 || ie){
if ( typeof thewidth != " undefined " ) tipobj.style.width = thewidth + " px "
if ( typeof thecolor != " undefined " && thecolor != "" ) tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
function positiontip(e){
if (enabletip){
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
var rightedge = ie &&! window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie &&! window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0 ) ? offsetxpoint * ( - 1 ) : - 1000
if (rightedge < tipobj.offsetWidth)
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + " px " :
window.pageXOffset + e.clientX - tipobj.offsetWidth + " px "
else if (curX < leftedge)
tipobj.style.left = " 5px "
else
tipobj.style.left = curX + offsetxpoint + " px "
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + " px " :
window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + " px "
else
tipobj.style.top = curY + offsetypoint + " px "
tipobj.style.visibility = " visible "
}
}
function hideddrivetip(){
if (ns6 || ie){
enabletip = false
tipobj.style.visibility = " hidden "
tipobj.style.left = " -1000px "
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
< / script>
实现效果:
鼠标移入67396...,会显示全部内容。