zoukankan      html  css  js  c++  java
  • 显示内容长时,显示部分内容,鼠标移入显示全部内容

    实现思想:

      在页面内放入一个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(05));

     

    前台代码:

     

    <div id="dhtmltooltip"  style="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>

    实现效果:

       鼠标移入67396...,会显示全部内容。

     

     

  • 相关阅读:
    几种负载均衡技术的实现
    gevent和tornado异步
    Android笔记:invalidate()和postInvalidate() 的区别及使用——刷新ui
    ubuntu终端颜色配置
    应用程序基础及组件(续)
    安卓架构
    Linux下安卓ndk混合编译调用so方法——QuickStart学习
    JAVA反射机制
    BroadcastReceiver应用详解——广播
    库会因为权限问题无法打开——selinux开启严格模式
  • 原文地址:https://www.cnblogs.com/abcdwxc/p/1980497.html
Copyright © 2011-2022 走看看