jquery tip提示框

这篇博客展示了如何利用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的函数,可以自定义样式,没时间,就这样了!^_^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值