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实现图片放大点击切换
Jun 06 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
完美解决AJAX跨域问题
2013/11/01 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
Vue SSR 组件加载问题
2018/05/02 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python中List的sort方法指南
2014/09/01 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
应届护士求职信范文
2014/01/26 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
个人委托书
2014/07/31 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL