JqueryUI的Tooltip组件实现自定义悬浮Tips提示框
in UI库前端 with 1 comment

JqueryUI的Tooltip组件实现自定义悬浮Tips提示框

in UI库前端 with 1 comment

JqueryUI的Tooltip组件可以实现自定义Tips,让页面提示变得更加美观,同时能够能够解决Chrome浏览器部分版本中标签title属性无法展示的兼容性问题

page_jqueryui_tooltips.jpg

引入原因

在Chrome(谷歌)浏览器在不知名的版本中(少部分版本,偶现,毫无规律),对于HTML标签的原生title属性不兼容了,原因不详
具体表现:页面元素的title属性鼠标hover的时候没有浮动的Tips小框
对于绝大对数网页中如果没有Tips提示的话,用户体验明显下降
因为Tips的作用很大,做提示/解释/自断补充说明等,需要做针对性整改

引入JqueryUI工具包

需要将JqueryUI的包放到Web工程下

<script type="text/javascript" src="<%=contextPath%>/jqueryui/jquery-ui.js"></script>

调用Tooltip方法

如果单纯为了解决Chrome浏览器可以增加浏览器判断
纯粹的想自定义一套提示层,不需要这个判断过程

$(function ()
{
    //取得浏览器的userAgent字符串
    var userAgent = navigator.userAgent; 
    //Chrome浏览器才运行ToolTip
    if (userAgent.indexOf("Chrome") &gt; -1)
    {
        $( document ).tooltip({
        //此处为了让样式更像原生的做的调整
        position: {
            my: "center bottom",
            at: "center+30 bottom+27"
            //tip浮动位置,数值调整 中间偏右30 偏下27
        }});
    }
});

自定义样式

重写ui-tooltip样式,可以更加炫酷
本文中的样式为了更加贴近原生的title格式定义的

.ui-tooltip, .arrow
{
    border: 0px solid #888;
    border-width:1px;
}
.ui-tooltip, .arrow:after
{
    background: white;
    border-radius: 0px;
    border: 0px solid #888;
    border-width:1px;
}
.ui-tooltip
{
    max-width:800px;
    border-radius:0px;
    padding: 1px 8px !important;
    position:absolute;
    border:1px solid #888;
    border-width:1px !important;
    background:white;
    color:#666;
    box-shadow: 5px 5px 5px -2px #888888;
    z-index:100000;
}

性能问题处理

ToolTip实际上相当于当元素中有title属性时,会触发生成一个Div框,并通过浮动展示的方式展示在指定位置
但是当页面元素过多的时候,程序处理不及时,有时页面间切换(尤其是引入Frame框架的局部刷新),会出现之前的Tips还留在页面中
ToolTip并没有自带回收Div框的能力,仅仅是将其隐藏了
普通页面倒无所谓,如果使用了iFrame框架局部页面嵌套加载会导致界面残留大量隐藏的Div框
如果所以当每次触发新的页面的时候,建议执行一次清空,减少页面中的冗余数据

$(function()
{
    //清除页面的历史Tips
    $(".ui-tooltip").each(function(){
        $(this).remove();
    });
    $(".bf_tips").each(function(){
        $(this).remove();
    });
});

可以将清理语句放在某个Head中,在每个页面include进去实现全局清理操作

Responses
  1. 厉害了,点赞

    Reply