JQuery扩展对象方法操作示例


Posted in jQuery onAugust 21, 2018

本文实例讲述了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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
You might like
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
一个JS翻页效果
2007/07/23 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
Angularjs中使用Filters详解
2016/03/11 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
python正则表达式re模块详细介绍
2014/05/29 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python删除n行后的其他行方法
2019/01/28 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
2015毕业生自我评价范文
2015/03/02 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang