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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
vue.js的提示组件
2017/03/02 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Numpy掩码式数组详解
2018/04/17 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python正则表达式学习小例子
2020/03/03 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
求职简历自荐信范文
2013/10/21 职场文书
消防安全员岗位职责
2014/03/10 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
护士求职信
2014/07/05 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技