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把获取到的input值转换成json
May 15 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现视频展示效果
May 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使用SOAP调用.net的WebService数据
2013/11/12 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
EL表达式截取字符串的函数说明
2017/09/22 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python随机读取文件实现实例
2017/05/25 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
如何使用python切换hosts文件
2020/04/29 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
党小组评议意见
2015/06/02 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书