jquery tips简易使用方法 新手必看

使用jquery1.12.4以上版本

使用jquery插件 tips

.beg-pull-right 点击时的选择器 在这里写的是一个类选择器
 
记得引入jquery
$(".beg-pull-right").click(function () {
                var name = $("#name").val();
                var pwd = $("#password").val();
                //alert(name + "            " + pwd)
                if (name=="") {
                    $("#name").tips({
                        side: 1,
                        msg: '名字不能为空',
                        color: 'white',
                        bg: '#F7B824',
                        time: 2,
                        x: 0,
                        y: 0
                    })
                } else if(pwd=="") {
                    $("#password").tips({
                        side: 1,
                        msg: '密码不能为空',
                        color: 'white',
                        bg: '#F7B824',
                        time: 2,
                        x: 0,
                        y: 0
                    })
                } else {
                    $.ajax({
                        type: "Post", //方法
                        url: "login.aspx/lo", //url
                        contentType: "application/json; charset=utf-8", //数据格式
                        data: "{\"name\":\""+name+"\",\"pwd\":\""+pwd+"\"}",  //数据
                        dataType: "json", //数据格式
                        success: function (data) {
                            if (data.d=="N") {
                                $("#password").tips({
                                    side: 3,
                                    msg: '密码错误哦!',
                                    color: 'white',
                                    bg: '#F7B824',
                                    time: 2,
                                    x: 0,
                                    y: 0
                                })
                            } else {
                                window.location.href = "index.aspx";
                            }
                            
                        }
                        //成功后的回调函数
                    });
                }

            })

  jquery tips简易使用方法 新手必看_第1张图片

jquery tips简易使用方法 新手必看_第2张图片

下面是tips源代码 有功能使用说明

/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({   //selector 为jquery选择器
*  msg:'your messages!',    //你的提示消息  必填
*  side:1,  //提示窗显示位置  1,2,3,4 分别代表 上右下左 默认为1(上) 可选
*  color:'#FFF', //提示文字色 默认为白色 可选
*  bg:'#F00',//提示窗背景色 默认为红色 可选
*  time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
*  x:0,//横向偏移  正数向右偏移 负数向左偏移 默认为0 可选
*  y:0,//纵向偏移  正数向下偏移 负数向上偏移 默认为0 可选
* })
*
*
*/
(function ($) {
    $.fn.tips = function (options) {
        var defaults = {
            side: 1,
            msg: '',
            color: '#FFF',
            bg: '#F00',
            time: 2,
            x: 0,
            y: 0
        }
        var options = $.extend(defaults, options);
        if (!options.msg || isNaN(options.side)) {
            throw new Error('params error');
        }
        if (!$('#jquery_tips_style').length) {
            var style = '';
            $(document.body).append(style);
        }
        this.each(function () {
            var element = $(this);
            var element_top = element.offset().top, element_left = element.offset().left, element_height = element.outerHeight(), element_width = element.outerWidth();
            options.side = options.side < 1 ? 1 : options.side > 4 ? 4 : Math.round(options.side);
            var sideName = options.side == 1 ? 'top' : options.side == 2 ? 'right' : options.side == 3 ? 'bottom' : options.side == 4 ? 'left' : 'top';
            var tips = $('
' + options.msg + '
').appendTo(document.body); tips.find('.jq_tips_arrow').css('border-' + sideName, '10px solid ' + options.bg); tips.find('.jq_tips_info').css({ color: options.color, backgroundColor: options.bg }); switch (options.side) { case 1: tips.css({ top: element_top - tips.outerHeight() + options.x, left: element_left - 10 + options.y }); break; case 2: tips.css({ top: element_top - 20 + options.x, left: element_left + element_width + options.y }); break; case 3: tips.css({ top: element_top + element_height + options.x, left: element_left - 10 + options.y }); break; case 4: tips.css({ top: element_top - 20 + options.x, left: element_left - tips.outerWidth() + options.y }); break; default: } var closeTime; tips.fadeIn('fast').click(function () { clearTimeout(closeTime); tips.fadeOut('fast', function () { tips.remove(); }) }) if (options.time) { closeTime = setTimeout(function () { tips.click(); }, options.time * 1000); tips.hover(function () { clearTimeout(closeTime); }, function () { closeTime = setTimeout(function () { tips.click(); }, options.time * 1000); }) } }); return this; }; })(jQuery);

  如有不对之处请前辈们指出谢谢!

你可能感兴趣的:(jquery tips简易使用方法 新手必看)