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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 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
提取HTML标签
2006/10/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python的concat等多种用法详解
2018/11/28 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
员工辞职信范文大全
2015/05/12 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL