zoukankan      html  css  js  c++  java
  • JSP界面设置提示浮动框

    1、公共js

    <script type="text/javascript">
    var tip={ 
        $:function(ele){ 
            if(typeof(ele)=="object") 
                return ele; 
            else if(typeof(ele)=="string"||typeof(ele)=="number") 
                return document.getElementById(ele.toString()); 
            return null; 
        }, 
        mousePos:function(e){ 
            var x,y; 
            var e = e||window.event; 
            return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
                    y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop}; 
            }, 
        start:function(obj){ 
            var self = this; 
            var t = self.$("mjs:tip"); 
            obj.onmousemove=function(e){ 
                var mouse = self.mousePos(e);   
                t.style.left = mouse.x + 10 + 'px'; 
                t.style.top = mouse.y - 30 + 'px'; 
                t.innerHTML = obj.getAttribute("tips");
                if(t.innerHTML.trim() !=''){
                    t.style.display = '';
                }
            }; 
            obj.onmouseout=function(){ 
                t.style.display = 'none'; 
            }; 
        } 
    }
    </script>

    2、公共css

    .tip{
      width:auto;
      max-width:200px;
      border:2px solid #ddd;
      padding:4px;
      background:#f1f1f1;
      color:#666;
    }

    3、在公共页面引入

    <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> 

    4、在需要提示的页面任意标签加入onmouseover="tip.start(this)" tips="提示信息"

    如:

    <input onmouseover="tip.start(this)" tips="提示信息" type="button" class="inputbtn btn-prime radius" id="payCompen" value="确认"/>
    <img src="../images/wenhao.png" onmouseover="tip.start(this)" tips="提示信息" />

    5、效果

  • 相关阅读:
    公司技术部与其他部门之间的那些事儿
    5万元百元大钞的"渣渣钱"重新拼接的软件方面的解决办法的思路。
    公司技术部门内部的发展变化过程。
    手机开发与360的那点事儿
    通用快排
    被中断的函数
    setjmp与longjmp
    setjmp在非主函数中调用
    array and structure
    check your input
  • 原文地址:https://www.cnblogs.com/lujiulong/p/6438719.html
Copyright © 2011-2022 走看看