现在的位置: 首页 > 综合 > 正文

[HTC组件] ToolTip

2013年01月29日 ⁄ 综合 ⁄ 共 7685字 ⁄ 字号 评论关闭
<!--
    ToolTip 组件
    作者:圪圪
     QQ:433649
     MSN:eglic {at} eglic {dot} com
    使用方法:
    <a href="JavaScript:;" onclick="JavaScript:alert('测试');"
        style='behavior:url(/script/ToolTip.htc);'    //应用样式
        ToolTipBorder="1"                            //边框样式 0:[默认]细边框 / 1:凸起样式 / 2:凹下样式
        ToolTipStyle="2"                            //内容样式 0:[默认]只有Content / 1:标题和Content,2:全部,标题和Content间有虚线间隔
        ToolTipBgColor="#F0F0F0"                    //背景颜色 #FFCC00 [默认] 或者其他HTML颜色,必须是这种格式
        ToolTipAlpha="90"                            //透明度 100为不透明,0为完全透明,默认是100
        ToolTipWidth="400"                            //ToolTip框宽度 默认是200,不得小于100
        ToolTipTitle="测试标题"                        //标题,纯文本格式 [建议]
        ToolTipContent="测试文本<br /><br /><a href=/sdada/dadad>测试连接</a>
                        <br /><br /><button>测试按钮</button><br /><br /><img
                        src=/productImage/noImage.gif alt=测试图片 />"            //内容,HTML格式
        ToolTipDelay="10"                            //鼠标移开后消失的延时,0为立即消失,10约为一秒
        >
        如果你是政治局成员,你可以和我聊任何话题;
        如果你是省部级以上,你可以在秘书指导下和我聊特定话题;
        如果你是市级,你只能在同级人大主任的指导下在特定时间和我聊特定话题;
        如果你是市级以下,请不要试图把我添加为好友。
    </a>
