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 dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现动态加载瀑布流
Sep 01 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 SQL之where语句生成器
2009/03/24 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
php中namespace及use用法分析
2016/12/06 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python3中的json模块使用详解
2018/05/05 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
详解python 中in 的 用法
2019/12/12 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
局域网标准
2016/09/10 面试题
建筑实习自我鉴定
2013/10/18 职场文书
工伤赔偿协议书
2014/04/15 职场文书
工程售后服务方案
2014/06/08 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
大学生操行评语大全
2014/12/31 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记