欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery扩展对象方法操作示例

程序员文章站 2022-06-12 14:31:06
本文实例讲述了jquery扩展对象方法操作。分享给大家供大家参考,具体如下: 应项目需求,对jquery进行了一个扩展,需求如下: 项目中需要在浏览器右下角提示操作错误...

本文实例讲述了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可以定位到的对象,都可以使用这个方法。所以只要先定位到改对象,直接调用即可。

更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery切换特效与技巧总结》、《jquery遍历算法与技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jquery程序设计有所帮助。