Jquery 插件开发，JF_UI_Tooltip 

(function(A) {
    A.fn.JF_UI_Tooltip = function(B) {
        new A.JF_UI_Tooltip(this, B);
        return A(this);
    };
    A.JF_UI_Tooltip = function(B, D) {
        var C = A.extend({
            text : "",
            arrowLeft : 0,
            offsetLeft : 0,
            offsetTop : 0,
            width : 0,
            showEvent : "mouseover",
            hideEvent : "mouseout",
            location : "down",
            key : "tip"
        }, D);
        A(B).bind(C.showEvent,function() {
            if (A("body").find(".JF_tooltip").length >= 0) {
                A(".JF_tooltip").remove();
            }
            if (C.width == 0) {
                A("body").append('<div class="JF_tooltip"><div class="JF_tooltip_arrow_up"></div><div class="JF_tooltip_content"></div><div class="JF_tooltip_arrow_down"></div></div>');
            } else {
                A("body").append('<div class="JF_tooltip" style="width:' + C.width + 'px"><div class="JF_tooltip_arrow_up"></div><div class="JF_tooltip_content"></div><div class="JF_tooltip_arrow_down"></div></div>');
            }
            A(".JF_tooltip").css("position", "absolute");
            if (C.text != "") {
                A(".JF_tooltip").find(".JF_tooltip_content").html(C.text);
            } else {
                A(".JF_tooltip").find(".JF_tooltip_content").html(A(this).attr(C.key));
            }
            var G;
            var E;
            var F;
            G = A(this).offset().top + A(this).height()+ C.offsetTop;
            E = A(this).offset().left + C.offsetLeft;
            F = 10 + C.arrowLeft;
            A(".JF_tooltip").css("top", G);
            A(".JF_tooltip").css("left", E);
            A(".JF_tooltip").find(".JF_tooltip_arrow_up").css("left", F);
            A(".JF_tooltip").find(".JF_tooltip_arrow_down").css("left", F);
            A(".JF_tooltip_arrow_down").hide();
            A(".JF_tooltip_arrow_up").hide();
            if (C.location == "down") {
                A(".JF_tooltip_arrow_up").show();
            } else {
                if (C.location == "up") {
                    A(".JF_tooltip_arrow_down").show();
                }
            }
            A(".JF_tooltip").fadeIn("normal");
        });
        A(B).die().live(C.hideEvent, function() {
            A(".JF_tooltip").hide();
            A(".JF_tooltip").remove();
        });
    };
})(jQuery);

 JF_UI_Tooltip.css

.JF_tooltip {
    display: none;
    z-index: 999;
}

.JF_tooltip .JF_tooltip_arrow_up {
    background-image: url(images/tooltip_arrow_up.gif);
    width: 15px;
    height: 9px;
    bottom: -2px;
    left: 10px;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.JF_tooltip .JF_tooltip_arrow_down {
    background-image: url(images/tooltip_arrow_down.gif);
    width: 15px;
    height: 9px;
    top: -2px;
    left: 10px;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.JF_tooltip .JF_tooltip_content {
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    color: #eee;
    background-color: #666;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 0 0 8px #ccc;
    -moz-box-shadow: 0 0 8px #ccc;
    z-index: 9;
}

 

图片资源：

tooltip_arrow_down.gif   

tooltip_arrow_up.gif     

 

使用示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="JF.UI.Tooltip.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JF.UI.Tooltip.js"></script>
<script type="text/javascript">
$(function () {
    $("#test").JF_UI_Tooltip({
        text : "企业应用企业应用企业应用<br>企业应用企业应用企业应用",
        arrowLeft : 0,
        offsetLeft : 0,
        offsetTop : 0,
        width : 0,
        showEvent : "mouseover",
        hideEvent : "mouseout",
        location : "down",
    });
});
</script>
</head>
<body>
    <a href="#" id="test">企业应用</a>
</body>
</html>

效果预览：

 

posted @ 2012-11-23 13:37  高 明  阅读(771)  评论(0)  编辑  收藏  举报