为JQuery扩展一个对象方法

应项目需求,对JQuery进行了一个扩展,需求如下:

项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来。就是给JQuery添加了一个方法ShowMsg。

先上代码:

 $.fn.extend({

   ShowMsg: function (width, height, msgTitle_, msgContent_) {
            var TopY = 0; //初始化元素距父元素的距离
            $("#messageTitle").html(msgTitle_);
            $("#messageResDes").html(msgContent_);
            $(this).css("width", width + "px").css("height", height + "px"); //设置消息框的大小
            $(this).slideDown(1000); //弹出

            $("#messageTool").css("margin-top", -height); //为内容部分创建高度  溢出
            $("#message_close").click(function () {//当点击关闭按钮的时候
                if (TopY == 0) {
                    $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
                }
                else {
                    $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时  ie下和Firefox效果一样
                }
                return false;
            });
            $(window).scroll(function () {
                $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //当滚动条滚动的时候始终在屏幕的右下角
                TopY = $("#message").offset().top; //当滚动条滚动的时候随时设置元素距父原素距离
            });

            setTimeout(function () {
                if (TopY == 0) {
                    $("#message").slideUp(1000); //这里之所以用slideUp是为了兼用Firefox浏览器
                }
                else {
                    $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //当TopY不等于0时  ie下和Firefox效果一样
                }
                return false;
            }, 8000); //8s后自动滑动关闭
        })
代码一目了然,注释很清楚。下面呢,主要说下怎样对JQuery进行扩展吧。

上面的扩展我用了 $.fn.extend进行了扩展,是对JQuery的原生对象进行了方法的扩展,JQuery的扩展主要分为对JQuery本身类进行扩展(JQuery.extend)和对对象的进行方法扩展($.fn.extend)。下面分作说明:

1、用JQuery.extent对JQuery本身进行扩展:

JQuery.extend({
    showInfor:function(0{
           //do something
    }
});
怎么用上面这个呢,看下面:

$.showInfor();//这样就调用到了

2、用$.fn.extend进行方法扩展:

本文开始使用例子就是,下面直接看调用方法:

$("#messageBox").ShowMsg(230,100,"系统提示","提示信息");
说明:$.fn.extend是给JQuery的所有对象进行扩展方法,即只要JQuery可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值