为JQuery扩展一个对象方法

妖狐艹你老母 2022-06-16 02:55 233阅读 0赞

应项目需求，对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可以定位到的对象，都可以使用这个方法。所以只要先定位到改对象，直接调用即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery的扩展方法介绍

　　　　最近一直在写js，这其中也少不了一位js的主角了jQuery，下面介绍的是jQuery的一些扩展，也就是jQuery的扩展方法，jQuery的扩展方法有两种方式，一种是

偏执的太偏执、/ 2024年02月18日 19:55/ 0 赞/ 50 阅读

相关自定义jQuery插件——jQuery方法的扩展与jQuery对象的扩展

本文内容：如何实现jQuery对象和方法的扩展 jQuery提供了两个方法($.extend和＄.fn.extend)，可以让用户自行扩展插件(自定义的方法)，以下将通

妖狐艹你老母/ 2023年10月08日 12:51/ 0 赞/ 17 阅读

相关 javascript 之扩展对象 jQuery.extend

在JQuery的API手册中，extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上，但在JQuery内部代码实现的是相同的，只是功能各不相同。官方解释

川长思鸟来/ 2023年08月17日 15:17/ 0 赞/ 143 阅读

相关 jQuery Validate 扩展验证方法

/ jQuery Validate扩展验证方法 / $(function(){ / 整数 /

深藏阁楼爱情的钟/ 2022年12月16日 13:13/ 0 赞/ 191 阅读

相关【jquery扩展】jquery扩展方法extend(),以及扩展插件

这段时间看关于jquery自定义插件,扩展自己的插件看到了两篇感觉特别好的文章,于是转载过来. 第一篇转载地址,博客园的前辈写的：http://www.cnblogs.co

素颜马尾好姑娘i/ 2022年08月06日 09:28/ 0 赞/ 278 阅读

相关为JQuery扩展一个对象方法

应项目需求，对JQuery进行了一个扩展，需求如下：项目中需要在浏览器右下角提示操作错误和系统提示内容，并有滑动移出和关闭的效果，所以自己写了一个效果还可以的弹出框来。就是

妖狐艹你老母/ 2022年06月16日 02:55/ 0 赞/ 234 阅读

相关 jquery 添加扩展方法及为选择的对象添加方法

(function($)\{ //jquery类本身添加方法 //jquery扩展方法1 jQuery.extend(object); $.extend(\{

淩亂°似流年/ 2022年05月23日 12:42/ 0 赞/ 229 阅读

相关 JQuery为元素扩展方法

> 作者：西岭老湿 -------------------- 问题及效果: 想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；类似这种jq中没有的功

╰+哭是因爲堅強的太久メ/ 2022年05月18日 02:51/ 0 赞/ 251 阅读

相关封装jQuery Validate扩展验证方法

一、封装自定义验证方法-validate-methods.js / jQuery Validate扩展验证方法 (linjq) / $(function(){

小咪咪/ 2022年05月13日 03:40/ 0 赞/ 226 阅读

相关 jquery字符串格式化扩展方法

js字符串格式化扩展方法 jQuery.extend({ format:function(){ if(arguments.length==0){

妖狐艹你老母/ 2022年05月09日 05:14/ 0 赞/ 271 阅读