jquery tip提示框

最新推荐文章于 2025-05-25 16:46:19 发布

原创最新推荐文章于 2025-05-25 16:46:19 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #tip

jQuery 专栏收录该内容

5 篇文章

订阅专栏

这篇博客展示了如何利用jQuery创建一个简单的tip提示框效果。文章包含html代码示例，并提到原本计划实现动态加载CSS以自定义样式，但由于时间限制未完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下效果：

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="./js/tip.jquery.js"></script>
    <title>jquery tip提示</title>
</head>
<body>
    <input type="text" id="username" placeholder="请输入邮箱或手机号" />
</body>
</html>

js调用：

<script type="text/javascript">
<!--
    $('#username').blur(function() {
        /*$(this).tip({
            message:'请输入邮箱或手机号',  //需要显示的内容
            position:'bottom center',      //提示框显示位置和箭头位置
                                           //left:提示框位于触发元素的位置   默认bottom （值有4个，left,top,bottom,right）  
                                           //center:箭头位于提示框的位置     默认center 其他值 为具体像素 （如 10px px为必须）
            color:'#999',                  //提示文字的颜色        默认#999
            bgColor:'#fffce7',             //提示框背景颜色        默认#fffce7
            bdColor:'#f8cc7e',             //提示框边框颜色        默认#f8cc7e
            hideEvent:'click focus',       //提示框消失事件        默认click focus （多个事件空格分开，支持的事件参考jQuery bind函数）
            fontSize:'12px',               //提示文字大小          默认12px
            hideTime:0,                    //提示框消失过度时间    默认0
            top:0,                         //提示框位置top偏移量   默认0
            left:0                         //提示框位置left偏移量  默认0
        });*/

        //简洁的调用方式
        $(this).tip('请输入邮箱或手机号');
    });
//-->
</script>

tip.jquery.js

(function($) {
    $.fn.tip=(function(options) {
        var _this = $(this);
        var _param = {message:'',position:'bottom center',color:'#999',bgColor:'#fffce7',bdColor:'#f8cc7e',hideEvent:'focus',fontSize:'12px',hideTime:0,top:0,left:0};
        $.extend(_param,options);
        if(typeof(options) != 'object') _param.message = options;
        if(!_param.message) return false;
        var _box = $('<div></div>').css({'color':_param.color,'background':_param.bgColor,border:'1px solid '+_param.bdColor,'position':'absolute','padding':'5px 10px','font-size':_param.fontSize}).html('<div id="tip_message">'+_param.message+'</div>').appendTo($('body'));
        var _point = $('<div>◆</div>').css({width:16,height:16,'position':'absolute','color':_param.bdColor,'font-size':'14px','line-height':'14px'}).appendTo(_box);
        var _point_shade = _point.clone().css('color',_param.bgColor).appendTo(_box);
        var _position = _param.position.split(' ');
        _position[1] = _position[1] ? _position[1] : 'center';
        var _top,_left;
        switch (_position[0]) {
            case 'bottom':
                _top = -7;
                _left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
                _point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});
                _box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});
                break;
            case 'top':
                _top = _box.outerHeight()-7;
                _left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
                _point.css({top:_top,left:_left}); _point_shade.css({top:_top-1,left:_left});
                _box.css({top:_this.offset().top-_box.outerHeight()-8+_param.top,left:_this.offset().left+_param.left});
                break;
            case 'left':
                _top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];
                _left = _box.outerWidth()-8;
                _point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left-1});
                _box.css({top:_this.offset().top,left:_this.offset().left-_box.outerWidth()-8});
                break;
            case 'right':
                _top = (_position[1]=='center') ? (_box.outerHeight()-16)/2 : _position[1];
                _left = -7;
                _point.css({top:_top,left:_left}); _point_shade.css({top:_top,left:_left+1});
                _box.css({top:_this.offset().top,left:_this.offset().left+_this.outerWidth()+8});
                break;
            default:
                _top = -7;
                _left = (_position[1]=='center') ? (_box.outerWidth()-16)/2 : _position[1];
                _point.css({top:_top,left:_left}); _point_shade.css({top:_top+1,left:_left});
                _box.css({top:_this.offset().top+_this.outerHeight()+8+_param.top,left:_this.offset().left+_param.left});
                break;
        }
        _this.bind(_param.hideEvent,function(){_box.hide(_param.hideTime,function(){$(this).remove();});});
    });
})(jQuery);

需要先加载jquery库

随便写的，代码不怎么严谨，本来想着写个加载css的函数，可以自定义样式，没时间，就这样了！^_^