-->
<PUBLIC:COMPONENT ERROR="TRUE" DEBUG="TRUE">
    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="Initilize()" />
    <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="ShowToolTip()" />
    <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="HideToolTip()" />
    <PUBLIC:PROPERTY NAME="ToolTipBorder" get="getBorder" put="setBorder" />
    <PUBLIC:PROPERTY NAME="ToolTipStyle" get="getStyle" put="setStyle" />
    <PUBLIC:PROPERTY NAME="ToolTipBgColor" get="getBgColor" put="setBgColor" />
    <PUBLIC:PROPERTY NAME="ToolTipAlpha" get="getAlpha" put="setAlpha" />
    <PUBLIC:PROPERTY NAME="ToolTipTitle" get="getTitle" put="setTitle" />
    <PUBLIC:PROPERTY NAME="ToolTipContent" get="getContent" put="setContent" />
    <PUBLIC:PROPERTY NAME="ToolTipWidth" get="getWidth" put="setWidth" />
    <PUBLIC:PROPERTY NAME="ToolTipDelay" get="getDelay" put="setDelay" />
    <PUBLIC:METHOD NAME="__HideToolTip" />
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JSCRIPT">
<!--
    var gToolTip=null;
    var gTimer=null;
    var m_Border=0;
    var m_Style=0;
    var m_BgColor='#FFCC00';
    var m_Title='';
    var m_Content='';
    var m_Width=200;
    var m_Delay=1;
    var m_Alpha=100;
    ///////////////////////////////////////////
    function getBorder(){return m_Border;}
    function getStyle(){return m_Style;}
    function getBgColor(){return m_BgColor;}
    function getTitle(){return m_Title;}
    function getContent(){return m_Content;}
    function getWidth(){return m_Width;}
    function getDelay(){return m_Delay;}
    function getAlpha(){return m_Alpha;}
    ///////////////////////////////////////////
    function setBorder(newBorder){
        if((/^/d$/).test(newBorder)){
            m_Border=parseInt(newBorder);
        }
    }
    function setAlpha(newAlpha){
        if((/^/d{1,3}$/).test(newAlpha)){
            m_Alpha=parseInt(newAlpha);
        }else{
            m_Alpha=100;
        }
        if(m_Alpha>100) m_Alpha=100;
        if(m_Alpha<0) m_Alpha=0;
    }
    function setStyle(newStyle){
        if((/^/d$/).test(newStyle)){
            m_Style=parseInt(newStyle);
        }else{
            m_Style=0;
        }
        if(m_Style<0 || m_Style>2) m_Style=0;
    }
    function setWidth(newWidth){
        if((/^/d+$/).test(newWidth)){
            m_Width=parseInt(newWidth);
        }else{
            m_Width=200;
        }
        if(m_Width<100) m_Width=100;
    }
    function setDelay(newDelay){
        if((/^/d+$/).test(newDelay)){
            m_Delay=parseInt(newDelay);
        }else{
            m_Delay=0;
        }
    }
    function setBgColor(newBgColor){
        if((/^/#[0-9a-f]{6}$/i).test(newBgColor)){
            m_BgColor=newBgColor;
        }
    }
    function setTitle(newTitle){
        m_Title=newTitle;
    }
    function setContent(newContent){
        m_Content=newContent;
    }
    ///////////////////////////////////////////
    function __HideToolTip(){
        if(gToolTip){
            gToolTip.removeNode(true);
            gToolTip=null;
        }
        if(gTimer){
            try{window.clearTimeout(gTimer);}catch(e){;}
            gTimer=null;
        }
    }
    function __KeepToolTip(){
        if(gToolTip)
            if(gTimer){
                try{window.clearTimeout(gTimer);}catch(e){;}
                gTimer=null;
            }
    }
    function __DrawToolTip(){
        __HideToolTip();
        gToolTip=document.createElement('DIV');
        with(gToolTip.style){
            backgroundColor=m_BgColor;
            border='solid 1px gray';    //常规边框
            if(m_Border==1){    //凸起边框
                borderLeft='solid 1px gray';
                borderTop='solid 1px gray';
                borderRight='solid 2px gray';
                borderBottom='solid 2px gray';
            }
            if(m_Border==2){    //凹下边框
                borderLeft='solid 2px gray';
                borderTop='solid 2px gray';
                borderRight='solid 1px gray';
                borderBottom='solid 1px gray';
            }
            width=m_Width;
            height='50px';
            wordBreak ='break-all';
            wordWrap='break-word';
            fontSize='12px';
            position='absolute';
            zIndex='998';
            padding='5px';
            filter='Alpha(Opacity='+m_Alpha.toString()+')';
        }
        gToolTip.onmouseover=__KeepToolTip;
        gToolTip.onmouseout=HideToolTip;
        window.document.body.insertAdjacentElement('afterBegin',gToolTip);
        if(m_Style==0){    //简单样式
            gToolTip.innerHTML=m_Content;
        }else if(m_Style==1){    //复杂样式
            gToolTip.innerHTML='<strong>▓ '+m_Title+' ▓</strong><br />'+m_Content;
        }else if(m_Style==2){    //完整样式
            gToolTip.innerHTML='<strong>▓ '+m_Title+' ▓</strong><br />'+
                                '<p style="margin:0px;padding:0px;padding-top:3px;margin-top:2px;border-top:dotted 1px #0000A0;">'+
                                m_Content+'</p>';
        }
    }
    ///////////////////////////////////////////
    function HideToolTip(){
        if(m_Delay>0){
            gTimer=window.setTimeout('document.all("'+element.uniqueID+'").__HideToolTip();',m_Delay*100);
            //__HideToolTip();
        }else{
            __HideToolTip();
        }
    }
    function ShowToolTip(){
        if(gToolTip) return;
        __DrawToolTip();
        //调整位置
        var sy=parseInt(window.document.body.scrollTop);    //隐藏的高度
        var sx=parseInt(window.document.body.scrollLeft);    //隐藏的宽度
        var ax=parseInt(window.event.x);    //当前实际Left
        var ay=parseInt(window.event.y);    //当前实际Top
        var aw=parseInt(window.document.body.clientWidth);    //窗口宽度
        var ah=parseInt(window.document.body.clientHeight);    //窗口高度
        var sw=parseInt(gToolTip.offsetWidth);    //Tip宽度
        var sh=parseInt(gToolTip.offsetHeight);    //Tip高度
        if(ax+5+sw-aw>0 && ax-5-sw>0){    //右边放不下且左边放的下
            gToolTip.style.left=ax-5-sw+sx;
        }else{
            gToolTip.style.left=ax+5+sx;
        }
        if(ay+5+sh-ah>0 && ay-5-sh>0)    //下边放不下且上边放得下
        {
            gToolTip.style.top=ay-5-sh+sy;
        }else{
            gToolTip.style.top=ay+5+sy;
        }
    }
    function Initilize(){
        if(element.ToolTipContent==''){    //如果没有设置ToolTipContent,将TITLE或者ALT属性复制过来
            if(typeof(element.title)!='undefined'){
                element.ToolTipContent=element.title;
                element.alt='';
                element.title='';
            }else if(typeof(element.alt)!='undefined'){
                element.ToolTipContent=element.alt;
                element.alt='';
                element.title='';
            }else{
                element.ToolTipContent=element.innerText;
            }
        }else{
            element.alt='';
            element.title='';
        }
    }
//-->
</SCRIPT>

抱歉!评论已关闭.