提取DiscuzNT里的提示功能ToolTip

DiscuzNT有一个比较好的控件：Hint，它可以给控件添加提示内容 (Demo)，目前基于JQuery的Tip也有不少，但是使用起来非常的不方便，DiscuzNT提供的这个控件比较美观，使用也很简单,类似如下，鼠标放上去会有一个提示框，

 

整个提示的核心在Hint.cs里的Render里实现，

 protected override void Render(HtmlTextWriter output)
        {
            StringBuilder sb = new StringBuilder();

            sb.Append("<!--提示层部分开始-->");

            sb.Append("<span id=\"hintdivup\" style=\"display:none; position:absolute;z-index:500;\">\r\n");
            sb.Append("<div style=\"position:absolute; visibility: visible; width: 271px;z-index:501;\">\r\n");
            sb.Append("<p><img src=\"" + this.HintImageUrl + "/commandbg.gif\" /></p>\r\n");
            sb.Append("<div class=\"messagetext\"><img src=\"" + this.HintImageUrl + "/dot.gif\" /><span id=\"hintinfoup\" ></span></div>\r\n");
            sb.Append("<p><img src=\"" + this.HintImageUrl + "/commandbg2.gif\" /></p>\r\n");
            sb.Append("</div>\r\n");
            sb.Append("<iframe id=\"hintiframeup\" style=\"position:absolute;z-index:100;width:266px;scrolling:no;\" frameborder=\"0\"></iframe>\r\n");
            sb.Append("</span>\r\n");

            sb.Append("<span id=\"hintdivdown\" style=\"display:none; position:absolute;z-index:500;\">\r\n");
            sb.Append("<div style=\"position:absolute; visibility: visible; width: 271px;z-index:501;\">\r\n");
            sb.Append("<p><img src=\"" + this.HintImageUrl + "/commandbg3.gif\" /></p>\r\n");
            sb.Append("<div class=\"messagetext\"><img src=\"" + this.HintImageUrl + "/dot.gif\" /><span id=\"hintinfodown\" ></span></div>\r\n");
            sb.Append("<p><img src=\"" + this.HintImageUrl + "/commandbg4.gif\" /></p>\r\n");
            sb.Append("</div>\r\n");
            sb.Append("<iframe id=\"hintiframedown\" style=\"position:absolute;z-index:100;width:266px;scrolling:no;\" frameborder=\"0\"></iframe>\r\n");
            sb.Append("</span>\r\n");

            sb.Append("<!--提示层部分结束-->\r\n");

            output.Write(sb.ToString());
        }

 

注意：里面需要放置一个iframe，这是因为如果没有下拉框，则无论你怎么设置z-index，弹出层都回被下拉框挡住，使用iframe可以解决这个问题呢，

另外这似乎是IE6的问题，IE8,Firefox都不会有这个问题。

然后系统定义了 IWebControl 接口，主要设置提示框的位置，例如向上或者向下，偏移距离是多少等。

在DiscuzNT里，接着定义了几个服务器控件，

 public class MTextBox : System.Web.UI.WebControls.TextBox, IWebControl

{

}

实现这个接口就可以了。

 

当然仅仅上面代码还不够，还需要增加CSS样式和JS脚本。

下面是JS的核心函数

 

//显示提示层
function showhintinfo(obj, objleftoffset, objtopoffset, title, info, objheight, showtype, objtopfirefoxoffset) {

    var p = getposition(obj);

    if ((showtype == null) || (showtype == "")) {
        showtype == "up";
    }
    document.getElementById('hintiframe' + showtype).style.height = objheight + "px";
    document.getElementById('hintinfo' + showtype).innerHTML = info;
    document.getElementById('hintdiv' + showtype).style.display = 'block';

    if (objtopfirefoxoffset != null && objtopfirefoxoffset != 0 && !isie()) {
        document.getElementById('hintdiv' + showtype).style.top = p['y'] + parseInt(objtopfirefoxoffset) + "px";
    }
    else {
        if (objtopoffset == 0) {
            if (showtype == "up") {
                document.getElementById('hintdiv' + showtype).style.top = p['y'] - document.getElementById('hintinfo' + showtype).offsetHeight - 40 + "px";
            }
            else {
                document.getElementById('hintdiv' + showtype).style.top = p['y'] + obj.offsetHeight + 5 + "px";
            }
        }
        else {
            document.getElementById('hintdiv' + showtype).style.top = p['y'] + objtopoffset + "px";
        }
    }
    document.getElementById('hintdiv' + showtype).style.left = p['x'] + objleftoffset + "px";
}

 

 

 

 

附件里包含了相关源代码和资源

点击下载代码 https://files.cnblogs.com/mqingqing123/tooltip.rar 

 您也可以到DiscuzNT里下载，地址为 http://nt.discuz.net

 

效果演示地址地址为，然后点击“会议室管理”然后选择“添加类别”里看到

http://www.dotnetcms.org/dotnetcms/